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;
			}
		</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>
webapis_07_操作元素

猜你喜欢
