前端开发原生JS实现时钟效果
摘要：前端开发app混合开发框架 wap前端开发框架 前端开发ui框架 代码片段 1 <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <title>……
前端开发app混合开发框架 wap前端开发框架 前端开发ui框架
代码片段 1
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>时钟效果</title>
<style>
.time {
font-family: ‘华文细黑’;
font-size: 20px;
color: green;
}
</style>
</head>
<body>
<div class=”time”>当前时间：<span id=”time”></span></div>
</body>
<script>
//日期格式化(可以动态显示哦~~)
function timeFormat() {
var today = new Date();
year = today.getFullYear(),
month = today.getMonth() + 1,
day = today.getDate(),
hour = today.getHours(),
minute = today.getMinutes(),
second = today.getSeconds(),
week = today.getDay(),
weekend = [“星期日”, “星期一”, “星期二”, “星期三”, “星期四”, “星期五”, “星期六”],
weekDay = weekend[week];
month < 10 ? month = “0” + month : month;
day < 10 ? day = “0” + day : day;
hour < 10 ? hour = “0” + hour : hour;
minute < 10 ? minute = “0” + minute : minute;
second < 10 ? second = “0” + second : second;
var time = year + “-” + month + “-” + day + ” ” + hour + “:” + minute + “:” + second + ” ” + weekDay;
document.getElementById(“time”).innerHTML = time;
}
setInterval(timeFormat, 1000);
//日期差
</script>
</html>
web前端框架与移动前端开发 最新的前端开发框架 游戏前端开发框架下载
» 本文来自：前端开发者 » 《前端开发原生JS实现时钟效果》
» 本文链接地址：https://www.rokub.com/5931.html
» 您也可以订阅本站：https://www.rokub.com
近期评论