（30个原生js挑战）原生js实现钟表

紧接着昨天的实例，第二个是原生js实现钟表特效。
首先介绍下大致思路，首先要用css把时针分针和秒针画出来。然后根据钟表中，角度和时间的算法关系。

设置角度。

最后使用定时器，每秒运行一次。

需要注意的是，我的算法和之前的算法不一样，这个可以根据自己的想法实现，实现的效果是不一样的。

首先知道钟表是360°，然后根据一个小时30°，来算出各个针的角度。

https://github.com/CookaCooki... 附上gayhub地址

<script>const secondHand = document.querySelector('.second-hand');const minsHand = document.querySelector('.min-hand');const hourHand = document.querySelector('.hour-hand');function setDate() {const now = new Date();const seconds = now.getSeconds();const secondsDegrees = ((seconds / 60) * 360) + 90;secondHand.style.transform = `rotate(${secondsDegrees}deg)`;const mins = now.getMinutes();const minsDegrees = ((mins / 60) * 360) + ((seconds / 60) * 6) + 90;minsHand.style.transform = `rotate(${minsDegrees}deg)`;const hour = now.getHours();const hourDegrees = ((hour / 12) * 360) + ((mins / 60) * 30) + 90;hourHand.style.transform = `rotate(${hourDegrees}deg)`;}setInterval(setDate, 1000);setDate();</script>

最后符上知乎地址 https://zhuanlan.zhihu.com/p/...

（30个原生js挑战）原生js实现钟表相关推荐

iOS下JS与原生OC互相调用
iOS开发免不了要与UIWebView打交道,然后就要涉及到JS与原生OC交互,今天总结一下JS与原生OC交互的两种方式. JS调用原生OC篇方式一第一种方式是用JS发起一个假的URL请求,然后利 ...
linux脚本石英钟,原生JS实现的简单小钟表功能示例
本文实例讲述了原生JS实现的简单小钟表功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 完整代码: www.jb51.net 钟表 body { background-color:#00A2 ...
在js对象上绑定js数组原生方法
在js对象上绑定js数组原生方法在js对象上绑定数组方法会给当前对象添加一个lenght:0属性例: var o = {}; [].pop.call(o) console.log(o)//返回结果 ...
android 原生调用js，js调用原生
原生调用js方法,带参数 activityBaseWebAddWebView.loadUrl("javascript:changeColor('" + viewColor + &q ...
vue js 和原生app调用回调方法问题
vue js 和原生app调用回调方法问题 import Vue from 'vue' export default { name: 'list', components: { }, data: () ...
iOS下JS和原生交互，函数互调
现在越来越多的APP都是H5和原生混合开发,这样确实方便快捷,但是H5的部分总避免不了很多与原生的交互,原生调JS函数还比较简单,原生的API函数stringByEvaluatingJavaScrip ...
Android JS调原生有盟分享打开微信分享原程序崩溃问题报android.view.ViewRootImpl$CalledFromWrongThreadException:
报的问题:android.view.ViewRootImpl$CalledFromWrongThreadException: Only the original thread that created ...
移动端（ios and android）长按识别二维码（含js与原生互调）
这篇文章就整理下移动端长按识别二维码的实现吧!实现方式可以分为三种一.长按原生控件,直接获取控件中的图片数据(src或background) 二.长按原生控件,截图识别三.长按web中的图片,ap ...
通过video.js或原生事件统计实际观看视频时长，支持多视频时长统计
前言:1.根据评论提问,优化了视频统计逻辑,增加了网络卡顿时暂停计时,重新播放后重新计时的功能.根据以下下载地址可以下载完整代码示例, 更新于:2022年8月26号,2.新增通过原生事件的写法统计观看 ...
Js简朴原生实现弹框
Js简朴原生实现弹框 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...

（30个原生js挑战）原生js实现钟表

（30个原生js挑战）原生js实现钟表相关推荐

最新文章

热门文章