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时钟特效专题

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js实现一个简单的数字时钟效果

    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

  • 五步轻松实现JavaScript HTML时钟效果

    五步轻松实现JavaScript HTML时钟效果

    学了一段时间的HTML.CSS和JS后,给大家做一款漂亮的不像实力派的HTML时钟,先看图: 涉及到的知识点有: CSS3动画.DOM操作.定时器.圆点坐标的计算(好多人是不是已经还给自己的老师了~)  接下来,我们用5步来制作它 step1.准备HTML 首先,我们需要准备HTML结构,背景.表盘.指针(时针.分针.秒针).数字. <div id="clock"> <div class="bg"> <div class="p

  • js实现中文实时时钟

    js实现中文实时时钟

    本文实例为大家分享了js实现中文实时时钟的具体代码,供大家参考,具体内容如下 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> var chr=['零','一','二','三','

  • 使用JS实现动态时钟

    本文实例为大家分享了JS实现动态时钟的具体代码,供大家参考,具体内容如下 利用setTime()实现动态的时钟效果 代码如下 <html> <head> <meta charset="utf-8"> <title>正在运行的时钟</title> <style type="text/css"> /*设置样式:无边框的文本框*/ input, #clock { width: 390; font-si

  • js实现小时钟效果

    本文实例为大家分享了js实现小时钟效果的具体代码,供大家参考,具体内容如下 今天给大家分享一下制作小时钟 先给大家把代码分享出来 首先 JavaScript 代码 <script> function setTime(){ var now = new Date(); var year = now.getFullYear(); //获取现在的年份. var mouth = now.getMonth() + 1; //获取本年的月份,默认的是 0-11:所以进行加 1 操作: var date =

  • 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

  • JavaScript实现简单的时钟实例代码

    JavaScript实现简单的时钟实例代码

    复制代码 代码如下: <html> <head> <title>JS实现简单的时钟</title><script> function displayTime() {        document.getElementById("time").innerHTML = new Date().toTimeString();    } setInterval(displayTime,1000);      // 每隔1秒钟调用dis

  • JavaScript canvas动画实现时钟效果

    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

  • html5 canvas js(数字时钟)实例代码

    html5 canvas js(数字时钟)实例代码

    复制代码 代码如下: <!doctype html><html>    <head>        <title>canvas dClock</title>    </head>    <body>        <canvas id = "clock" width = "500px" height = "200px">            您的浏览

  • js实现图片实时时钟

    js实现图片实时时钟

    本文实例为大家分享了js实现图片实时时钟的具体代码,供大家参考,具体内容如下 描述: 将下图作为时间的背景,实现随时时钟的效果. 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div div { float: left; width

随机推荐