JavaScript Canvas编写炫彩的网页时钟


Posted in Javascript onOctober 16, 2019

本文实例为大家分享了JavaScript Canvas编写炫彩网页时钟的具体代码,供大家参考,具体内容如下

只是利用了Canvas制作的。

示意图如下:

JavaScript Canvas编写炫彩的网页时钟

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv = "Content-Type" content = "text/html"; charsert = "utf-8" />
 <title> 网页时钟 </title>
</head>
<body>
 <h2> Web时钟 </h2>
 <canvas id = "hello" width = "400" height = "400"
 style = "border:1px solid black"> </canvas>
 <script languagetype = "text/javascript">
 var myCavas = document.getElementById('hello');
 var c = myCavas.getContext('2d');
 function clock() {
  c.clearRect(0, 0, 400, 400);
  //获取当前时间
  var data = new Date();
  //获取秒
  var sec = data.getSeconds();
  //获取分钟
  var min = data.getMinutes();
  //获取小时
  var hour = data.getHours();
  c.save();
  c.translate(200, 200);
  c.rotate(-Math.PI/2);
  //分针刻度线
  for (var i = 0; i < 60; i++) { //画60个刻度线
  c.beginPath();
  c.strokeStyle = "yellowgreen";
  c.lineWidth = 5;
  c.moveTo(117, 0);
  c.lineTo(120, 0);
  c.stroke();
  //每6deg画一个分钟刻度线
  c.rotate(Math.PI/30);
  c.closePath();
  }
  //时钟刻度线
  for (var i = 0; i < 12; i++) { //画60个刻度线
  c.beginPath();
  c.strokeStyle = "green";
  c.lineWidth = 8;
  c.moveTo(100, 0);
  c.lineTo(120, 0);
  c.stroke();
  //每6deg画一个分钟刻度线
  c.rotate(Math.PI/6);
  c.closePath();
  }
  //外表盘
  c.beginPath();
  c.strokeStyle = "pink";
  c.arc(0, 0, 145, 0, Math.PI*2);
  c.lineWidth = 12;
  c.stroke();
  c.closePath();
  //画时针
  hour = hour > 12 ? hour-12 : hour;
  //console.log(hour);
  c.beginPath();
  c.save();
  //设置旋转角度,参数是弧度,角度0-360 弧度角度*Math.PI/180
  c.rotate(Math.PI/6*hour + Math.PI/6*min/60 + Math.PI/6*sec/3600);
  c.strokeStyle = "yellowgreen";
  c.lineWidth = 4;
  c.moveTo(-20, 0);
  c.lineTo(50, 0);
  c.stroke();
  c.restore();
  c.closePath();
  //画分针
  //console.log(min);
  c.beginPath();
  c.save();
  c.rotate(Math.PI/30*min + Math.PI/30*sec/60);
  c.strokeStyle = "springgreen";
  c.lineWidth = 3;
  c.moveTo(-30, 0);
  c.lineTo(70, 0);
  c.stroke();
  c.restore();
  c.closePath();
  //画秒针
  c.beginPath();
  c.save();
  c.rotate(Math.PI/30*sec);
  c.strokeStyle = "red";
  c.lineWidth = 2;
  c.moveTo(-40, 0);
  c.lineTo(120, 0);
  c.stroke();
  c.restore();
  c.closePath();
  c.restore();
 }
 clock();
 setInterval(clock, 1000);
 </script>
</body>
</html>

更多JavaScript时钟特效点击查看:JavaScript时钟特效专题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 禁用只读文本框获得焦点时的退格键
Apr 25 Javascript
javascript返回顶部效果(自写代码)
Jan 06 Javascript
简介AngularJS的视图功能应用
Jun 17 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
Aug 24 Javascript
Webpack 实现 Node.js 代码热替换
Oct 22 Javascript
javascript针对不确定函数的执行方法
Dec 16 Javascript
jQuery短信验证倒计时功能实现方法详解
May 25 Javascript
JavaScript导航脚本判断当前导航
Jul 12 Javascript
angular json对象push到数组中的方法
Feb 27 Javascript
解决axios发送post请求返回400状态码的问题
Aug 11 Javascript
JS实现的新闻列表自动滚动效果示例
Jan 30 Javascript
详解使用WebPack搭建React开发环境
Aug 06 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
Oct 16 #Javascript
javascript实现点亮灯泡特效示例
Oct 15 #Javascript
vue-cli 为项目设置别名的方法
Oct 15 #Javascript
Vue 实现输入框新增搜索历史记录功能
Oct 15 #Javascript
Centos7 安装Node.js10以上版本的方法步骤
Oct 15 #Javascript
微信小程序如何实现五星评价功能
Oct 15 #Javascript
node.js express框架实现文件上传与下载功能实例详解
Oct 15 #Javascript
You might like
php smarty函数扩展
2010/03/15 PHP
PHP 第二节 数据类型之字符串类型
2012/04/28 PHP
Codeigniter校验ip地址的方法
2015/03/21 PHP
PHP生成图片缩略图类示例
2017/01/12 PHP
jquery tab插件制作实现代码
2010/06/22 Javascript
jQuery javaScript捕获回车事件(示例代码)
2013/11/07 Javascript
js控制网页背景音乐播放与停止的方法
2015/02/06 Javascript
基于bootstrap插件实现autocomplete自动完成表单
2016/05/07 Javascript
vue-resourse将json数据输出实例
2017/03/08 Javascript
基于jQuery的表单填充实例
2017/08/22 jQuery
JavaScript累加、迭代、穷举、递归等常用算法实例小结
2018/05/08 Javascript
AngularJS模态框模板ngDialog的使用详解
2018/05/11 Javascript
JavaScript中 ES6变量的结构赋值
2018/07/10 Javascript
微信小程序实现炫酷的弹出式菜单特效
2019/01/28 Javascript
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
python中实现指定时间调用函数示例代码
2017/09/08 Python
python在线编译器的简单原理及简单实现代码
2018/02/02 Python
解决python3中cv2读取中文路径的问题
2018/12/05 Python
python3+PyQt5 数据库编程--增删改实例
2019/06/17 Python
用Python调用win命令行提高工作效率的实例
2019/08/14 Python
简单分析python的类变量、实例变量
2019/08/23 Python
基于Python获取城市近7天天气预报
2019/11/26 Python
python机器学习库xgboost的使用
2020/01/20 Python
django 解决model中类写不到数据库中,数据库无此字段的问题
2020/05/20 Python
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
摩托车和ATV零件、配件和服装的首选在线零售商:MotoSport
2017/12/22 全球购物
在线学习西班牙语、法语或其他语言:Babbel.com
2018/02/07 全球购物
工程部主管岗位职责
2013/11/17 职场文书
大学生自助营养快餐店创业计划书
2014/01/13 职场文书
2014国庆65周年领导讲话稿(3篇)
2014/09/21 职场文书
个人自我剖析材料
2014/09/30 职场文书
小班上学期个人总结
2015/02/12 职场文书
2015年社区党务工作总结
2015/04/21 职场文书
婚礼必备主持词范本!
2019/07/23 职场文书
CSS中em的正确打开方式详解
2021/04/08 HTML / CSS
Java 超详细讲解ThreadLocal类的使用
2022/04/07 Java/Android