A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

简单的js事件图片切换
模拟灯开灯灭并记录时间:
所用知识点
1.通过id获取dom对象:
document.getElementById(‘元素id’);

2.通过js内置对象Date获取时间:
                var time = new Date();//获取到时间但是时间格式并不是常用的,所以要通过实例获取单个时间在进行自由组合
                var Y = time.getFullYear();//获取年份
                var M = time.getMonth() + 1;//获取月份(获取的月份是从0开始的(如果是1月返回的是0)所以与实际时间相比需要加1)
                var D = time.getDate();//获取天数
                var h = time.getHours();//获取小时
                var m = time.getMinutes();//获取分钟
                var s = time.getSeconds();//获取秒数

3.使用js新建html标签
                var p = document.createElement('p');//新建一个p标签当然也可以用这个方法新建大多数标签

4.为新建好标签指定位置
                var p = document.createElement('p');//首先新建一个标签
                var div = document.getElementById('div');//然后通过id获取页面上的一个标签容器(可以存放其他标签的标签)
                div .appendChild(p);//最后将p(新建的标签)指定为div(标签容器)的子类;
5.indexOf()方法
        indexOf()是用来检测字符串或数组中是否有某个元素或字符
        如果有则返回字符或元素的位置
        没有则返回-1
        例如:var a = 'qwer'
                  a.indexOf(w)//返回的值为1
效果展示:


代码思路:
1.首先构造三个div分别是 开关区域 灯区域 文字区域
2.单击开关区域时实现 开关图片的切换 灯泡的切换 文字的输出

代码展示
css代码:
                <style>
        body {
                margin: 0;
                font-size: 30px;
        }
        
        div {
                float: left;
                width: 33.33%;
                height: 1000px;
               
        }
        img {
                margin: 0 auto;
                width: 80%;
                height: 80%;
        }
</style>

html代码:
<body>
        <div><img id="m" src="img/off.png" /></div>
        <div><img id="i" src="img/show.png" /></div>
        <div id="times"></div>
</body>               

js代码:
<script>
        //返回当前时间
                function getTime() {
                        var time = new Date();//获取时间对象
                        var Y = time.getFullYear();//获取年份
                        var M = time.getMonth() + 1;//获取月份
                        var D = time.getDate();//获取天数
                        var h = time.getHours();//获取小时
                        var m = time.getMinutes();//获取其分钟
                        var s = time.getSeconds();//获取秒数
                        //自定义时间格式
                        var times ='你于' + Y + '年' + M + '月' + D + '日' + h + '时' + m + '分' + s + '秒';
                        return times;
                }
                //控制开关方法
                function switchs() {
                        var time = getTime();//获取自己定义格式的时间
                        var img = document.getElementById('i');//获取显示灯的img标签
                        var showTime = document.getElementById('times');//获取图片显示区域
                        var switch0 = document.getElementById('m');//获取显示开关的img标签
                        if(img.src.indexOf('de') == -1) {//通过img对象获取图片url再通过地址判断此时是亮灯还是灭灯
                                //如果是亮灯执行此语句块  ⬇
                                img.src = "img/hide.png";//将灭灯的图片赋值给img
                                time = time + '关闭了灯';//收集要输出的时间字符串
                                switch0.src = 'img/on.png';//将开关的图片换为灭灯
                        } else {
                                //如果是灭灯执行此语句块  ⬇
                                img.src = "img/show.png";//将亮灯的图片赋值给img
                                time = time + '打开了灯';//组织输出的字符串
                                switch0.src = 'img/off.png';//将开关的图片换为亮灯
                        }
                        var p = document.createElement('p');//新建一个p标签
                        p.innerText = time;//将要输出的时间字符串赋值给p标签
                        showTime.appendChild(p);//将p标签指定为显示区域的子类
                }
                </script>

有 0 个人打赏


0 个回复

您需要登录后才可以回帖 登录 | 加入黑马