编程 Javascript

JS实现网页时钟特效

Posted in Javascript onMarch 25, 2020

本文实例为大家分享了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时钟特效专题

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

JS实现网页时钟特效

- Author -

Byte_Dance

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

FireFox JavaScript全局Event对象

Jun 14 Javascript

jQuery setTimeout()函数使用方法

Apr 07 Javascript

jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法

May 13 Javascript

JS日期和时间选择控件升级版(自写)

Aug 02 Javascript

jquery选择器之内容过滤选择器详解

Jan 27 Javascript

jquery实现标题字体变换的滑动门菜单效果

Sep 07 Javascript

基于javascript实现图片懒加载

Jan 05 Javascript

jquery实现跳到底部，回到顶部效果的简单实例(类似锚)

Jul 10 Javascript

JavaScript实现的鼠标响应颜色渐变效果完整实例

Feb 18 Javascript

vue.js 初体验之Chrome 插件开发实录

May 13 Javascript

js实现前端图片上传即时预览功能

Aug 02 Javascript

Makefile/cmake/node-gyp中区分判断不同平台的方法

Dec 18 Javascript

js实现小时钟效果

Mar 25 #Javascript

vue页面更新patch的实现示例

Mar 25 #Javascript

微信小程序scroll-view隐藏滚动条的方法详解

Mar 25 #Javascript

微信小程序点击item使之滚动到屏幕中间位置

Mar 25 #Javascript

微信小程序scroll-view点击项自动居中效果的实现

Mar 25 #Javascript

微信小程序 flexbox layout快速实现基本布局的解决方案

Mar 24 #Javascript

安装多版本Vue-CLI的实现方法

Mar 24 #Javascript