版权声明：本文为博主原创文章，使用请注明出处：http://blog.csdn.net/sxc1414749109 https://blog.csdn.net/sxc1414749109/article/details/79470249
- 普通无特效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Time</title>
<style>
html,body{
background: black;
height: 100%;
margin: 0;
/* 开启弹性布局 */
display: flex;
/* 水平居中 */
justify-content: center;
/* 垂直居中 */
align-items: center;
}
main{
/* border: 1px solid red; */
text-align: center;
}
#time_div{
font-size: 150px;
color: chartreuse;
font-family: 草书;
}
#date_div{
font-size: 40px;
color: peru;
font-family: 草书;
}
</style>
</head>
<body>
<main>
<div id="time_div">12:12:12</div>
<div id="date_div">2012年12月12日 星期二</div>
</main>
<!-- js代码块，获取当前时间 -->
<script>
// var varible 变量
// document 文档：网页
var time_msg = document.getElementById('time_div');
var date_msg = document.getElementById('date_div');
// 创建方法的格式
// function+方法名称
function showTime(){
// 获取当前最新时间
var newTime = new Date();
// console输出log日志
// 在控制台输出日志信息
console.log(newTime)
// alert弹出框
// alert(newTime);
var hours = newTime.getHours();
var minutes = newTime.getMinutes();
var second = newTime.getSeconds();
// + 字符串拼接
// + 如果是数字表示相加
hours = hours < 10?'0' + hours : hours;
minutes = minutes < 10? '0' + minutes : minutes;
second = second < 10? '0' + second : second;
// alert(hours);
time_msg.innerText = hours + ':' + minutes + ':' + second;
var year = newTime.getFullYear();
var month = newTime.getMonth()+1;
// 获取日
var date = newTime.getDate();
// 获取星期
var day = newTime.getDay();
if(day==0){
day = '日'
}
else if(day==1){
day = '一'
}
else if(day==2){
day = '二'
}
else if(day==3){
day = '三'
}
else if(day==4){
day = '四'
}
else if(day==5){
day = '五'
}
else{
day = '六'
}
date_msg.innerText = year + '年' + month + '月' + date + '日 星期' + day;
}
// 调用方法
showTime();
// invterval 时间间隔
// 参数1：调用的方法
// 参数2：间隔时间 单位默认是毫秒
// 1000毫秒刷新一次
setInterval(showTime,1000);
</script>
</body>
</html>
- 带简单特效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>时钟</title>
</head>
<body>
<header>
<h1>时钟</h1>
</header>
<artical>
<section>
<figure>
<canvas id="one" width="800" height="800"></canvas>
</figure>
</section>
</artical>
<script>
var one=document.getElementById("one");
var context=one.getContext("2d");
function clock() {
var sec=new Date().getSeconds();
var min=new Date().getMinutes();
var hour=new Date().getHours();
//设置表盘
//圆形渐变色参数分别为两个圆心和半径
var g1 = context.createRadialGradient(400, 400, 0, 400, 400, 200);
//设置两个渐变色的参数
g1.addColorStop(0, "#fcfcfc");
g1.addColorStop(1, "#defdff");
//设置线宽
context.lineWidth = 2;
context.fillStyle = g1;
context.beginPath();
context.arc(400, 400, 200, 0,360, false);
context.closePath();
context.fill();
context.stroke();
context.fillStyle="yellow";
context.beginPath();
context.arc(400,400,10,0,360, false);
context.closePath();
context.fill();
//时针刻度盘
for (var i = 0; i < 12; i++) {
context.save();
//将坐标原点位置移动到圆心处
context.translate(400, 400);
context.rotate(i*30*Math.PI/180);
context.beginPath();
context.moveTo(0, -200);
context.lineTo(0, -180);
context.closePath();
context.stroke();
context.restore();//不重置会少两个刻度？？？
}
//分针刻度盘和秒针刻度盘
for (var i = 0; i < 60; i++) {
if (i%5!=0) {
context.save();
context.strokeStyle="red";
context.translate(400, 400);
context.rotate(i*6*Math.PI/180);
context.beginPath();
context.moveTo(0, -200);
context.lineTo(0, -190);
context.closePath();
context.stroke();
context.restore();
}
}
//秒针
context.save();
context.fillStyle="red";
context.translate(400, 400);
context.rotate(sec*6*Math.PI/180);
context.beginPath();
context.moveTo(0, -170);
context.lineTo(-5, -30);
context.lineTo(0, -10);
context.lineTo(5, -30);
context.closePath();
context.fill();
context.restore();
//分针
context.save();
context.fillStyle="blue";
context.translate(400,400);
context.rotate(min*6*Math.PI/180);
context.beginPath();
context.moveTo(0, -150);
context.lineTo(-5, -30);
context.lineTo(0, -10);
context.lineTo(5, -30);
context.closePath();
context.fill();
context.restore();
//时针
context.save();
context.lineWidth=2;
context.fillStyle="black";
context.translate(400,400);
context.rotate(hour*30*Math.PI/180);
context.beginPath();
context.moveTo(0, -130);
context.lineTo(-8,-30);
context.lineTo(0,-10);
context.lineTo(8,-30);
context.closePath();
context.fill();
context.restore();
}
context.clearRect(0,0,800,800);//清除画布
clock();
setInterval(clock,1000);
</script>
</body>
</html>