linux脚本石英钟,原生JS实现的简单小钟表功能示例
本文实例讲述了原生JS实现的简单小钟表功能。分享给大家供大家参考,具体如下:
先来看看运行效果:
完整代码:
www.jb51.net 钟表
body {
background-color:#00A2D4;
}
.clock {
width: 200px;
height: 200px;
background: -webkit-radial-gradient(#3b3b3b, #000);
background: radial-gradient(#2E3F50, #0E1B29);
box-shadow: inset 0px 0px 30px #131313, 0px 2px 18px rgba(0,0,0,0.5);
border: 6px solid #172839;
border-radius: 106px;
margin: auto;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
.hour-hand {
width: 4px;
height: 55px;
background: #fff;
box-shadow: 0px 0px 7px #000;
position: absolute;
top: 45px;
left: 98px;
}
.minute-hand {
width: 4px;
height: 80px;
background: #fff;
box-shadow: 0px 0px 4px #000;
position: absolute;
top: 20px;
left: 98px;
}
.second-hand {
width: 2px;
height: 80px;
background: #bbb;
box-shadow: 0px 0px 7px #000;
position: absolute;
top: 20px;
left: 99px;
}
.pin {
width: 10px;
height: 10px;
background: #222;
border-radius: 10px;
margin: auto;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
.hour-hand,
.minute-hand,
.second-hand {
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.circle{
width:20px;
height:20px;
line-height:20px;
text-align:center;
color:#fff;
position: absolute;
}
window.οnlοad=function(){
setInterval(function(){
var dt = new Date();
var sec_deg = dt.getSeconds() * (360/60);
var min_deg = dt.getMinutes() * (360/60);
var hr_deg = dt.getHours() * (360/12) + dt.getMinutes() * (360/60/12);
document.querySelector(".clock .second-hand").style.cssText='-webkit-transform:rotate(' + sec_deg + 'deg)','-moz-transform:rotate(' + sec_deg + 'deg)', '-o-transform:rotate(' + sec_deg + 'deg)', '-ms-transform:rotate(' + sec_deg + 'deg)', 'transform:rotate(' + sec_deg + 'deg)';
document.querySelector('.clock .minute-hand').style.cssText='-webkit-transform:rotate(' + min_deg + 'deg)', '-moz-transform:rotate(' + min_deg + 'deg)', '-o-transform:rotate(' + min_deg + 'deg)', '-ms-transform:rotate(' + min_deg + 'deg)', 'transform:rotate(' + min_deg + 'deg)';
document.querySelector('.clock .hour-hand').style.cssText='-webkit-transform:rotate(' + hr_deg + 'deg)', '-moz-transform:rotate(' + hr_deg + 'deg)', '-o-transform:rotate(' + hr_deg + 'deg)', '-ms-transform:rotate(' + hr_deg + 'deg)', 'transform:rotate(' + hr_deg + 'deg)';
}, 1000);
var dx=90,
dy=90,
s=87,//半径
x=Math.sin(0),
y=Math.cos(0),
dig=2*Math.PI/12;
var circle=document.querySelectorAll(".circle");
for(var i=0;i<12;i++){
var x=Math.sin(i*dig);
var y=Math.cos(i*dig);
var topValue=Number(dy+y*s),
leftValue=Number(dx+x*s);
circle[i].style.top=topValue+"px";
circle[i].style.left=leftValue+"px";
}
}
感兴趣的朋友可使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试一下运行效果。
PS:这里再为大家推荐几款时间及日期相关工具供大家参考使用:
希望本文所述对大家JavaScript程序设计有所帮助。
linux脚本石英钟,原生JS实现的简单小钟表功能示例相关推荐
- html5画板功能,JS实现canvas简单小画板功能
本文实例为大家分享了JS实现canvas简单小画板的具体代码,供大家参考,具体内容如下 Html部分: Document CSS部分: *{ margin: 0; padding: 0; list-s ...
- 原生js完成一个简单的抽奖功能
文章目录 前言 实现过程 1.前期准备 2.CSS美化 3.使用 js 完成抽奖功能 3.1 随机数模块 3.2 随机奖品 3.3 开始抽奖 3.4 点击开始抽奖 完整代码 HTML部分 CSS部分 ...
- 原生JS实现一个简单的打字小游戏
原生JS实现一个简单的打字小游戏 利用javascript制作一个简单的打字小游戏 之前写了一个贪吃蛇小游戏好像反响不错 今天我来写一个比贪吃蛇更low更简单的打字小游戏 打字小游戏原理 接下来咋们直 ...
- html制作翻页效果代码,使用原生JS实现滚轮翻页效果的示例代码
一.滚轮事件 当用户通过鼠标滚轮与页面交互.在垂直方向上滚动页面时,就会触发mousewheel事件,这个事件就是实现全屏切换效果需要用到的.在IE6, IE7, IE8, Opera 10+, Sa ...
- 原生JS实现文件自定义位置盖章功能并导出PDF
原生JS实现文件自定义位置盖章功能并导出PDF 实现原理 在需要签章的文件上面创建一个div,可以通过移动这个div来确定签章位置,然后在通过获取这个位置把章子替换到这,并导出PDF,可以多次盖章! ...
- 原生JS实现的h5小游戏-植物大战僵尸
代码地址如下: http://www.demodashi.com/demo/12755.html 项目介绍 本项目是利用原生js实现的h5小游戏-植物大战僵尸,主要结合了一下自己对于h5小游戏的理解, ...
- php计算器按钮功能,PHP简单在线计算器功能示例
PHP简单在线计算器功能示例 PHP可以被嵌入于HTML语言,它相对于其他语言.编辑简单,实用性强,更适合初学者.下面是小编分享的PHP简单在线计算器功能示例,一起来看一下吧. 简单的计算器(www. ...
- 原生js实现一个简单的轮播图
想锻炼一下自己的原生js能力可以从写一个轮播图开始,轮播图的运用想必大家都知道吧,好了废话不多说,开始记笔记了,一些需要注意的点,我都在代码中标注了 首先是构造html: <div id=&qu ...
- 使用原生js实现按钮的全选功能,简单清晰
1.相信有很多朋友在学习前端原生JS的时候,都有遇到过实现全选按钮的需求吧.废话不多说直接上代码吧! <!DOCTYPE html> <html lang="en" ...
最新文章
- -16 | 12 等于多少
- AI芯片的未来之战:“霸主”英伟达真就无人能挡了吗?
- 摘要提取算法——本质上就是pagerank,选择rank最高的句子作为摘要,如果结合word2vec应该有非常好的效果...
- android ListView详解
- lda 可以处理中文_LDA数学八卦索引及全文文档
- 解决问题ImportError: HDFStore requires PyTables, quot;No module named 'tables'quot; problem importing
- 对民营医院的网络推广--迅脉互联
- npm运行报错:Error: ENOSPC: System limit for number of file watchers reached
- python进阶-面向对象编程四:包装授权和自定制列表某些方法
- activiti jbpm相关资源
- 西南交大计算机机试题,西南交大 土木茅以升班 计算机应用基础试题(2004年) B卷...
- java获取spring数据源_Spring动态注册多数据源的实现方法
- vb不能插入png图片_收藏备用!!VBA操作图片【插入导出删除】
- HDU2161 Primes
- 排序——冒泡排序算法
- Django之form组件加cookie,session
- 三种方法实现二分查找
- Vue-网页版音乐播放器实现(网易云音乐源)
- 关于高校通过ipv6免收费上网
- 树莓派 电脑 文件共享 搬移