javascript绘制简单钟表效果
本文给大家分享一个canvas的时钟绘制，供大家参考，具体内容如下
复制可直接使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
h1 {
text-align: center;
}
div {
width: 400px;
height: 400px;
margin: 10px auto;
padding: 0;
}
</style>
</head>
<body>
<h1>手绘时钟</h1>
<hr />
<div>
<canvas id="c1" width="400px" height="400px">
</canvas>
</div>
<script type="text/javascript">
var clock = document.getElementById("c1").getContext("2d");
// var clock = $("#huabu").get(0).getContext("2d"); //$中使用画布
function play() {
clock.clearRect(0, 0, 400, 400);
clock.save();
clock.translate(200, 200); //把画布中心转移到canvas中间
biaopan();
run();
clock.restore();
}
setInterval(function() {
play();
}, 1000);
function biaopan() {
//绘制表盘
clock.strokeStyle = " #9932CC";
clock.lineWidth = 5;
clock.beginPath();
clock.arc(0, 0, 195, 0, 2 * Math.PI);
clock.stroke();
//刻度(小时)
clock.strokeStyle = "#9932CC";
clock.lineWidth = 5;
for(var i = 0; i < 12; i++) {
clock.beginPath();
clock.moveTo(0, -190);
clock.lineTo(0, -170);
clock.stroke();
clock.rotate(2 * Math.PI / 12);
}
//刻度(分钟)
clock.strokeStyle = "#9932CC";
clock.lineWidth = 3;
for(var i = 0; i < 60; i++) {
clock.beginPath();
clock.moveTo(0, -190);
clock.lineTo(0, -180);
clock.stroke();
clock.rotate(2 * Math.PI / 60);
}
//绘制文字
clock.textAlign = "center";
clock.textBaseline = "middle";
clock.fillStyle = "#6495ED";
clock.font = "20px 微软雅黑"
for(var i = 1; i < 13; i++) {
clock.fillText(i,Math.sin(2*Math.PI /12*i)*150,Math.cos(2*Math.PI/12*i)*-150);
}
}
function run() {
var date = new Date();
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
// if(h > 12) {
// h = h - 12;
// }
//日期
var week = date.getDay();
var month = date.getMonth() + 1;
var day = date.getDate();
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;
default: week = "星期天";
break;
}
clock.save();
clock.textAlign = "center";
clock.textBaseline = "middle";
clock.fillStyle = "black";
clock.font = "16px"
clock.fillText(week,-2,-118);
clock.fillText(month+" 月",-90,2);
clock.fillText(day+" 号",90,0);
clock.stroke();
clock.restore();
//时针
//分针60格 分针5格
clock.save();
clock.rotate(2 * Math.PI / 12 * h + (2 * Math.PI / 60 * m + 2 * Math.PI / 60 * s / 60) / 12);
clock.strokeStyle = "black";
clock.lineWidth = 7;
clock.beginPath();
clock.moveTo(0, 0);
clock.lineTo(0, -80);
clock.lineCap = "round";
clock.stroke();
clock.restore();
//分针
//秒针60格 分针一格
clock.save();
clock.beginPath();
clock.strokeStyle = "#D2691E";
clock.lineWidth = 5;
clock.rotate(2 * Math.PI / 60 * m + 2 * Math.PI / 60 * s / 60);
clock.moveTo(0, 0);
clock.lineTo(0, -110);
clock.lineCap = "round";
clock.stroke();
clock.restore();
//秒针
clock.strokeStyle = "red";
clock.rotate(2 * Math.PI / 60 * s);
clock.lineWidth = 4;
clock.beginPath();
clock.moveTo(0, 0);
clock.lineTo(0, -120);
clock.lineCap = "round";
clock.stroke();
//中心
clock.fillStyle = " #CCFFFF";
clock.lineWidth = 5;
clock.beginPath();
clock.arc(0, 0, 10, 0, 2 * Math.PI);
clock.fill();
clock.strokeStyle = "cadetblue";
clock.stroke();
}
</script>
</body>
</html>
更多JavaScript时钟特效点击查看：JavaScript时钟特效专题
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JS+CSS3实现的简易钟表效果示例
本文实例讲述了JS+CSS3实现的简易钟表效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>www.jb51.net js+css3简易钟表</title> <style type="text/css"> *{ margin: 0; padding: 0; } #wrap{
-
详解JavaScript的Date对象（制作简易钟表）
JS提供了Date类型来处理时间和日期.Date类型内置一系列获取和设置日期时间信息的方法.下面我们简单的 概述一下这个Date类型. 大概看了一下Date类型的方法,下面给出: 上面的方法自己尝试即可,我只简单的演示一下JS正确输出的格式: var today=new Date();//创建一个时间日期对象 document.write("<h4>下面的是世界标准的时间输出:</h4>"); document.write(today+"
-
利用css+原生js制作简单的钟表
利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分 html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期以及时间,至于钟表上的刻度.数字等元素,因为量比较多,采用jvascript生成 <!doctype html> <html> <head> <meta charset="UTF-8"> <link rel='stylesheet'
-
原生JS实现的简单小钟表功能示例
本文实例讲述了原生JS实现的简单小钟表功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 完整代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>www.jb51.net 钟表</title> <style type="text/css"> body { background-color:#00A2D
-
javascript绘制简单钟表效果
本文给大家分享一个canvas的时钟绘制,供大家参考,具体内容如下 复制可直接使用 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> h1 { text-align: center; } div { width: 400px; height: 400px; margin: 10px auto; pad
-
JavaScript实现简单钟表时钟
本文实例为大家分享了JavaScript实现简单钟表时钟的具体代码,供大家参考,具体内容如下 效果图: 主要思想: 1.先画一个圆表盘. 2.再用js循环画刻度(每一个刻度都是li标签). 3.再画时分秒指针. 4.再用JS让指针动起来. 代码中有详细的注释可以直接看代码. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta h
-
javascript实现简单计算器效果【推荐】
最终效果如下图-2,有bug:就是整数后点击%号结果正确,如果小数后面点击%的话结果就错误!其他都正常,求指点:input的value是string类型的,在JS中改如何正确处理下图-1中的if部分?? 图-1 图-2 HTML代码如下 <body> <div id="calculator"> <div class="LOGO"> <span class="name">简单的计算器</span
-
JavaScript实现简单日历效果
本文实例为大家分享了JavaScript实现简单日历效果的具体代码,供大家参考,具体内容如下 实现效果: 根据所选择的年月,列出当月对应是周几,效果图如下: 实现思路: 1.使用select标签保存年月的所选菜单.使用table标签保存当月天数,表头为固定的周日周一等. 2.使用option对象,给年月循环赋值. 3.将每月的天数保存到数组中,根据所选的年月获取当月的天数,以及当月一号对应周几,对应周几就在第一行先打印几个空格,然后从一号开始依次打印当月天数. 4.刷新年月时,清除上次表格中(除
-
javascript实现简单倒计时效果
本文实例为大家分享了javascript实现倒计时效果的具体代码,供大家参考,具体内容如下 实现思路: 1.页面创建好天.小时.分.秒的标签元素,定义好样式 2.js获取天.小时.分.秒的元素对象,方便后面给它们赋值- - -剩余时间 3.定义一个计算当前时间和设定时间- - -时间差的函数,将剩余天数.小时.分.秒分别计算计算出来,并赋值给相应的与元素内容 4.使用setInterval()函数,设置每隔1秒执行一次时间差函数, 5.注意setInterval()函数之前,先调用一次时间差函数
-
javascript实现简单放大镜效果
一个大盒子中有一张图片,鼠标放上去会出现一个半透明的遮罩层,鼠标移动,遮罩层跟着移动,盒子旁边还有一个放大的图片,跟着遮罩层移动的位置而改变放大图的位置,鼠标离开大盒子,遮罩层和放大图片消失 实现思路 1.html.css将盒子,遮罩层.放大图片页面编辑好,设置遮罩层和放大图片默认隐藏 2.获取元素对象,将大盒子绑定鼠标事件 鼠标经过- - -mouseover,鼠标经过时设置遮罩层和放大图显示:display设置成'block' 鼠标离开- - -mouseout,鼠标经过时设置遮罩层和放大图
-
JavaScript实现简单的倒计时效果
本文实例为大家分享了JavaScript实现简单倒计时效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="utf8"> <meta http-equiv="X-UA-Compatible" cotent="IE=edge,chrome=1&quo
-
JavaScript代码实现简单日历效果
本文实例为大家分享了JavaScript实现简单日历效果的具体代码,供大家参考,具体内容如下 效果如下: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta na
-
JS+html5 canvas实现的简单绘制折线图效果示例
本文实例讲述了JS+html5 canvas实现的简单绘制折线图效果.分享给大家供大家参考,具体如下: 1.实例代码: <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>画图</title> <style> #divContainer{ margin-top: 20px; text-align: center; } #cv{ width: 300px;
-
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
本文实例讲述了jQuery插件HighCharts绘制简单2D折线图效果.分享给大家供大家参考,具体如下: 1.实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D折线图</title> <script type="text/javascript" src="js/jquer