效果展示：
手机端效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>趣味日历工具 - 趣味工具 - 趣味笔记</title>
<meta name="Keywords" content="日历查询,桌面日历,手机日历" />
<meta name="Description" content="趣味日历可以在PC、手机、网站之间同步数据。提供最简洁的查看体验，您值得拥有" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<link rel="stylesheet" href="./css/qw-tool.css" type="text/css" />
<link rel="stylesheet" href="./css/Calendar.css" type="text/css" />
<style>
.c{
height: 400px;
}
.c{margin:0 auto;}
.l{float:left;}
.r{float:right;}
</style>
</head>
<body>
<nav id="top">
<ul>
<script src="./js/tool/top-navi.js"></script>
</ul>
</nav>
<div style="height:560px" id="center">
<div id="position">
<ul class="breadcrumb">
<script src="./js/tool/Column-navi.js"></script>
<li>趣味日历工具</li>
</ul>
</div>
<div class="l">
<!--日历开始-->
<table id="qw-calendar" cellspacing="20">
<tr>
<th style="cursor:pointer;cursor:hand;" class="Pre">＜</th>
<th id="tittle" colspan="5" class="today"> </th>
<th style="cursor:pointer;cursor:hand;" class="Next">＞</th>
</tr>
<tr id="days" class="weeks">
<th>日</th>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
<th>六</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<script src='./js/tool/Calendar.js' type="text/javascript"> </script>
</div>
<div class="c r">
<canvas id="can" width="350" height="350"></canvas>
</div>
</div>
<script>
var can=document.getElementById("can");
var con=can.getContext('2d');
time();
setInterval(time,1000);
function time(){
con.clearRect(0,0,360,360);//清除矩形
//先绘制一个园
con.beginPath();
con.lineWidth=10;
con.arc(180,180,135,0,Math.PI*2,false);
con.closePath();
con.stroke();
//时钟刻度
for(var i=0;i<12;i++){
//保存状态
con.save();
con.translate(180,180);
con.beginPath();
con.rotate(Math.PI/6 * i);
//得到5到60的数值
var textTime = i==0?60:i*5;
con.font = '16px 宋体';
con.textAlign = "center";
con.fillText(textTime,0,-100)
//时钟的刻度
con.moveTo(0,-120);
con.lineTo(0,-130);
con.lineWidth = 8;
con.stroke();
con.closePath();
//每次取出一个状态
con.restore();
}
//颜色相同可直接覆盖在时钟上
//分钟刻度
for(var i=0;i<60;i++){
//保存状态
con.save();
con.translate(180,180);
con.beginPath();
con.rotate(Math.PI/30* i);
//分钟的刻度
con.moveTo(0,-120);
con.lineTo(0,-130);
con.lineWidth = 5;
con.stroke();
con.closePath();
//每次取出一个状态
con.restore();
}
//设置时钟品牌文字
con.textAlign="center";
con.font="14px 宋体";
con.fillText("Qu Wei Notes Clock",180,110);
//获得时间日期对象
var data=new Date();
var h=data.getHours();//获得小时
h=h>12?h-12:h;//换算成12时
var min = data.getMinutes();//获得分钟
var sec = data.getSeconds();//获得秒数
//换算为真实的刻度
h=min/60+h;
min=sec/60+min;
//绘制时针
con.save();
//把(0,0)中心点移到画布的中间
con.translate(180,180);
con.rotate(Math.PI/6 * h);//Math.PI=360度
con.beginPath();
con.moveTo(0,-100);
con.lineTo(0,15);
con.lineWidth = 4;
con.lineCap = 'round';
con.stroke();
con.closePath();
//恢复
con.restore();
//绘制分针
con.save();
//把(0,0)中心点移到画布的中间
con.translate(180,180);
con.rotate(Math.PI/30 * min);//Math.PI=360度
con.beginPath();
con.moveTo(0,-90);
con.lineTo(0,15);
con.lineWidth = 3;
con.lineCap = 'round';
con.stroke();
con.closePath();
//恢复
con.restore();
//绘制秒针
con.save();
//把(0,0)中心点移到画布的中间
con.translate(180,180);
con.rotate(Math.PI/30 * sec);
con.beginPath();
con.moveTo(0,-115);
con.lineTo(0,25);
con.lineWidth = 1.5;
con.lineCap = 'round';
con.strokeStyle = 'red';//秒针颜色
con.stroke();
con.closePath();
//秒针上的圆
con.beginPath();
con.arc(0,-95,5,0,Math.PI*2);
con.lineWidth = 1;
con.fillStyle = 'white';
con.strokeStyle = 'red';
con.fill()
con.stroke();
con.closePath();
//恢复
con.restore();
con.save();
con.translate(180,180);
//装饰圆
con.beginPath();
con.arc(0,0,5,0,Math.PI*2);
con.lineWidth = 1;
con.fillStyle = 'white';
con.strokeStyle = 'red';
con.fill()
con.stroke();
con.closePath();
con.restore();
}
</script>
<div id="box" class="box"><div class="box-in"></div><script src='./js/top.js'></script></div>
<footer><script type="text/javascript" src="./js/footer.js"></script></footer>
</body>
</html>
网友评论