JavaScript实现钟表案例

2025-05-28 14:45:59

本文实例为大家分享了JavaScript实现钟表效果的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
.clock {
    width: 600px;
    height: 600px;
    margin: 100px auto;
    background: url(/image/shizhong.jpg) 600px/600px;
    position: relative;
}
.clock .h {
    width: 100%;
    height: 100%;
    background: url(/image/时针.jpg) no-repeat center center;
    background-size: 35px;
    z-index: 1;
    position: absolute;
    left: -3px;
    top: -60px;
}
 
.clock .m {
    
    width: 100%;
    height: 100%;
    background: url(/image/分针.jpg) no-repeat center center;
    background-size: 35px;
    z-index: 2;
    position: absolute;
    left: -3px;
    top: -95px;
}
 
.clock .s {
    width: 100%;
    height: 100%;
    background: url(/image/秒针.jpg) no-repeat center center;
    background-size: 25px;
    z-index: 3;
    position: absolute;
    left: -3px;
    top: -95px;
}
    </style>
</head>
 
<body>
    <div class="clock">
        <div class="h" id="hour"></div>
        <div class="m" id="min"></div>
        <div class="s" id="second"></div>
    </div>
</body>
<script>
    var h = document.querySelector(".h")
    var m = document.querySelector(".m")
    var s = document.querySelector(".s") 
    var s = m = h = ms = 0;
 
    setInterval(function () {
        var date = new Date()
        ms = date.getMilliseconds()/* 现在的毫秒 */
        s = date.getSeconds() + ms / 1000;
        m = date.getMinutes() + s / 60;
        h = date.getHours() % 12 + m / 60;
        
        /*秒针一圈360度 一共60秒 每秒6度 */
        second.style.transform = "rotate(" + s * 6 + "deg)"
        second.style.transformOrigin = '  center 67% '
        /*分针一圈360度 一圈走60次 每分钟6度  */
        min.style.transform = "rotate(" + m * 6 + "deg)"
        min.style.transformOrigin = '  center 67% '
/*时针一圈360度 12小时制 一共走12次  d 每小时30度  */
        hour.style.transform = "rotate(" + h * 30 + "deg)"
        hour.style.transformOrigin = '  center 60% '
    },30)
</script>
 
</html>

效果：

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

JavaScript实现简单钟表时钟

本文实例为大家分享了JavaScript实现简单钟表时钟的具体代码,供大家参考,具体内容如下效果图: 主要思想: 1.先画一个圆表盘. 2.再用js循环画刻度(每一个刻度都是li标签). 3.再画时分秒指针. 4.再用JS让指针动起来. 代码中有详细的注释可以直接看代码. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta h
利用css+原生js制作简单的钟表

利用css+原生js制作简单的钟表.效果如下所示实现该效果,分三大块:html.javascript.css html部分 html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期以及时间,至于钟表上的刻度.数字等元素,因为量比较多,采用jvascript生成 <!doctype html> <html> <head> <meta charset="UTF-8"> <link rel='stylesheet'
JS+CSS3实现的简易钟表效果示例

本文实例讲述了JS+CSS3实现的简易钟表效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>www.jb51.net js+css3简易钟表</title> <style type="text/css"> *{ margin: 0; padding: 0; } #wrap{
原生JS实现实时钟表

分享一个用原生JS实现的实时钟表特效,效果如下(PS:实际指针是按360度走的,截图时只截了一部分) 上面的效果一共需要4张图片,分别是表盘.时针.分针.秒针,根据需要可以自己做图片,实现的代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>原生JS实现实时钟表</title> <style
原生JS实现的简单小钟表功能示例

本文实例讲述了原生JS实现的简单小钟表功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 完整代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>www.jb51.net 钟表</title> <style type="text/css"> body { background-color:#00A2D
js实现特别简单的钟表效果

本文实例为大家分享了js实现钟表效果的具体代码,供大家参考,具体内容如下 <div class="clock"> <div class="circle"></div> <div class="hour"></div> <div class="minutes"></div> <div class="seconds">
详解JavaScript的Date对象（制作简易钟表）

JS提供了Date类型来处理时间和日期.Date类型内置一系列获取和设置日期时间信息的方法.下面我们简单的概述一下这个Date类型. 大概看了一下Date类型的方法,下面给出: 上面的方法自己尝试即可,我只简单的演示一下JS正确输出的格式: var today=new Date();//创建一个时间日期对象 document.write("<h4>下面的是世界标准的时间输出:</h4>"); document.write(today+"
javascript绘制简单钟表效果

本文给大家分享一个canvas的时钟绘制,供大家参考,具体内容如下复制可直接使用 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> h1 { text-align: center; } div { width: 400px; height: 400px; margin: 10px auto; pad
JavaScript实现钟表案例

本文实例为大家分享了JavaScript实现钟表效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta
javascript中异常处理案例(推荐)

如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript"> // cache 缓存 // try-catch-finall
JavaScript fetch接口案例解析

在 AJAX 时代,进行 API 等网络请求都是通过 XMLHttpRequest 或者封装后的框架进行网络请求. 现在产生的 fetch 框架简直就是为了提供更加强大.高效的网络请求而生,虽然在目前会有一点浏览器兼容的问题,但是当我们进行 Hybrid App 开发的时候,如我之前介绍的 Ionic 和 React Native,都可以使用 fetch 进行完美的网络请求. 如果看网上的fetch教程,会首先对比XMLHttpRequest和fetch的优劣,然后引出一堆看了很快会忘记的内容(
JavaScript数组合并案例讲解

方法一: var a = [1,2,3]; var b=[4,5] a = a.concat(b); console.log(a); //此处输出为 [1, 2, 3 ,4 ,5] 方法二: // ES5 的写法 var arr1 = [0, 1, 2]; var arr2 = [3, 4, 5]; Array.prototype.push.apply(arr1, arr2); console.log(arr1)//[0,1,2,3,4,5] 方法三: // ES6 的写法 var arr1 =
JavaScript CollectGarbage函数案例详解

首先看一个内存释放的实例: <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> CollectGarbage,是IE的一个特有属性,用
JavaScript DOMContentLoaded事件案例详解

DOMContentLoaded 事件字面上看,它会在dom加载完成后触发. 与window.onload事件非常相似,但有一定区别: DOMContentLoaded 事件是在文档完全加载和解析之后触发: window.onload 事件不但文档完全加载和解析完毕,相关资源都要加载完毕,比如图片和CSS文件等: 下一个问题是什么时候dom加载完毕,这得从浏览器渲染说起,浏览器显示网页的过程可以做如下描述: 1. 请求得到html文档,根据文档请求更多的img,css及其它资源文件: 2.
JavaScript实现验证码案例

本文实例为大家分享了JavaScript实现验证码效果的具体代码,供大家参考,具体内容如下今天的案例,效果如下: 这个案例的实现其实没有很多难点,让我们一起来看看吧~ html和css的实现,在这里就不做解释啦,可以比对下面的代码自己实现一下,注意一下细节就好了接着咱们来看看js的实现: 我们需要做到的有两点: 1.实现验证码的随机产生,使其在页面刷新和点击更换时能够生成 2.实现输入字符串和验证码的比较第一点呢,我们需要用到for循环和Math.round(Math.random()*n
JavaScript实现购物车案例

本文实例为大家分享了JavaScript实现购物车功能的具体代码,供大家参考,具体内容如下 HTML结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <
BootStrap的JS插件之轮播效果案例详解

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 案例下面展示的就是此插件和相关组件制作的轮播案例. <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">  <ol class
javascript面向对象快速入门实例

本文深入浅出的讲述了javascript面向对象快速入门实例.分享给大家供大家参考.具体如下: javascript面向对象入门案例: 复制代码代码如下: <script language="javascript" type="text/javascript"> function Cat(){//js中对象的定义与函数一样,不同点在于怎么样调用. } var cat1 = new Cat();//创建类实例 //js中类属性可以动态添加,并不需要写在原

JavaScript实现钟表案例

相关推荐

随机推荐