纯原生开发时钟效果,话不多说直接上代码。

HTML标签部分

<div class="cricles">
        <div class="pointls">
            <!-- 表盘内长刻度 -->
        </div>
        <div class="pointM">
            <!-- 表盘内短刻度 -->
        </div>
        <div class="poniters">
            <div class="point_ho">
                <!-- 时针 -->
            </div>
            <div class="point_min">
                <!-- 分针 -->
            </div>
            <div class="point_sec">
                <!-- 秒针 -->
            </div>
            <span></span>
        </div>
    </div>
css样式部分
 <style>
        .cricles {
            width: 300px;
            height: 300px;
            background-color: aqua;
            border-radius: 100%;
            border: 2px solid yellow;
            margin: 100px auto;
            position: relative;
        }
        
        .pointL {
            background-color: red;
            height: 40px;
            width: 5px;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
        }
        
        .pointS {
            background-color: black;
            height: 20px;
            width: 5px;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
        }
        
        .poniters {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
            height: 10px;
            width: 10px;
            /* yellow; */
        }
        
        .poniters div {
            left: 0;
            right: 0;
            bottom: 4px;
            margin: auto;
            position: absolute;
            background-color: tomato;
            height: 60px;
            transform-origin: center bottom;
            width: 4px;
        }
        
        span {
            width: 15px;
            height: 15px;
            display: block;
            position: absolute;
            left: -5px;
            right: 0;
            bottom: -5px;
            box-shadow: 0 0 20px black;
            top: 0;
            margin: auto;
            border-radius: 50%;
            background-color: blueviolet;
        }
    </style>
js部分
<script>
        //设置表盘大针
        setBigTime();
        setSmallTime();
        setTimePoint();
        setInterval(function() {
            setTimePoint();
        }, 1000);
        function setBigTime() {
            var olis = "";
            var pointList = document.querySelector(".pointls");
            for (var i = 0; i < 12; i++) {
                olis += `<div class="pointL"></div>`;
            }
            pointList.innerHTML = olis;
            var pointLs = document.querySelectorAll(".pointL");
            // for
            pointLs.forEach(function(v, k) {
                v.style.transform = ` rotate(${30*k}deg) translateY(130px)`;
            });
        }
        //设置表盘小针
        function setSmallTime() {
            var olis = "";
            var pointList = document.querySelector(".pointM");
            for (var i = 0; i < 60; i++) {
                olis += `<div class="pointS"></div>`;
            }
            pointList.innerHTML = olis;
            var pointLs = document.querySelectorAll(".pointS");
            // for
            pointLs.forEach(function(v, k) {
                if ((6 * k) % 30 === 0) {
                    v.style.display = "none";
                }
                v.style.transform = ` rotate(${6*k}deg) translateY(140px)`;
            });
        }
        function setTimePoint() {
            var d = new Date();
            var housePoint = document.querySelector(".point_ho");
            housePoint.style.height = "40px";
            housePoint.style.background = "blue";
            housePoint.style.transform = `rotate(${30*d.getHours()}deg)`;
            var minPoint = document.querySelector(".point_min");
            minPoint.style.height = "60px";
            minPoint.style.background = "black";
            minPoint.style.transform = `rotate(${6*d.getMinutes()}deg)`;
            var secPoint = document.querySelector(".point_sec");
            secPoint.style.height = "80px";
            secPoint.style.background = "red";
            secPoint.style.transform = `rotate(${6*d.getSeconds()}deg)`;
        }
    </script>

web实现时钟效果的更多相关文章

  1. Flash AS实现时钟效果(全脚本实现)

    最近工作中用到个Flash效果,好久没有写FlashAS脚本了,就想从以前写的代码中找一些实例.竟然看到硬盘中还留有若干年前的代码. 这个时钟效果是全部采用脚本实现,图形也是用脚本绘制的.写于2005 ...

  2. transform实现的时钟效果

    又来一个时钟效果了,这个的实现不需要canvas,都是div.ul.li画出的,好玩有真实. 哈哈~ 需要的js才能实现到走动这个效果,但js的内容不多,也不难. 主要是一个css里transform ...

  3. jQuery制作Web全屏效果

    需要的资源 1.jQuery版本库是必不可少的2.jQuery FullScreen plugin如果你下载不方便的话,你可以直接把下面的代码copy到你本地JQuery FullScreen plu ...

  4. 原生javascript实现网页显示日期时钟效果

    刚接触javascript中Date内置对象时,以为这些方法都太简单了,结果要自己实际操作写一个时钟效果还真一时把我难住了,主要有几点大家要注意的.先看实际效果 要实现这样的效果 某年某月某日星期几几 ...

  5. 史上最简单的js+css3实现时钟效果

    今天我看到百度搜索的时间那个效果不错,于是就产生了模仿一下的效果,不过为了节省时间,就随便布了下局,废话不多说,先看看效果吧,顺便把百度的效果也拿过来. 对比样子差了好多啊,但是基本功能都是实现了的, ...

  6. GDI绘制时钟效果,与系统时间保持同步,基于Winform

    2018年工作之余,想起来捡起GDI方面的技术,特意在RichCodeBox项目中做了两个示例程序,其中一个就是时钟效果,纯C#开发.这个CSharpQuartz是今天上午抽出一些时间,编写的,算是偷 ...

  7. 转 CSS3+js实现多彩炫酷旋转圆环时钟效果

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. canvas实现的时钟效果

    最近在网上看到了一个css3实现的可爱时钟,觉得很nice,然后就想着用canvas试试实现这个时钟效果. 首先,要实现时钟需要先计算时钟上的数字应该占整个圆的大小. 因为一个圆是360度,所以数字之 ...

  9. 基于canvas的原生JS时钟效果

    概述 运用html5新增画布canvas技术,绘制时钟效果,无需引用任何插件,纯js. 详细 代码下载:http://www.demodashi.com/demo/11935.html 给大家介绍一个 ...

随机推荐

  1. ssh原理及加密传输

    1.ssh??(保证过程中是加密的,即安全的)ssh 是 Secure Shell 的缩写,是一个建立在应用层上的安全远程管理协议.ssh 是目前较为可靠的传输协议,专为远程登录会话和其他网络服务提供 ...

  2. 《软件建模与分析》——UML基本概念

    UML-基本概念 UML本质上是一种语言,语言的学习离不开基本的单词(元素)和语法(视图.模型)的学习,今天我们就从它们开始. 元素 类图中的关系 控制权限 继承 实现 依赖:一个类A使用到了另一个类 ...

  3. 网络协议 & 协议体系结构模型

    基本知识概述 网络协议是什么? 为进行网络中的数据交换,而建立的规则(约定),就称为网络协议 网络协议的三个组成要素? 语法:数据与控制信息的结构或格式 语义:发出何种控制信息,完成何种动作,作出何种 ...

  4. CPU饥饿与线程饥饿

    线程饥饿: 进程无法得到资源,(cpu或者io资源或者别的什么资源),所以无法进行下去 比如说读者写者问题,如果读者优先,那么写者可能会饿死. 又比如操作系统概念的一道习题. 用broadcast可能 ...

  5. Windows 10 自带 free 屏幕截图/录像软件 Game Bar! 不仅仅是game-游戏呦! 高清晰,高保真,perfect!不仅仅是游戏呦!

    good news! good news! good news! 重要的事情说三遍! Windows 10 自带  屏幕截图/录像软件 Game Bar! 以后再也不用第三方的 盗版软件了! 对于Wi ...

  6. Roman Numerals All In One

    Roman Numerals All In One 罗马数字 refs https://www.mathsisfun.com/roman-numerals.html https://www.maths ...

  7. CSS will-change All In One

    CSS will-change All In One CSS animation effect live demo https://nextjs.org/conf/ https://nextjs.or ...

  8. git whoami

    git whoami $ git config --list $ git config --global --list # quit $ q $ git config user.name xgqfrm ...

  9. CSS Architecture & CSS Design Patterns

    CSS Architecture & CSS Design Patterns BEM Block, Element, Modifier https://en.bem.info/methodol ...

  10. post upload file & application/x-www-form-urlencoded & multipart/form-data

    post upload file application/x-www-form-urlencoded & multipart/form-data https://stackoverflow.c ...