2021-10-08 vue.js实现抖音很火八卦时间数字罗盘屏保壁纸

vue.js实现抖音很火八卦时间数字罗盘屏保壁纸

代码如下.

<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>Clock</title>
<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.6.9/vue.min.js"></script>
<style>
html,
body {height: 100%;margin: 0;padding: 0;background: #000;
}
#clock {width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;
}
/* .content {width: 700px;height: 700px;
} */
canvas {background-color: #000;width: 100%;height: 100%;
}
</style>
</head><body>
<div id="clock"><div id="content"><canvas ref="cav" width="1400" height="1400"></canvas></div>
</div>
<script>
//https://cubic-bezier.com/#.17,.67,.83,.67
function TransitionTrigger(duration, p1, p2, handler) {let timestamp = 0;let p0 = {x: 0, y: 0};let p3 = {x: 1, y: 1};function loop(frame) {if (timestamp === 0) {timestamp = frame;}let diff = frame - timestamp;let b = bezier(diff / duration);handler && handler(b.y);if (diff <= duration) {window.requestAnimationFrame(loop);return;}handler && handler(1);}function bezier(t) {let x = p0.x * Math.pow((1 - t), 3) + 3 * p1.x * t * Math.pow((1 - t), 2);x += 3 * p2.x * t * t * (1 - t);x += p3.x * t * t * t;let y = p0.y * Math.pow((1 - t), 3) + 3 * p1.y * t * Math.pow((1 - t), 2);y += 3 * p2.y * t * t * (1 - t);y += p3.y * t * t * t;return {x, y};}this.start = function () {window.requestAnimationFrame(loop);};
}new Vue({el: '#clock',name: 'clock',data() {return {dom: null,ctx: null,date: null,center: [400, 400],months: [],days: [],weeks: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],hours: [],minutes: [],seconds: [],radiusStep: 100,wordsMapping: ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十'],center: {x: 0, y: 0},now: new Date(),width: 1400,height: 1400,//0,1.64,1,.89p1: {x: 0.1, y: 1.58},p2: {x: 0.17, y: 0.92},font: '20px PingFang',frontColor: '#fff',backColor: '#666'};},mounted() {//this.fullsScreen();this.dom = this.$refs.cav;let bodyWidth = document.getElementsByTagName("body")[0].offsetWidth;let bodyHeight = document.getElementsByTagName("body")[0].offsetHeight;if(bodyWidth> bodyHeight) {document.getElementById("content").style.width = bodyHeight * 0.95 + "px";document.getElementById("content").style.height = bodyHeight * 0.95 + "px";//console.log("1 "+bodyHeight)}else if(bodyWidth< bodyHeight){document.getElementById("content").style.width = bodyWidth * 0.95 + "px";document.getElementById("content").style.height = bodyWidth * 0.95 + "px";//console.log("2 "+bodyWidth)}else{document.getElementById("content").style.width = bodyWidth + "px";document.getElementById("content").style.height = bodyWidth + "px";//console.log("3 "+bodyWidth)}this.ctx = this.dom.getContext('2d');for (let i = 1; i <= 12; i++) {this.months.push(this.numberToText(i) + '月');}for (let i = 1; i <= 31; i++) {this.days.push(this.numberToText(i));}for (let i = 0; i <= 23; i++) {this.hours.push(this.numberToText(i));}for (let i = 0; i <= 59; i++) {this.minutes.push(this.numberToText(i));}for (let i = 0; i <= 59; i++) {this.seconds.push(this.numberToText(i));}this.center = {x: 700, y: 700};this.ctx.font = '20px PingFang';this.ctx.fillStyle = '#666';this.launch();},methods: {launch() {// window.requestAnimationFrame(this.draw);this.draw();setInterval(this.draw, 1000);},draw() {this.now = new Date();new TransitionTrigger(1000, this.p1, this.p2, (percent) => {this.ctx.clearRect(0, 0, this.width, this.height);this.drawDial(percent);this.drawTimeUnit();}).start();},poke(angle, handler) {this.ctx.translate(this.center.x, this.center.y);this.ctx.rotate(angle / 180 * Math.PI);this.ctx.translate(this.center.x * -1, this.center.y * -1);handler();this.ctx.translate(this.center.x, this.center.y);this.ctx.rotate(angle / 180 * Math.PI * -1);this.ctx.translate(this.center.x * -1, this.center.y * -1);},drawDial(percent) {let radius = 100;const month = this.now.getMonth();this.poke(360 / 12 * month, () => {this.months.forEach((v, idx) => {const radian = (360 / 12 * idx) / 180 * Math.PI;const point = this.pointInCircle(radius, radian);this.ctx.translate(point.x, point.y);this.ctx.rotate(radian * -1);if (idx === month) {this.ctx.fillStyle = this.frontColor;} else {this.ctx.fillStyle = this.backColor;}this.ctx.fillText(v, 0, 0);this.ctx.rotate(radian);this.ctx.translate(point.x * -1, point.y * -1);});});radius += 120;const day = this.now.getDate() - 1;this.poke(360 / 31 * day, () => {this.days.forEach((v, idx) => {const radian = (360 / 31 * idx) / 180 * Math.PI;const point = this.pointInCircle(radius, radian);this.ctx.translate(point.x, point.y);this.ctx.rotate(radian * -1);if (idx === day) {this.ctx.fillStyle = this.frontColor;} else {this.ctx.fillStyle = this.backColor;}this.ctx.fillText(v, 0, 0);this.ctx.rotate(radian);this.ctx.translate(point.x * -1, point.y * -1);});});radius += 120;const hour = this.now.getHours();this.poke(360 / 24 * hour, () => {this.hours.forEach((v, idx) => {const radian = (360 / 24 * idx) / 180 * Math.PI;const point = this.pointInCircle(radius, radian);this.ctx.translate(point.x, point.y);this.ctx.rotate(radian * -1);if (idx === hour) {this.ctx.fillStyle = this.frontColor;} else {this.ctx.fillStyle = this.backColor;}this.ctx.fillText(v, 0, 0);this.ctx.rotate(radian);this.ctx.translate(point.x * -1, point.y * -1);});});radius += 120;const minute = this.now.getMinutes();this.poke(360 / 60 * minute, () => {this.minutes.forEach((v, idx) => {const radian = (360 / 60 * idx) / 180 * Math.PI;const point = this.pointInCircle(radius, radian);this.ctx.translate(point.x, point.y);this.ctx.rotate(radian * -1);if (idx === minute) {this.ctx.fillStyle = this.frontColor;} else {this.ctx.fillStyle = this.backColor;}this.ctx.fillText(v, 0, 0);this.ctx.rotate(radian);this.ctx.translate(point.x * -1, point.y * -1);});});radius += 120;const second = this.now.getSeconds();const k = 360 / 60;this.poke(k * (second - 1) + k * percent, () => {this.seconds.forEach((v, idx) => {const radian = (360 / 60 * idx) / 180 * Math.PI;const point = this.pointInCircle(radius, radian);this.ctx.translate(point.x, point.y);this.ctx.rotate(radian * -1);if (percent > 0.3 && idx === second) {this.ctx.fillStyle = this.frontColor;} else {this.ctx.fillStyle = this.backColor;}this.ctx.fillText(v, 0, 0);this.ctx.rotate(radian);this.ctx.translate(point.x * -1, point.y * -1);});});},drawTimeUnit() {this.ctx.fillStyle = '#fff';this.ctx.fillText(this.now.getFullYear()+' 年', this.center.x - 20, this.center.y);this.ctx.fillText('日', this.center.x + 300, this.center.y);this.ctx.fillText('时', this.center.x + 400, this.center.y);this.ctx.fillText('分', this.center.x + 540, this.center.y);this.ctx.fillText('秒', this.center.x + 660, this.center.y);this.ctx.fillStyle = '#666';},pointInCircle(radius, radian) {return {x: this.center.x + radius * Math.cos(radian),y: this.center.y - radius * Math.sin(radian)};},numberToText(number) {if (number <= 10) {return this.wordsMapping[number];}const words = number.toString().split(/|/);if (number < 20) {return '十' + this.wordsMapping[+words[1]];}if (number % 10 === 0) {return this.wordsMapping[+words[0]] + '十';}return this.wordsMapping[+words[0]] + '十' + this.wordsMapping[+words[1]];},//全屏fullsScreen(){let docElm = document.documentElement;  //W3C   if (docElm.requestFullscreen) {  docElm.requestFullscreen();  }  //FireFox   else if (docElm.mozRequestFullScreen) {  docElm.mozRequestFullScreen();  }  //Chrome等   else if (docElm.webkitRequestFullScreen) {  docElm.webkitRequestFullScreen();  }  //IE11   else if (elem.msRequestFullscreen) {  elem.msRequestFullscreen();  }  }}
});
</script>
</body>
</html>

2021-10-08 vue.js实现抖音很火八卦时间数字罗盘屏保壁纸相关推荐

Java+jxbrowser+jna+js实现抖音很火的时钟桌面WallPaperEngine
很早以前就在抖音上看到电脑时钟桌面,当时都惊呆了,不知道是如何实现的,但抖音上也没有说实现步骤,也就没有放在心上.前段时间刚刚换了个新的显示器,想着更新一下桌面背景,网上找了一翻,没有特别喜欢的背景图 ...
使用js做抖音很火的罗盘时钟（做最靓的仔）
罗盘时钟思路:首先是获取电脑时间,然后做旋转与时间罗盘样式. 代码如下: <!DOCTYPE html> <html><head><meta charset ...
用计算机语言写结婚祝福语,抖音很火的一到10结婚祝福语
抖音很火的一到10结婚祝福语 2020-11-13 16:13:07 结婚祝福除了早生贵子就是百年好合,这次来点不一样的,下面就来看看抖音很火的一到10结婚祝福语! 一.抖音很火的一到10结婚祝福语 ...
抖音很火的召唤神龙的小游戏完整代码-召唤神龙
抖音很火的解压小游戏,完整代码分享.有兴趣的可以试着写一下. 1. index <!DOCTYPE html> <html> <head><meta cha ...
抖音很火的设备性能在线测试
最近抖音很火的手机CPU性能测试,滑动放大3D模型看看你的手机能不能跑满帧 <html lang="zh-CN"><!-- This web page is co ...
年龄测试计算器软件,抖音很火的年龄计算器
抖音很火的年龄计算器是一款非常受大家欢迎的应用,相信很多的小伙伴们都已经在网上看到了,几乎到了上热搜的位置,为啥这么火呢,其实小编觉得可能是因为现在大批量的90后们已经在开始感叹时间的飞速流逝了,所以 ...
魔性计时器html6,最近抖音很火的6首BGM，太有魔性了！
bing娱乐热歌榜单,每周排行最热7首中文歌曲,每周四更新(点头像查看文章).今天小编就为大家整理了最近抖音很火的6首BGM,太有魔性了!我们一起来看看吧! 第一首:<我们不一样>,歌手: ...
wpf 模拟抖音很火的罗盘时钟，附源码，解压就能跑
wpf 模拟抖音很火的罗盘时钟,附源码,解压就能跑前端时间突然发现,抖音火了个壁纸,就是黑底蕾丝~~~ 错错错,黑底白字的罗盘时钟! 作为程序员的我,也觉得很新颖,所以想空了研究下,这不,空下来了 ...
wpf 模拟抖音很火的罗盘时钟，附源码，下载就能跑
wpf 模拟抖音很火的罗盘时钟,附源码前端时间突然发现,抖音火了个壁纸,就是黑底蕾丝~~~ 错错错,黑底白字的罗盘时钟! 作为程序员的我,也觉得很新颖,所以想空了研究下,这不,空下来了就用wpf, ...

2021-10-08 vue.js实现抖音很火八卦时间数字罗盘屏保壁纸

vue.js实现抖音很火八卦时间数字罗盘屏保壁纸

2021-10-08 vue.js实现抖音很火八卦时间数字罗盘屏保壁纸相关推荐

最新文章

热门文章