效果图
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>时钟</title>
<style>
main{
width: 680px;
height: 680px;
background-color: #EEEEEE;
/*设置边框*/
border: 5px solid black;
margin: 40px auto;
/*设置边框角度*/
border-radius: 50%;
}
section{
width: 600px;
border: 1px solid black;
border-left: none;
border-right: none;
margin: 250px auto;
/*使文本居中*/
text-align: center;
}
#time{
font-size: 150px;
/*设置行高*/
line-height: 150px;
color: #333333;
}
#date{
font-size: 40px;
color: #aaaaaa;
margin-right: 10px;
}
</style>
</head>
<body>
<!--main定义了文档的主要内容,它里面的内容相对于文档里面的内容必须是唯一的-->
<main>
<section>
<header id="date"></header>
<div id="time"></div>
<!--id唯一标示符-->
</section>
</main>
<!--script脚本文件-->
<script>
// 定义一个函数 function是一个关键字 后面是函数名
// 函数名是自己定义的 但是要有实际意义
// 命名规范:驼峰命名法 首单词小写其余每个单词的首字母大写
function showTime(){
// var 是定义变量的关键字 now 是自己定义的 等号后面是给变量赋值的
// = 是赋值 也就是时候把右边的值赋值给左边
// 获取当前的时间
var now = new Date()
// getHours获取当前的小时
var hour = now.getHours()
var minute = now.getMinutes()
var second = now.getSeconds()
// console.log(minute) 调试用 打印到控制台
// 三元运算符 ? 号前面是一个判断语句
// 如果条件为真 执行第一个值
// 如果条件为假 执行第二个值
// 格式: 条件语句?值1:值2
second = second < 10 ? '0' + second:second
minute = minute < 10 ? '0' + minute:minute
hour = hour < 10 ? '0' + hour:hour
// document是JavaScript的一个对象
// getElementById它是一个函数 作用是通过id获取相对应的元素
// innerHTML属性设置返回HTML标签中间的内容
document.getElementById('time').innerHTML = hour + ':' + minute + ':' + second
// 获取年份
var year = now.getFullYear()
// 获取月份 getMonth获取的数值是0-11 每次要加1
var month = now.getMonth() + 1
// 获取日期
var date = now.getDate()
// 获取周几
var week = now.getDay()
switch(week){
case 1 :
week = '一'
break;
case 2 :
week = '二'
break;
case 3 :
week = '三'
break;
case 4 :
week = '四'
break;
case 5 :
week = '五'
break;
case 6 :
week = '六'
break;
case 7 :
week = '日'
break;
}
document.getElementById('date').innerHTML = year + '年' + month + '月' + date + '日' + ' ' + '周' + week
}
showTime()
// 设置定时器 每隔一秒的时间执行一次showTime()
// 第一个参数执行的是函数名
// 第二个参数指的是时间间隔 单位是毫秒
setInterval(showTime,1000)
</script>
</body>
</html>
这个不需要额外素材图片,纯H5制作!