<!--<!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。-->
<!DOCTYPE html>
<!--lang是language的缩写 en表示English lang属性声明当前页面的语言类型-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>时钟</title>
<style>
main{
width: 600px;
height: 300px;
border: 50px ridge #def1ff;
/*设置边框圆角*/
border-radius: 50px;
margin: 0 auto;
margin-top: 100px;
/*background-image: url(123.jpg);*/
}
section{
width: 500px;
height: 180px;
border: 2px solid black;
margin: 0 auto;
margin-top: 60px;
background-color: rgba(0, 116, 8, 0.04);
}
#date{
/*设置文本对齐方式 right 居右对齐 align使排齐;校准;使成为一条直线*/
/*text-align 设置文本的对齐方式*/
text-align: right;
/*设置字体的大小*/
font-size: 20px;
}
#time{
font-size: 100px;
/*设置文本对齐方式 center 居中*/
text-align: center;
/*border是会随着时间显示的大小变化的*/
border: 1px solid black;
/*这是div的高度*/
height: 154px;
/*设置行高,用来垂直居中*/
line-height: 155px;
}
</style>
</head>
<body>
<!--main:主要的 也是html5新增的语义化标签,只能在文档里使用一次-->
<main>
<section>
<div id="date">2018年09月19日 星期四</div>
<div id="time">15:05:59</div>
</section>
</main>
<script>
//定义函数:用函数把部分功能代码封装起来,可以多次使用
function showTime(){
// var 声明变量的关键字
// d 变量名 可以用来表示一切东西
var d = document.querySelector('#date');
var now = new Date();
//获取年月日
var year = now.getFullYear();
var month = now.getMonth()+1;
var day = now.getDate();
//获取时分秒
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
//三目运算符
month = month < 10 ? "0"+month : month;
hour = hour < 10 ? "0"+hour : hour;
minute = minute < 10 ? "0"+minute : minute;
second = second < 10 ? "0"+second : second;
day = day < 10 ? "0"+day : day;
var t = document.querySelector('#time')
var time = hour+':'+minute+":"+second;
t.innerHTML = time
//定义周,把数字周转换成字符形式的星期几
var week = now.getDay()
//switch:转换。(需要转换的字符){转换的条件}
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;
}
//2018年09月25日 星期三
var date = year+'年'+month+'月'+day+'日'+' '+week;
//innerHTML:给标签的内容重新赋值
d.innerHTML = date
}
//调用函数
showTime();
//定时器 ,(执行的函数,间隔的时间(单位:毫秒))
setInterval(showTime,1000)
</script>
</body>
</html>