域名网站购买,临淄58同城招聘信息网,高端外贸网站制作,网站任务界面Html – 文字时钟
文字时钟#xff0c;之前在Android上实现了相关效果#xff0c;闲来无事#xff0c;弄个网页版的玩玩。。。直接上代码#xff1a;
!DOCTYPE html
html langen
headmeta charsetUTF-8titl…Html – 文字时钟
文字时钟之前在Android上实现了相关效果闲来无事弄个网页版的玩玩。。。直接上代码
!DOCTYPE html
html langen
headmeta charsetUTF-8titleText Clock/titlestyle typetext/csshtml, body {margin: 0;padding: 0;background: black;}.root {display: flex;justify-content: center;}.container {display: block;background: black;}/style
/head
body
div classrootcanvas idcontainer classcontainer/canvas
/divscript typetext/javascriptconst HOURS [一点, 二点, 三点, 四点, 五点, 六点, 七点, 八点, 九点, 十点, 十一点, 十二点];const MINUTES [一分, 二分, 三分, 四分, 五分, 六分, 七分, 八分, 九分, 十分,十一分, 十二分, 十三分, 十四分, 十五分, 十六分, 十七分, 十八分, 十九分, 二十分,二十一分, 二十二分, 二十三分, 二十四分, 二十五分, 二十六分, 二十七分, 二十八分, 二十九分, 三十分,三十一分, 三十二分, 三十三分, 三十四分, 三十五分, 三十六分, 三十七分, 三十八分, 三十九分, 四十分,四十一分, 四十二分, 四十三分, 四十四分, 四十五分, 四十六分, 四十七分, 四十八分, 四十九分, 五十分,五十一分, 五十二分, 五十三分, 五十四分, 五十五分, 五十六分, 五十七分, 五十八分, 五十九分, ];const SECONDS [一秒, 二秒, 三秒, 四秒, 五秒, 六秒, 七秒, 八秒, 九秒, 十秒,十一秒, 十二秒, 十三秒, 十四秒, 十五秒, 十六秒, 十七秒, 十八秒, 十九秒, 二十秒,二十一秒, 二十二秒, 二十三秒, 二十四秒, 二十五秒, 二十六秒, 二十七秒, 二十八秒, 二十九秒, 三十秒,三十一秒, 三十二秒, 三十三秒, 三十四秒, 三十五秒, 三十六秒, 三十七秒, 三十八秒, 三十九秒, 四十秒,四十一秒, 四十二秒, 四十三秒, 四十四秒, 四十五秒, 四十六秒, 四十七秒, 四十八秒, 四十九秒, 五十秒,五十一秒, 五十二秒, 五十三秒, 五十四秒, 五十五秒, 五十六秒, 五十七秒, 五十八秒, 五十九秒, ];const INTERVAL_UPDATE 1000;//时间刷新间隔const mColorCenetr #ffffff;//中心字体颜色const mColorCur #ff0000;//选中字体颜色const mColorCom #bdbdbd;//基础色const mColorBg #000000;//背景颜色const mFont 华文行楷;//字体var mWidth, mHeight;//宽高var mH, mM, mS;//当前的时分秒var mH24;//24制小时var mWeek, mDate, mTime;//星期日期时间var mRadiusH, mRadiusM, mRadiusS;//三个同心圆的半径var mDegreeH, mDegreeM, mDegreeS;//时分秒旋转角度var mTextSizeCom;//通用字体大小var mTextSizeCenter;//中间字体大小var mOffset;//中间文字行间隔var mCenterHeight;//文字纵向居中高度//var canvas;var cxt;var hd, md, sd, av;window.onload function () {initial();}//适应屏幕大小变化window.onresize function () {calcSize();}function initial() {canvas document.getElementById(container);cxt canvas.getContext(2d);calcSize();curTime();startTask();}function calcSize() {mWidth window.innerWidth;mHeight window.innerHeight;//确保为正方形mWidth mHeight Math.min(mWidth, mHeight);canvas.width mWidth;canvas.height mHeight;// console.log(mWidth - mHeight);//字体大小mTextSizeCom mWidth / 50;//通用字体大小mTextSizeCenter mWidth / 35;//中间字体大小mOffset mTextSizeCenter / 2;//中间文字间隔mCenterHeight (mHeight - mTextSizeCom) / 2;//各圆半径mRadiusH mWidth / 6;mRadiusM mRadiusH 4 * mTextSizeCom;//31mRadiusS mRadiusM 5 * mTextSizeCom;//41// console.log(mRadiusH - mRadiusM - mRadiusS);}function startTask() {setInterval(function () {curTime();//内嵌一个有限循环var times 0;var interval setInterval(function () {if (times 6) {clearInterval(interval);} else {doAnimation();times;}}, 10)}, INTERVAL_UPDATE);}//自定义线性循环动画function doAnimation() {// - 顺时针 - - 逆时针av av - 0.9;//总偏移量/次数if (mM 0 mS 0) {mDegreeH hd av * 5;//时圈旋转角度是分秒的5倍线性的旋转30°}if (mS 0) {mDegreeM md av;//线性的旋转6°}mDegreeS sd av;//线性的旋转6°drawCanvas();}//刷新背景function updateBg() {cxt.fillStyle mColorBg;cxt.fillRect(0, 0, mWidth, mHeight);}//绘制中间时间/日期/星期function drawCenterInfo() {cxt.save();cxt.fillStyle mColorCenetr;cxt.font mTextSizeCenter px mFont;//draw timevar len (mTime.length -2) * mTextSizeCenter / 2;//数字大小只有文字的一半 //去掉两个符号cxt.fillText(mTime, (mWidth - len) / 2, mHeight / 2 - mTextSizeCenter * 3 / 2 - mOffset);//draw datevar len2 (mDate.length-2) * mTextSizeCenter / 2;//去掉两个符号cxt.fillText(mDate, (mWidth - len2) / 2, mHeight / 2 - mTextSizeCenter / 2);//draw weekvar len3 mWeek.length * mTextSizeCenter;cxt.fillText(mWeek, (mWidth - len3) / 2, mHeight / 2 mTextSizeCenter / 2 mOffset);cxt.restore();}function drawHour() {cxt.save();//只能旋转角度以原点(0,0)cxt.translate(mWidth / 2, mHeight / 2);cxt.rotate(mDegreeH * Math.PI / 180);//* Math.PI / 180cxt.translate(-mWidth / 2, -mHeight / 2);//旋转完之后需要移回去//时针圈: 360/12 30度for (var i 0; i HOURS.length; i) {cxt.save();cxt.translate(mWidth / 2, mHeight / 2);cxt.rotate(30 * i * Math.PI / 180);cxt.translate(-mWidth / 2, -mHeight / 2);if (i 1 mH || (i 11 mH 0)) {//当前时cxt.fillStyle mColorCur;} else {cxt.fillStyle mColorCom;}cxt.font mTextSizeCom px mFont;cxt.fillText(HOURS[i], mWidth / 2 mRadiusH, mCenterHeight);cxt.restore();}cxt.restore();}function drawMinute() {cxt.save();//只能旋转角度以原点(0,0)cxt.translate(mWidth / 2, mHeight / 2);cxt.rotate(mDegreeM * Math.PI / 180);//* Math.PI / 180cxt.translate(-mWidth / 2, -mHeight / 2);//旋转完之后需要移回去//分针圈: 360/60 6度for (var i 0; i MINUTES.length; i) {cxt.save();cxt.translate(mWidth / 2, mHeight / 2);cxt.rotate(6 * i * Math.PI / 180);cxt.translate(-mWidth / 2, -mHeight / 2);if (i 1 mM) {//当前时cxt.fillStyle mColorCur;} else {cxt.fillStyle mColorCom;}cxt.font mTextSizeCom px mFont;cxt.fillText(MINUTES[i], mWidth / 2 mRadiusM, mCenterHeight);cxt.restore();}cxt.restore();}function drawSecond() {cxt.save();//只能旋转角度以原点(0,0)cxt.translate(mWidth / 2, mHeight / 2);cxt.rotate(mDegreeS * Math.PI / 180);//* Math.PI / 180cxt.translate(-mWidth / 2, -mHeight / 2);//旋转完之后需要移回去//秒针圈: 360/60 6度for (var i 0; i MINUTES.length; i) {cxt.save();cxt.translate(mWidth / 2, mHeight / 2);cxt.rotate(6 * i * Math.PI / 180);cxt.translate(-mWidth / 2, -mHeight / 2);if (i 1 mS) {//当前时cxt.fillStyle mColorCur;} else {cxt.fillStyle mColorCom;}cxt.font mTextSizeCom px mFont;cxt.fillText(SECONDS[i], mWidth / 2 mRadiusS, mCenterHeight);cxt.restore();}cxt.restore();}//刷新画布function drawCanvas() {updateBg();drawCenterInfo();drawHour();drawMinute();drawSecond();}//function curTime() {let date new Date();let year date.getFullYear();let month date.getMonth() 1;let day date.getDate();let week date.getDay();mH24 date.getHours();mM date.getMinutes();mS date.getSeconds();mH mH24 12 ? mH24 - 12 : mH24;mTime formatTime(mH24) : formatTime(mM) : formatTime(mS);mDate year / formatTime(month) / formatTime(day);mWeek parseWeek(week);calculateDegree();}function calculateDegree() {//逆时针旋转mDegreeH -360 / 12 * (mH - 1);mDegreeM -360 / 60 * (mM - 1);mDegreeS -360 / 60 * (mS - 1);hd mDegreeH;md mDegreeM;sd mDegreeS;av 6;//每次动画总偏移量}function formatTime(fn) {return fn 10 ? 0 fn : fn;}function parseWeek(week) {var mWeek;switch (week) {case 1:mWeek 星期一;break;case 2:mWeek 星期二;break;case 3:mWeek 星期三;break;case 4:mWeek 星期四;break;case 5:mWeek 星期五;break;case 6:mWeek 星期六;break;case 7:mWeek 星期日;break;}return mWeek;}
/script
/body
/html
