纯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项目源码 ...
随机推荐
- 为system对象添加扩展方法
////扩展方法类:必须为非嵌套,非泛型的静态类 public static class DatetimeEx { //通过this声明扩展的类,这里给DateTime类扩展一个Show方法,只有一个 ...
- Windows平台下搭建Git服务器的图文教程(转发)
Git没有客户端服务器端的概念,但是要共享Git仓库,就需要用到SSH协议(FTP , HTTPS , SFTP等协议也能实现Git共享,此文档不讨论),但是SSH有客户端服务器端,所以在window ...
- 很详细、很移动的Linux makefile 教程
近期在学习Linux下的C编程,买了一本叫<Linux环境下的C编程指南>读到makefile就越看越迷糊,可能是我的理解能不行. 于是google到了以下这篇文章.通俗易懂.然后把它贴出 ...
- Redis持久化——AOF（二）
核心知识点: 1.AOF:以独立日志的方式记录写命令,重启时再执行命令.与RDB不同的是解决数据持久化的实时性,可以记录所有写操作. 2.AOF工作流程:写入命令.文件同步.文件重写.文件加载. 3. ...
- MySQL——存储过程
核心知识点: 1.什么存储过程?它都有哪些优点? 2.存储过程的语法和参数? 3.存储过程有哪些操作? 4.存储过程常用的控制语句? 一.存储过程概论 SQL语句需要先编译然后执行,而存储过程是一组为 ...
- LeetCode：存在重复元素【217】
LeetCode:存在重复元素[217] 题目描述 给定一个整数数组,判断是否存在重复元素. 如果任何值在数组中出现至少两次,函数返回 true.如果数组中每个元素都不相同,则返回 false. 示例 ...
- 剑指offer——圆圈中最后剩下的数字
1.如果通过环形列表去模拟圆圈的话,最后时间复杂度为O(mn),而且还需要一个辅助链表来模拟圆圈,空间复杂度为O(n). 2.通过找出递推公式的方法,求得递推公式为 时间复杂度为O(n),空间复杂度为 ...
- HDU 1533 Going home
Going Home Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total ...
- 【LeetCode】合并两个有序链表
将两个有序链表合并为一个新的有序链表并返回.新链表是通过拼接给定的两个链表的所有节点组成的. 示例: 输入:1->2->4, 1->3->4 输出:1->1->2- ...
- 剑指offer之 二维数组的查找
package Problem3; public class Find { /* * 题目描述:二维数组中的查找 * 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下的顺序排 ...