用JavaScript写抖音很火的罗盘时钟，附源码

绝地灬酷狼 2021-07-24 13:45 1137阅读 0赞

# 原生js制作在抖音上很火的罗盘布局时钟代码。带日期、月份、星期、时分秒圆盘时钟。 #

## 效果图： ##

## ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70][] ##

## 3个构造函数 ##

### 文本构造函数 ###

//文字的构造函数
    	function Text(o){
    		this.x=0,//x坐标
    		this.y=0,//y坐标
    		this.disX=0,//x坐标偏移量
    		this.disY=0,//y坐标偏移量
    		this.text='',//内容
    		this.font=null;//字体
    		this.textAlign=null;//对齐方式
    		
    		this.init(o);
    	}
    	
    	Text.prototype.init=function(o){
    		for(var key in o){
    			this[key]=o[key];
    		}
    	}
    	Text.prototype.render=function(context){
    		this.ctx=context;
    		innerRender(this);
    			
    		function innerRender(obj){
    			var ctx=obj.ctx;
    			ctx.save()
    			ctx.beginPath();
    			ctx.translate(obj.x,obj.y);
    			if(obj.angle){//根据旋转角度来执行旋转
    				ctx.rotate(-obj.angle*Math.PI/180);
    			}

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70]: /images/20210724/07193ce4613a40b6a71e11f9b21eef5d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，1137人围观）

还没有评论，来说两句吧...

相关阅读

相关抖音是什么语言写的_抖音标题怎么写能火？点赞220w的抖音爆款视频用了这些标题技巧！...

![0f7e10c21153ce5e58069a7261ac2942.png][] 抖音中心化的算法机制决定了其“依靠内容找粉丝”的底层逻辑，它给予了新来者和原有的头部网红

爱被打了一巴掌/ 2023年01月08日 02:20/ 0 赞/ 113 阅读

相关 java BorderLatout_用编程做出抖音上很火的时钟效果

反正，我的抖音没人看，别人都有几十万个赞什么的。发到思否上来，大家交流下~ 主要用到原生态的 JS+CSS3。 ![4b6d7be71691dd2927e5160a44

深碍√TFBOYSˉ_/ 2022年11月12日 02:34/ 0 赞/ 156 阅读

相关用计算机弹现在最火的英文歌,抖音最火的英文歌曲排行榜,2018抖音最火的英文歌(80首)...

抖音上的音乐有很多真的非常好听，不管是翻唱也好，BMG也好，抖音真的是带火了非常多的英语歌曲，小编今天就来给大家搜罗2018抖音最火的英文歌，抖音最火的英文歌曲排行榜，你值得拥

Bertha 。/ 2022年10月09日 06:00/ 0 赞/ 282 阅读

相关抖音上非常火的整人小程序

最近，抖音上的整人小程序深得刷客恩宠。今天小编就为大家献上源代码：直接上效果图 ![70][] 这里，只有她输入“我是猪”，并且按下确定的时候，才能继续...否则

快来打我*/ 2022年05月15日 23:19/ 0 赞/ 342 阅读

相关用小程序写一个“抖音”

> 小程序一个`page`里面不要放两个`video`组件。——鲁迅 `video`是算是小程序中坑最多、最深的组件之一。在早期的小程序版本库中，一个`page`中如果放2个

缺乏、安全感/ 2022年03月16日 13:54/ 0 赞/ 416 阅读

相关 python实现抖音上比较火的罗盘时钟

抖音上比较有趣的罗盘时钟，今天用turtle来画一下，基本功能实现了，拿来练习一下turtle,感觉还可以吧 turtle的安装 sudo apt-get

╰+哭是因爲堅強的太久メ/ 2022年01月29日 14:17/ 0 赞/ 1172 阅读

相关 jQuery 仿抖音时钟罗盘转动效果

在线预览地址：[http://www.jq22.com/jquery-info21839][http_www.jq22.com_jquery-info21839] 效果

小鱼儿/ 2021年12月18日 19:34/ 0 赞/ 368 阅读

相关 wpf 模拟抖音很火的罗盘时钟，附源码，下载就能跑

wpf 模拟抖音很火的罗盘时钟，附源码　　前端时间突然发现，抖音火了个壁纸，就是黑底蕾丝~~~ 错错错，黑底白字的罗盘时钟！　　作为程序员的我，也觉得很新颖，所以想空了

小咪咪/ 2021年12月13日 13:15/ 1 赞/ 734 阅读

相关自定义 View 之抖音时钟罗盘仪效果

> 博主声明： > > 转载请在开头附加本文链接及作者信息，并标记为转载。本文由博主 [威威喵][Link 1] 原创，请多支持与指教。 > > [本文首发于此][Link

绝地灬酷狼/ 2021年11月02日 02:38/ 0 赞/ 516 阅读

相关用JavaScript写抖音很火的罗盘时钟，附源码

原生js制作在抖音上很火的罗盘布局时钟代码。带日期、月份、星期、时分秒圆盘时钟。效果图： ![watermark_type_ZmFuZ3poZW5naG

绝地灬酷狼/ 2021年07月24日 13:45/ 0 赞/ 1138 阅读