纯js+html+css实现模拟时钟
前几天没事写的个模拟时钟，代码仅供小白参考，大神请自动绕过。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模拟时钟</title>
<style>
body {
margin: 0;
padding: 0;
} #blockDial {
width: 200px;
height: 200px;
border: 2px solid black;
border-radius: 50%;
position: relative;
background-color: coral;
} .heart {
width: 10px;
height: 10px;
background-color: black;
margin: 95px auto;
border-radius: 50%;
} .blockwise {
width: 2px;
height: 80px;
background-color: black;
position: absolute;
left: 99px;
top: 20px;
z-index: 10;
}
.secondHand{
width: 2px;
height: 50px;
background-color: black;
position: absolute;
left: 99px;
top: 50px;
z-index: 10;
}
.minuteHand{
width: 2px;
height: 65px;
background-color: black;
position: absolute;
left: 99px;
top: 35px;
z-index: 10;
}
#currentTime{
width: 120px;
height: 30px;
border: 1px solid black;
margin: 10px 40px;
text-align: center;
line-height: 30px;
}
.num{
font-size: 24px;
color: aqua;
position: absolute;
}
.num3{
top:42%;
left: 90%;
}
.num6{
top:86%;
left: 46%;
}
.num9{
top:42%;
left: 0;
}
.num12{
top:0;
left: 44%;
}
</style>
</head>
<body>
<div id="blockDial">
<div class="heart"></div>
<div class="blockwise"></div>
<div class="secondHand"></div>
<div class="minuteHand"></div>
<div class="num num3">3</div>
<div class="num num6">6</div>
<div class="num num9">9</div>
<div class="num num12">12</div>
</div>
<div id="currentTime"></div>
<script src="main.js"></script>
</body>
</html>
html
(function () {
var blockwise = document.querySelector("#blockDial .blockwise");
var secondHand = document.querySelector("#blockDial .secondHand");
var minuteHand = document.querySelector("#blockDial .minuteHand");
var currentTime = document.querySelector("#currentTime");
function formate(num) {
return num>=10? num:"0"+num;
}
setInterval(function () {
var time = new Date();
currentTime.innerHTML = formate(time.getHours()) + ":" +
formate(time.getMinutes()) + ":" + formate(time.getSeconds());
var angleSeconds = time.getSeconds() * 6;
rotateDiv(secondHand, angleSeconds);
var angleHours = time.getHours() * 30;
rotateDiv(blockwise, angleHours);
var angleMinute = time.getMinutes() * 6;
rotateDiv(minuteHand, angleMinute);
}, 1000);
function rotateDiv(target, angle) {
target.style.transform = "rotate(" + angle + "deg) ";
target.style.transformOrigin = "100% 100%";
}
document.body.addEventListener("click", function (event) {
console.log(event.pageX, event.pageY);
});
})();
js
吐槽：这代码水准已经是我那时候的最高水平了，╮(╯▽╰)╭
纯js+html+css实现模拟时钟的更多相关文章
- 【CSS3】纯CSS代码实现模拟时钟，+js对时功能。
使用CSS3纯代码来实现模拟时钟,及指针动画功能. 在这里主要使用到css3一些基本元素: border-radius:圆角边框,画圆形:表盘 Transform:变换,旋转,扭曲:刻度盘,指针形状 ...
- 纯js和纯css+html制作的手风琴的效果
一:纯css+html的手风琴效果 这种用css写的手风琴比较简单,主要是应用到css中的,transition属性. 代码如下: <!DOCTYPE HTML> <html> ...
- css模拟时钟
css模拟时钟 思路: 画时钟数字(x,y)坐标 x = x0 + r*cos(deg) y = y0 + r*sin(deg) 知识点: 创建元素: createElement 添加元素: appe ...
- 纯js自动批量引入js、css插件，支持自定义参数
//autoload.js ;! function(e) { var autoload = e.autoload || {}; e.autoload = autoload; e.autoload = ...
- js,jquery,css,html5特效
包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...
- 纯js实现瀑布流布局及ajax动态新增数据
本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax ...
- 一个模拟时钟的时间选择器 ClockPicker
最近开发的一个模拟时钟的时间选择器 ClockPicker,用于 Bootstrap,或者单独作为一个 jQuery 插件. 源代码托管在 GitHub 上: ClockPicker 最近项目中需要用 ...
- JS、CSS以及img对DOMContentLoaded事件的影响
最近在做性能有关的数据上报,发现了两个非常有意思的东西:Chrome开发者工具的Timeline分析面板,以及DOMContentLoaded事件.一个是强大的令人发指的性能分析工具,一个是重要的性能 ...
- 纯JS实现KeyboardNav(学习笔记)二
纯JS实现KeyboardNav(学习笔记)二 这篇博客只是自己的学习笔记,供日后复习所用,没有经过精心排版,也没有按逻辑编写 这篇主要是添加css,优化js编写逻辑和代码排版 GitHub项目源码 ...
随机推荐
- Dubbo,ZooKeeper,Redis,FastDFS,ActiveMQ,Keepalived,Nginx,Hudson
获取[下载地址] QQ: 313596790 [免费支持更新] 三大数据库 mysql oracle sqlsever 更专业.更强悍.适合不同用户群体 [新录针对本系统的视频教程,手 ...
- go语言之并发编程一
Go语言最大的优势就在于并发编程.Go语言的关键字go就是开启并发编程也就是goroutine的唯一途径.一条go语句以为着一个函数或方法的并发执行.Go语句是由go关键字和表达式组成.比如下面的这种 ...
- Java mail 发送邮件 主题（标题）乱码
最近开发遇到Javamail 发送邮件标题乱码问题,腾讯.网易邮箱不会乱码,阿里邮箱 标题则会乱码.解决办法: String subject = MimeUtility.encodeWord(ma ...
- Android动画效果animation
1.Tween 根据指定动画开始和结束时的对象属性(位置.Alpha值(透明度).大小.角度等)以及动画播放的时间长度生成动画: 2.Frame 指定每一帧所播放的图片和时间长度. 建立动画的方法 ...
- ADT和Android SDK的安装
本文主要涉及Android开发环境搭建时的Eclipse.ADT及Android SDK的安装方法,还有遇到的两个问题及其解决办法.其中,ADT的安装介绍了在线和离线安装两种方式. 1.安装ecli ...
- linux shell 字符串操作（长度，查找，替换）
感谢原创,文章很有帮助. 转自:http://www.cnblogs.com/chengmo/archive/2010/10/02/1841355.html 一.判断读取字符串值 表达式 含义 ${v ...
- iOS swift 常量 && 宏定义
全局常量 在C和Objective-C语言源文件中定义的全局常量会自动地被Swift编译引进并做为Swift的全局常量. 预处理指令 Swift编译器不包含预处理器.取而代之的是,它充分利用了编译时属 ...
- [原创]java WEB学习笔记05：Servlet中的ServletConfig对象
本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...
- P3338 [ZJOI2014]力(FFT)
题目 P3338 [ZJOI2014]力 做法 普通卷积形式为:\(c_k=\sum\limits_{i=1}^ka_ib_{k-i}\) 其实一般我们都是用\(i=0\)开始的,但这题比较特殊,忽略 ...
- 【转载】Dom4j的使用(全而好的文章)
Dom4j的使用(全而好的文章) Dom4j 使用简介 作者:冰云 icecloud(AT)sina.com 时间:2003.12.15 版权声明: 本文由冰云完成,首发于CSDN,未经许可,不得 ...