js时钟

发布时间：2024-11-23 05:52

前端性能优化：减少HTTP请求和压缩CSS/JS #生活知识# #编程教程#

js时钟

1：效果

在这里插入图片描述

2：项目结构

在这里插入图片描述

3：代码

1）：index.html代码

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>时钟DEMO</title> <style>body{background-color:black;}div{margin:auto;width:500px; position:absolute; position: absolute; left:50%; top:50%; margin-left:-250px; margin-top:-250px;} </style> </head> <body> <div> <canvas id="canvas" width="500" height="500" /> </div> <script src="js/index.js"></script> </body> </html>

1234567891011121314151617181920212223242526272829

2）：index.js代码：

var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.strokeStyle = '#7FFFD4'; ctx.lineWidth = 3; ctx.shadowBlur = 5; ctx.shadowColor = '#7FFFD4'; var milliseconds = 0; var minutes = 0; var hour = 0; var date = ""; var ctxBack = canvas.getContext("2d"); var numBack = canvas.getContext("2d"); ctxBack.lineWidth = 1; ctxBack.shadowBlur = 0; ctxBack.shadowColor = '#F0F8FF'; function pageInit() { showTime(); showBack(); drawSecPin(); drawMinPin(); drawHouPin(); setPoint(); setNum(); } function setNum() { numBack.save(); numBack.translate(250, 250); numBack.beginPath(); numBack.fillStyle = '#7FFFD4'; numBack.font = "30px Helvetica"; for (var i = 0; i < 60; i++) { if (i % 5 == 0) { numBack.lineWidth = 5; var xPoint = Math.sin(i * 6 * 2 * Math.PI / 360) * 195; var yPoint = -Math.cos(i * 6 * 2 * Math.PI / 360) * 195; numBack.fillText(i == 0 ? 12 : i / 5, i == 0 ? -15 : xPoint - 10, i == 0 ? -185 : i <= 30 ? yPoint + 5 : yPoint + 10); } } numBack.stroke(); numBack.closePath(); numBack.restore(); } function drawSecPin() { ctxBack.save(); ctxBack.translate(250, 250); ctxBack.rotate(milliseconds / 60 * 2 * Math.PI); ctxBack.beginPath(); ctxBack.strokeStyle = '#AFEEEE'; ctxBack.lineWidth = 1; ctxBack.lineJoin = "bevel"; ctxBack.miterLimit = 10; ctxBack.moveTo(0, 30); ctxBack.lineTo(3, -175); ctxBack.lineTo(13, -165); ctxBack.lineTo(0, -210); ctxBack.lineTo(-13, -165); ctxBack.lineTo(-3, -175); ctxBack.lineTo(0, 30); ctxBack.stroke(); ctxBack.closePath(); ctxBack.restore(); } function drawMinPin() { ctxBack.save(); ctxBack.translate(250, 250); ctxBack.rotate(minutes * 6 * Math.PI / 180); ctxBack.beginPath(); ctxBack.strokeStyle = '#20B2AA'; ctxBack.lineWidth = 1; ctxBack.lineJoin = "bevel"; ctxBack.miterLimit = 10; ctxBack.moveTo(0, 20); ctxBack.lineTo(3, -145); ctxBack.lineTo(10, -135); ctxBack.lineTo(0, -180); ctxBack.lineTo(-10, -135); ctxBack.lineTo(-3, -145); ctxBack.lineTo(0, 20); ctxBack.stroke(); ctxBack.closePath(); ctxBack.restore(); } function drawHouPin() { ctxBack.save(); ctxBack.translate(250, 250); ctxBack.rotate(hour * 30 * Math.PI / 180); ctxBack.beginPath(); ctxBack.strokeStyle = '#87CEFA'; ctxBack.lineWidth = 1; ctxBack.lineJoin = "bevel"; ctxBack.miterLimit = 10; ctxBack.moveTo(0, 20); ctxBack.lineTo(3, -110); ctxBack.lineTo(10, -100); ctxBack.lineTo(0, -150); ctxBack.lineTo(-10, -100); ctxBack.lineTo(-3, -110); ctxBack.lineTo(0, 20); ctxBack.stroke(); ctxBack.closePath(); ctxBack.restore(); } function setPoint() { ctxBack.beginPath(); ctxBack.fillStyle = 'black'; ctxBack.arc(250, 250, 3, 0, 2 * Math.PI); ctxBack.stroke(); } function showBack() { for (var i = 0; i < 60; i++) { ctxBack.save(); ctxBack.translate(250, 250); ctxBack.rotate(i / 60 * 2 * Math.PI); ctxBack.beginPath(); ctxBack.strokeStyle = '#7FFFD4'; ctxBack.moveTo(0, -250); ctxBack.lineWidth = i % 5 == 0 ? 5 : 2; ctxBack.lineTo(0, -230); ctxBack.stroke(); ctxBack.closePath(); ctxBack.restore(); } ctxBack.beginPath(); ctxBack.arc(250, 250, 230, 0, 2 * Math.PI); ctxBack.stroke(); } function degToRad(degree) { var result; var factor = Math.PI / 180; if (degree == 0) { result = 270 * factor; } else { result = degree * factor; } return result; } function showTime() { var now = new Date(); var today = now.toLocaleDateString(); var time = now.toLocaleTimeString(); var day = now.getDay(); var hrs = now.getHours(); var min = now.getMinutes(); var sec = now.getSeconds(); var mil = now.getMilliseconds(); var smoothsec = sec + (mil / 1000); var smoothmin = min + (smoothsec / 60); var hours = hrs + (smoothmin / 60); milliseconds = smoothsec; minutes = smoothmin; hour = hours; switch (day) { case 1: date = '一' break; case 2: date = '二' break; case 3: date = '三' break; case 4: date = '四' break; case 5: date = '五' break; case 6: date = '六' break; case 0: date = '日' break; } gradient = ctx.createRadialGradient(250, 250, 5, 250, 250, 300); gradient.addColorStop(0, "#03303a"); gradient.addColorStop(1, "black"); ctx.fillStyle = gradient; ctx.fillRect(0, 0, 500, 500); ctx.beginPath(); ctx.strokeStyle = '#87CEFA'; ctx.arc(250, 250, 215, degToRad(0), degToRad((hours * 30) - 90)); ctx.stroke(); ctx.beginPath(); ctx.strokeStyle = '#20B2AA'; ctx.arc(250, 250, 220, degToRad(0), degToRad(smoothmin * 6 - 90)); ctx.stroke(); ctx.beginPath(); ctx.strokeStyle = '#AFEEEE'; ctx.arc(250, 250, 225, degToRad(0), degToRad(smoothsec * 6 - 90)); ctx.stroke(); ctx.font = "25px Helvetica Bold"; ctx.fillStyle = '#7FFFD4'; ctx.fillText(today + "/星期" + date, 150, 230); ctx.font = "23px Helvetica Bold"; ctx.fillStyle = '#7FFFD4'; ctx.fillText(time, 190, 280); } setInterval(pageInit, 50);

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199

网址：js时钟 https://www.yuejiaxmz.com/news/view/205132

上一篇: 使用python 发送企业微信告

下一篇: python解决多容器部署运维

相关内容

JS 整理的答疑
js获取属性的值
深入了解JS的Number类型
JS基础知识点与常考面试题（一）
如何优化网页运行JS脚本性能提高用户体验和加载速度的有效方法
Javascript基础第六天知识点以及案例：作用域、JS预解析、对象
利用剪切板JS API优化输入框的粘贴体验 « 张鑫旭
JS如何实现远程控制：一步步教你掌握技术远程控制是指通过网络等远距离通讯手段控制另一设备的操作行为。在现实生活中，随着物
佐糖
软著申请时提取60页代码shell命令解析

随便看看