简单的 js事件&时间的获取&js新建HTML标签

最新推荐文章于 2022-09-07 10:13:43 发布

孟某人

最新推荐文章于 2022-09-07 10:13:43 发布

阅读量633

点赞数 1

文章标签： js事件 js时间的获取 js新建HTML标签

本文链接：https://blog.csdn.net/qq_44784185/article/details/102532426

版权

简单的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 onclick="switchs()"><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>

孟某人

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
简单的 js事件&时间的获取&js新建HTML标签

简单的js事件图片切换模拟灯开灯灭并记录时间：所用知识点1.通过id获取dom对象：document.getElementById(‘元素id’);2.通过js内置对象Date获取时间： var time = new Date();//获取到时间但是时间格式并不是常用的，所以要通过实例获取单个时间在进行自由组合 var Y = time.getFullYear();//获取年份...
复制链接

扫一扫