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

绝地灬酷狼 2021-07-24 13:45 1233阅读 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 条评论，1233人围观）

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

相关阅读

相关罗盘时钟代码

HTML <%@ page contentType="text/html;charset=UTF-8" language="java" %> <!DOCTYP

短命女/ 2023年10月05日 15:39/ 0 赞/ 42 阅读

相关抖音上很火的3D立体动态相册实现代码!

html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

布满荆棘的人生/ 2023年06月17日 13:55/ 0 赞/ 9 阅读

相关代码实现抖音时钟罗盘

HTML代码部分： <!DOCTYPE html> <html lang="en"> <head> <meta charset="

素颜马尾好姑娘i/ 2023年06月08日 06:56/ 0 赞/ 10 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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