效果展示:
显示当前时间
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>时钟</title>
<link rel="stylesheet" type="text/css" href="css/cute.css" />
<link rel="stylesheet" type="text/css" href="css/index1.css" />
</head>
<body>
<div id="times">
<span></span>
:<span></span>
</div>
</body>
<!-- 当页面加载完成,载入JavaScript文件,为Html元素添加动作 -->
<script src="js/index1.js" type="text/javascript" charset="utf-8"></script>
</html>
css代码:
#times{
width: 500px;
height: 300px;
margin:200px 400px 200px 550px;
}
span{
width: 100%;
height: 100%;
font: 200px "TrueType";
}
js代码:
/*获取任意标签的内容*/
function getInnerText(element) {
// 判断浏览器是否支持textContent,如果支持,则使用textContent获取内容,否则使用innerText获取内容。
if(typeof element.textContent == "undefined") {
return element.innerText;
} else {
return element.textContent;
}
}
/*设置任意标签的内容*/
function setInnerText(element, text) {
// 判断浏览器是否支持textContent,如果支持,则使用textContent设置内容,否则使用innerText设置内容。
if(typeof element.textContent == "undefined") {
return element.innerText = text;
} else {
return element.textContent = text;
}
}
function change(){
// 获取当前小时
let hours=new Date().getHours();
// 获取当前分钟
let minutes=new Date().getMinutes();
// 获取div
let p1=document.getElementById("times").getElementsByTagName("span")[0];
let p2=document.getElementById("times").getElementsByTagName("span")[1];
setInnerText(p1,hours);
setInnerText(p2,minutes);
}
change();
// 设置定时器
setInterval(change ,1000);