JS实现网页时钟特效
本文实例为大家分享了JS实现网页时钟特效的具体代码，供大家参考，具体内容如下
主要逻辑 根据JS 的Date属性 求得当前的 时 分 秒 之后,按照 360/(时|分|秒) 来对三个指针元素进行旋转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box {
width: 600px;
height: 600px;
/*border: 1px solid #000;*/
background: url("img/bg.png") no-repeat;
background-size: cover;
margin: 30px auto;
position: relative;
overflow: hidden;
}
#h{
width:100%;
height:100%;
background: url("img/h.png") no-repeat;
background-size: cover;
position: absolute;
}
#m{
width:100%;
height:100%;
background: url("img/m.png") no-repeat;
background-size: cover;
position: absolute;
}
#s{
width:100%;
height:100%;
background: url("img/s.png") no-repeat;
background-size: cover;
position: absolute;
}
</style>
</head>
<body>
<div id="box">
<div id="h"></div>
<div id="m"></div>
<div id="s"></div>
</div>
<script>
window.onload = function(){
// 1:找到三个元素标签
var h = document.getElementById("h"); //时
var m = document.getElementById("m"); //分
var s = document.getElementById("s"); //秒
setInterval(function(){
var date = new Date();
var HH = (date.getHours()%12);
var MM = date.getMinutes();
var SS = date.getSeconds();
h.style.transform = "rotate("+(HH*30)+"deg)";
m.style.transform = "rotate("+(MM*6)+"deg)";
s.style.transform = "rotate("+(SS*6)+"deg)";
},1000)
}
</script>
</body>
</html>
更多JavaScript时钟特效点击查看：JavaScript时钟特效专题
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JavaScript实现简单的时钟实例代码
复制代码 代码如下: <html> <head> <title>JS实现简单的时钟</title><script> function displayTime() { document.getElementById("time").innerHTML = new Date().toTimeString(); } setInterval(displayTime,1000); // 每隔1秒钟调用dis
-
js实现中文实时时钟
本文实例为大家分享了js实现中文实时时钟的具体代码,供大家参考,具体内容如下 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> var chr=['零','一','二','三','
-
js实现小时钟效果
本文实例为大家分享了js实现小时钟效果的具体代码,供大家参考,具体内容如下 今天给大家分享一下制作小时钟 先给大家把代码分享出来 首先 JavaScript 代码 <script> function setTime(){ var now = new Date(); var year = now.getFullYear(); //获取现在的年份. var mouth = now.getMonth() + 1; //获取本年的月份,默认的是 0-11:所以进行加 1 操作: var date =
-
五步轻松实现JavaScript HTML时钟效果
学了一段时间的HTML.CSS和JS后,给大家做一款漂亮的不像实力派的HTML时钟,先看图: 涉及到的知识点有: CSS3动画.DOM操作.定时器.圆点坐标的计算(好多人是不是已经还给自己的老师了~) 接下来,我们用5步来制作它 step1.准备HTML 首先,我们需要准备HTML结构,背景.表盘.指针(时针.分针.秒针).数字. <div id="clock"> <div class="bg"> <div class="p
-
js实现图片实时时钟
本文实例为大家分享了js实现图片实时时钟的具体代码,供大家参考,具体内容如下 描述: 将下图作为时间的背景,实现随时时钟的效果. 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div div { float: left; width
-
使用JS实现动态时钟
本文实例为大家分享了JS实现动态时钟的具体代码,供大家参考,具体内容如下 利用setTime()实现动态的时钟效果 代码如下 <html> <head> <meta charset="utf-8"> <title>正在运行的时钟</title> <style type="text/css"> /*设置样式:无边框的文本框*/ input, #clock { width: 390; font-si
-
html5 canvas js(数字时钟)实例代码
复制代码 代码如下: <!doctype html><html> <head> <title>canvas dClock</title> </head> <body> <canvas id = "clock" width = "500px" height = "200px"> 您的浏览
-
JavaScript canvas动画实现时钟效果
本文实例为大家分享了canvas动画实现时钟效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta
-
js实现动态时钟
本文实例为大家分享了js实现动态时钟的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title>时钟</title> </head> <script type="text/javascript"> function todou(n){ if(n<10){ return '0'+n; } else { return ''+n; } } window
-
js实现一个简单的数字时钟效果
效果图: 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>一个简单的数字时钟</title> <script type="text/javascript" charset="utf-8