js small exercise - clock

Show results:

Show current time

html code:

<!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 code:

#times{
    width: 500px;
    height: 300px;
    margin:200px 400px 200px 550px;
}
span{
    width: 100%;
    height: 100%;
    font: 200px "TrueType";
}

js code:

/*获取任意标签的内容*/
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);

js small exercise - clock

Guess you like