操作元素-改变元素内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>操作元素-改变元素内容</title>
<style>
div,
p {
width: 300px;
height: 30px;
line-height: 30px;
color: #fff;
background-color: pink;
}
</style>
</head>
<body>
<button>显示当前系统时间</button>
<div>某个时间</div>
<p></p>
<script>
// 当我们点击了按钮, div里面的文字会发生变化
// 1. 获取元素
var btn = document.querySelector('button');
var div = document.querySelector('div'); //将内容显示在页面上
// 2.注册事件
btn.onclick = function () {//进行一个点击之后执行里面的语句
div.innerHTML = getDate(); //使用getDate 获取当前系统时间 使用innerHTML返回给前端页面
}
function getDate() {
var date = new Date();
// 我们写一个 2021年 8月 20日 星期五
var year = date.getFullYear(); //获取当前系统的年份
var month = date.getMonth() + 1; //因为只有0-11 所以在基础上需要加1 获取当前系统的月份
var dates = date.getDate(); //获取当前系统的号数
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var day = date.getDay();
return '今天是:' + year + '年' + month + '月' + dates + '日 ' + arr[day];
}
// 我们元素可以不用添加事件
var p = document.querySelector('p');
p.innerHTML = getDate();使用getDate 获取当前系统时间 使用innerHTML返回给前端页面
</script>
</body>
</html>