简单的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 个人打赏
|
|
收藏
淘帖
踩
