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 ...
随机推荐
- 在Linux下创建7种类型的文件
在测试的时候有时会需要每种类型的文件,在系统中进行搜索都会找到,当然最方便的还是手动创建它们进行测试使用. 普通文件: $ touch regular 目录: $ mkdir directory 符号 ...
- Sprin Boot2.0之整合Mybatis整合分页插件
pageHelper PageHelper 是一款好用的开源免费的 Mybatis 第三方物理分页插件 物理分页 支持常见的 12 种数据库.Oracle,MySql,MariaDB,SQLite,D ...
- Could not find JSON in http://updates.jenkins-ci.org/update-center.json?id=default&version=2.7.4
14-Sep-2016 21:43:58.241 INFO [Download metadata thread] hudson.model.AsyncPeriodicWork$1.run Finish ...
- HTML5 拖放:在相册中对照片进行排序
1. [代码]index.html <div class="albums"> <div class="album" id=&qu ...
- POJ 2409 Let it Bead:置换群 Polya定理
题目链接:http://poj.org/problem?id=2409 题意: 有一串n个珠子穿起来的项链,你有k种颜色来给每一个珠子染色. 问你染色后有多少种不同的项链. 注:“不同”的概念是指无论 ...
- Mybatis-Generator_学习_01_mybatis-generator笔记
一.generatorConfig.xml <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE ...
- ACM学习历程——UVA442 Matrix Chain Multiplication(栈)
Description Matrix Chain Multiplication Matrix Chain Multiplication Suppose you have to evaluate ...
- visualVM远程监控JVM
对于完全没用使用过visualVM的初学者 环境:Windows PC上使用visualVM监控远端JVM @@@@jstatd方式连接@@@@ 1.Windows安装jdk,$JAVA_HOME/b ...
- jupyter-notebook重设项目工作路径
一. . Anaconda Prompt 命令(方法没生效) 1 选择一个用于存放config文件的文件夹(先创建) 2 在cmd中进入该文件夹的路径 3在cmd中 输入命令 jupyter not ...
- OGG 进程清除、重建
背景描述:有时候OGG进程同步出现问题,症状某些进程起不来,而且问题一时半会儿解决不了.最简单的办法是:用数据泵初始化数据,OGG进程重建. 1.查看源端.目的端的进程状态. (作者OGG进程是正常的 ...