老师上课需要我们做一个时钟的小作业 ,我把它放在上面记录一下啦

表盘和时针我都是用的背景图的形式,然后绝对定位,通过调整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实现简单时钟效果的更多相关文章

  1. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  2. 史上最简单的js+css3实现时钟效果

    今天我看到百度搜索的时间那个效果不错,于是就产生了模仿一下的效果,不过为了节省时间,就随便布了下局,废话不多说,先看看效果吧,顺便把百度的效果也拿过来. 对比样子差了好多啊,但是基本功能都是实现了的, ...

  3. 原生js实现简单打字机效果

    快过年了,公司基本没活,闲着也是闲着,就写了一个 打字机效果玩玩,感觉挺有意思的. 具体代码 请参见我的github,请戳这里 预览效果,请戳这里

  4. iOS实现简单时钟效果

    实现的效果图如下 : 实现代码如下: #import "ViewController.h" //将旋转角度转换为弧度制#define angleToRadion(angle) (( ...

  5. 如何通过JS实现简单抖动效果

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

  6. JS实现简单斗地主效果

    let play = document.querySelectorAll(".play"); let dizhupai = document.getElementById(&quo ...

  7. js 分享一个 时钟效果

    <style>        *{            margin: 0;            padding: 0;        }        #outLine{       ...

  8. JS — 实现简单的数字时钟

    js实现简单的数字时钟 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  9. 圆盘时钟效果 原生JS

    圆盘时钟 旋转时钟 数字时钟 写在前面 仿荣耀手机时钟,设计的同款时钟效果 实现效果 实现原理 数字时钟 利用Date内置对象获取当下的时间,通过处理呈现在页面上 这一步获取时间是非常简单的,通过Da ...

随机推荐

  1. c# wpf ComboBox 动态下拉框 及 动态默认值设定

    1.下拉框声明 <ComboBox x:Name="DirComboBox" Width="150" Height="18" Marg ...

  2. Contiki Process概述

    本文涉及到的Protothread机制知识,在http://www.cnblogs.com/songdechiu/p/5793717.html 一.进程类型 进程类型主要有协同式(cooperativ ...

  3. 应用程序无法启动(0*c000007b)

    2个插件就解决  一个是DX缺失工具检查那个 一个是运行库缺失检查

  4. 0-mybatis目录

    mybatis 第一天: 对原生态jdbc程序(单独使用jdbc开发)问题总结 框架原理 入门程序 用户的增.删.改.查 开发dao两种方法: 原始dao开发方法(程序需要编写dao接口和dao实现类 ...

  5. Jmeter-线程日志查看

    jstack可以定位到线程堆栈,根据堆栈信息我们可以定位到具体代码,所以它在JVM性能调优中使用得非常多. 1.  压测时,使用top命令查看哪个java进行占用了较多的CPU资源: 上图中可以看出p ...

  6. hdu-5784 How Many Triangles(计算几何+极角排序)

    题目链接: How Many Triangles Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/65536 K (Jav ...

  7. java面试题07

    1.重载和重写的区别? 重载(Overload):(1)方法重载是让类以统一的方式处理不同类型数据的一种手段.多个同名函数同时存在,具有不同的参数个数/类型.重载Overloading是一个类中多态性 ...

  8. element el-input 自动获取焦点和IE下光标位置解决方法

    在实际开发中我们经常会碰到这样的场景,就是有input的地方都喜欢切换过去input自动获取焦点. 如果这个问题是在input中,很容易就实现了,但是element里面的el-input看源码,其实不 ...

  9. bzoj1072Perm——状压DP

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1072 数字串最多只有10位,所以考虑用状压: 压缩的状态是哪些数字被用过,这样可以从一种状态 ...

  10. css3 实现loading效果

    1 圆点渐入渐出 要点: 缩放和透明度的变化,循环变化 <div class="demo1"></div> .demo1{ width: 40px; hei ...