webapis_07_操作元素

最新推荐文章于 2024-07-26 11:41:15 发布

一只追求学习的学渣

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量94

点赞数

分类专栏： JS 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44079801/article/details/106967804

版权

JS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>操作元素</title>
		<style>
			div,p{
				width: 300px;
				height: 30px;
				line-height: 30px;
				color:#ccc;
				background-color: #fff;
			}
		</style>
	</head>
	<body>
		<button>显示当前系统时间</button>
		<div>00-00-00</div>
		<p>人之初</p>
		<script>
			//目标 点击按钮 div里面的文字会发生变化
			//1.获取元素
			var btn = document.querySelector('button');
			var div = document.querySelector('div');
			//2.注册事件
			btn.onclick = function(){
				div.innerText = getDate();
			}
			function getDate(){
				var date = new Date();
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var dates = date.getDate();
				var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
				var day = date.getDay();
				return '今天是: ' + year + '年' + month + '月' + dates + '日' + arr[day];
				
			}
			//实现刷新页面就能引发事件(操作DOM)
			//即可以不用添加事件，以p标签为例
			//1.获取标签
			var p = document.querySelector('p');
			p.innerText = getDate();
			
		</script>
	</body>
</html>

一只追求学习的学渣

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webapis_07_操作元素

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>操作元素</title> <style> div,p{ width: 300px; height: 30px; line-height: 30px; color:#ccc; background-color: #fff; } </s
复制链接

扫一扫

专栏目录