<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 给div一个简单样式 -->
<style>
div{
width: 600px;
height: 80px;
background: black;
color: white;
font-size: 20px;
text-align: center;
line-height: 80px;
}
</style>
</head>
<body>
<div></div>
<script>
// @getTime 获取时间数据对象
// @return 返回值为object 年 月 日 星期 时 分 秒
// 封装一个简单的时间函数 没有参数时获取当地时间 有参数时获取参数时间
function getTime(time){
// 未添加参数时 time的值为 undefined
if(time === undefined){
// 获取当地时间
time = new Date()
}else{
// 获取自定义时间
time = new Date(time)
}
// 获取年份
var year = time.getFullYear();
// 获取月份
var month = time.getMonth() + 1;
//获取天
var day = time.getDate();
// 获取具体的星期
var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
var week = arr[time.getDay()];
// 获取小时
var hours = time.getHours();
// 此处是一个前导补零操作 根据个人要求可写可不写 以下相同
hours = hours < 10 ? '0' + hours : hours;
// 获取分钟
var minutes = time.getMinutes();
minutes = minutes < 10 ? '0' + minutes : minutes;
// 获取秒
var second = time.getSeconds();
second = second < 10 ? '0' + second : second;
return {year,month,day,week,hours,minutes,second};
}
// 时间对象函数封装完成后
// 调用封装函数 获取时间对象
// 并将我们封装的时间对象写入获取的div标签中
var object = getTime();
var oDiv = document.querySelector('div');
oDiv.innerHTML = `当前时间是${object.year}年${object.month}月${object.day}日,${object.week} ${object.hours}:${object.minutes}:${object.second}`;
// 设定时间函数,对以上程序 每一秒执行一次
// 从而达到更新时间的效果
setInterval(function(){
var object = getTime();
var oDiv = document.querySelector('div');
oDiv.innerHTML = `当前时间是${object.year}年${object.month}月${object.day}日,${object.week} ${object.hours}:${object.minutes}:${object.second}`;
},1000)
// 到此简单电子时钟实现
// @码上成功~ 一天一个简单小案例 祝大家代码越敲越顺
</script>
</body>
</html>
3339
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
