用JavaScript写抖音很火的罗盘时钟,附源码
JavaScript源码 时钟
2023-09-11 14:21:45 时间
原生js制作在抖音上很火的罗盘布局时钟代码。带日期、月份、星期、时分秒圆盘时钟。
效果图:
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);
}
相关文章
- JavaScript 各种遍历方式详解,有你不知道的黑科技
- JavaScript经典代码【二】【javascript判断用户点了鼠标左键还是右键】
- javascript 基础知识学习1
- [Javascript] Natively Format JavaScript Dates and Times
- [Javascript] Understanding the difference between .prototype and .__proto__ in JavaScript
- [Javascript] Avoiding Mutations in JavaScript with Immutable Data Structures
- [Javascript] Conditionally spread entries to a JavaScript object
- [Javascript] JavaScript赋值时的传值与传址
- [Javascript] Decorators in JavaScript
- [Javascript] What is JavaScript Function Currying?
- JavaScript ECMAScript版本介绍
- JavaScript 本地对象、内置对象、宿主对象
- loadrunner12.55:脚本语言选择,C语言 or JavaScript
- ajax 跨域 headers JavaScript ajax 跨域请求 +设置headers 实践
- [Javascript] Natively Format JavaScript Dates and Times
- [Javascript] Understanding the difference between .prototype and .__proto__ in JavaScript
- [Javascript] Create Your First Iterator in JavaScript
- [Javascript] Convert a Callback-Based JavaScript Function to a Promise-Based One
- [Javascript] Use JavaScript's for-in Loop on Objects with Prototypes
- [Javascript] Delegate JavaScript (ES6) generator iteration control
- [Javascript] Compose multiple functions for new behavior in JavaScript
- [Javascript] How to use JavaScript's String.replace
- [Javascript] Modifying an Immutable.js Map()
- [Javascript] An Introduction to JSPM (JavaScript Package Manager)
- 【华为OD机试 2023】完美走位(C++ Java JavaScript Python)
- JavaScript:快速入门篇
- JavaScript监听属性改变
- JavaScript--学习
- Javascript 香蕉分段吃(数组分隔)
- 学习笔记:Javascript 变量 包装对象