JS实现简单时钟效果
老师上课需要我们做一个时钟的小作业 ,我把它放在上面记录一下啦
表盘和时针我都是用的背景图的形式,然后绝对定位,通过调整left和top确定时针、分针、秒针的位置,transform-origin设置它们的旋转中心
具体效果:
HTML代码:
<div class="box" id="box">
<span></span>
<span></span>
<span></span>
</div>
css代码:
div.box{
width: 620px;
height: 620px;
background: url("images/time.jpg") no-repeat;
background-size: 100%;
margin: 20px auto;
position: relative;
}
div.box span{
position: absolute;
}
div.box span:nth-child(3){
width: 58px;
height: 208px;
background: url("images/time_1.png") no-repeat -8px -44px;
left: calc(50% - 29px);
top: 130px;
transform-origin: center 174px;
}
div.box span:nth-child(2){
width: 32px;
height: 228px;
background: url("images/time_1.png") no-repeat -72px -10px;
left: calc(50% - 16px);
top: 97px;
transform-origin: center 205px;
}
div.box span:nth-child(1){
width: 14px;
height: 238px;
background: url("images/time_1.png") no-repeat -131px -0px;
left: calc(50% - 8px);
top: 106px;
transform-origin: center 198px;
}
JS代码(设置一个定时器,每1秒执行一次,获取当前的时、分、秒,控制时针、分针、秒针的度数):
var spans=document.querySelectorAll('div.box span');
cur();
setInterval(cur, 1000);
function cur() {
var now = new Date();
var h = now.getHours();
var m = now.getMinutes();
var s = now.getSeconds();
spans[2].style.transform="rotate("+h*30+"deg)";
spans[1].style.transform="rotate("+m*6+"deg)";
spans[0].style.transform="rotate("+s*6+"deg)";
}
JS实现简单时钟效果的更多相关文章
- 原生JS封装简单动画效果
原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...
- 史上最简单的js+css3实现时钟效果
今天我看到百度搜索的时间那个效果不错,于是就产生了模仿一下的效果,不过为了节省时间,就随便布了下局,废话不多说,先看看效果吧,顺便把百度的效果也拿过来. 对比样子差了好多啊,但是基本功能都是实现了的, ...
- 原生js实现简单打字机效果
快过年了,公司基本没活,闲着也是闲着,就写了一个 打字机效果玩玩,感觉挺有意思的. 具体代码 请参见我的github,请戳这里 预览效果,请戳这里
- iOS实现简单时钟效果
实现的效果图如下 : 实现代码如下: #import "ViewController.h" //将旋转角度转换为弧度制#define angleToRadion(angle) (( ...
- 如何通过JS实现简单抖动效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- JS实现简单斗地主效果
let play = document.querySelectorAll(".play"); let dizhupai = document.getElementById(&quo ...
- js 分享一个 时钟效果
<style> *{ margin: 0; padding: 0; } #outLine{ ...
- JS — 实现简单的数字时钟
js实现简单的数字时钟 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- 圆盘时钟效果 原生JS
圆盘时钟 旋转时钟 数字时钟 写在前面 仿荣耀手机时钟,设计的同款时钟效果 实现效果 实现原理 数字时钟 利用Date内置对象获取当下的时间,通过处理呈现在页面上 这一步获取时间是非常简单的,通过Da ...
随机推荐
- c# wpf ComboBox 动态下拉框 及 动态默认值设定
1.下拉框声明 <ComboBox x:Name="DirComboBox" Width="150" Height="18" Marg ...
- Contiki Process概述
本文涉及到的Protothread机制知识,在http://www.cnblogs.com/songdechiu/p/5793717.html 一.进程类型 进程类型主要有协同式(cooperativ ...
- 应用程序无法启动(0*c000007b)
2个插件就解决 一个是DX缺失工具检查那个 一个是运行库缺失检查
- 0-mybatis目录
mybatis 第一天: 对原生态jdbc程序(单独使用jdbc开发)问题总结 框架原理 入门程序 用户的增.删.改.查 开发dao两种方法: 原始dao开发方法(程序需要编写dao接口和dao实现类 ...
- Jmeter-线程日志查看
jstack可以定位到线程堆栈,根据堆栈信息我们可以定位到具体代码,所以它在JVM性能调优中使用得非常多. 1. 压测时,使用top命令查看哪个java进行占用了较多的CPU资源: 上图中可以看出p ...
- hdu-5784 How Many Triangles(计算几何+极角排序)
题目链接: How Many Triangles Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/65536 K (Jav ...
- java面试题07
1.重载和重写的区别? 重载(Overload):(1)方法重载是让类以统一的方式处理不同类型数据的一种手段.多个同名函数同时存在,具有不同的参数个数/类型.重载Overloading是一个类中多态性 ...
- element el-input 自动获取焦点和IE下光标位置解决方法
在实际开发中我们经常会碰到这样的场景,就是有input的地方都喜欢切换过去input自动获取焦点. 如果这个问题是在input中,很容易就实现了,但是element里面的el-input看源码,其实不 ...
- bzoj1072Perm——状压DP
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1072 数字串最多只有10位,所以考虑用状压: 压缩的状态是哪些数字被用过,这样可以从一种状态 ...
- css3 实现loading效果
1 圆点渐入渐出 要点: 缩放和透明度的变化,循环变化 <div class="demo1"></div> .demo1{ width: 40px; hei ...