HTML+CSS+JS制作一个灰白色简约时钟

1. 效果图：

2. 特点：这次借鉴了网络上的代码，利用JS动态创建元素，减少html语句的数量，也便于与vue、react等语言进行结合。

3. 代码实现：

<!DOCTYPE html>

<html lang="ch">

  <head>

    <meta charset="UTF-8">

    <meta name ="viewport" content ="width = device-width" />

    <meta name="author" content="戈小戈">

    <title>灰白色简约时钟</title>

  </head>

  <style lang="css">

    .clock {

        width: 250px;

        height: 250px;

        background: #eee;

        background: linear-gradient(to right, #ddd, #fff);

        border-radius: 10%;

        margin:0 auto;

        position: relative;

        border: 10px solid #555;

        box-sizing: content-box;

        box-shadow: -2px 1px 8px rgba(0, 0, 0, 0.4);

      }

      .clock_number span{

        display: inline-block;

        width: 30px;

        height: 30px;

        line-height: 30px;

        text-align: center;

        color: #333;

        border-radius: 50%;

        font-size: 13px;

        position: absolute;

      }

      .clock_number :nth-child(3),.clock_number :nth-child(6),.clock_number :nth-child(9),.clock_number :nth-child(12) {background: #555;color: #fff;}

      .clock_number :nth-child(1){right: 72px;margin-right: -15px;top: 26px;}

      .clock_number :nth-child(2){right: 38px;margin-right: -15px;top: 63px;}

      .clock_number :nth-child(3){top: 125px;margin-top: -15px;right: 10px;}

      .clock_number :nth-child(4){right: 38px;margin-right: -15px;bottom: 63px;}

      .clock_number :nth-child(5){right: 72px;margin-right: -15px;bottom: 26px;}

      .clock_number :nth-child(6){left: 125px;margin-left: -15px;bottom: 10px;}

      .clock_number :nth-child(7){left: 72px;margin-left: -15px;bottom: 26px;}

      .clock_number :nth-child(8){left: 38px;margin-left: -15px;bottom: 63px;}

      .clock_number :nth-child(9){top: 125px;margin-top: -15px;left: 10px;}

      .clock_number :nth-child(10){left: 38px;margin-left: -15px;top: 63px;}

      .clock_number :nth-child(11){left: 72px;margin-left: -15px;top: 26px;}

      .clock_number :nth-child(12){left: 125px;margin-left: -15px;top: 10px;}

      .clock_number_point span{

        width: 1px;

        height: 6px;

        background: #999;

        display: inline-block;

        position: absolute;

        z-index: 100;

        box-sizing: border-box;

      }

      .clock_number_point :nth-child(1){top: 18px;right: 60px;transform: rotate(30deg);width: 3px;height: 10px;}

      .clock_number_point :nth-child(2){top: 60px;right: 19.5px;transform: rotate(60deg);width: 3px;height: 10px;}

      .clock_number_point :nth-child(3){top: 180px;right: 20px;transform: rotate(120deg);width: 3px;height: 10px;}

      .clock_number_point :nth-child(4){bottom: 18px;right: 61px;transform: rotate(150deg);width: 3px;height: 10px;}

      .clock_number_point :nth-child(5){bottom: 18px;left: 61px;transform: rotate(210deg);width: 3px;height: 10px;}

      .clock_number_point :nth-child(6){top: 180px;left: 20px;transform: rotate(240deg);width: 3px;height: 10px;}

      .clock_number_point :nth-child(7){top: 60px;left: 19.5px;transform: rotate(300deg);width: 3px;height: 10px;}

      .clock_number_point :nth-child(8){top: 18px;left: 60px;transform: rotate(330deg);width: 3px;height: 10px;}

      .bg{

        width: 250px;

        height: 250px;

        border-radius: 50%;

        position: absolute;

        box-shadow: inset -4px 14px 25px rgba(255, 255, 255, 1);

      }

      .clock-logo{

          position: absolute;

          left: 125px;

          top: 125px;

          width: 80px;

          border-radius: 50%;

          height: 80px;

          padding: 10px;

          margin-left: -40px;

          margin-top: -40px;

          text-align: center;

          background: #ccc;

          color: #16a085;

          font-size: 12px;

          text-align: center;

          box-sizing: border-box;

          z-index: 0;

      }

      .clock-center{

        width: 20px;

        height: 20px;

        margin: -10px 0 0 -10px;

        border-radius: 50%;

        background-color: #d6e2ea;

        background-image: linear-gradient(90deg, #d6e2ea 0%, #e6e7f8 100%);

        position: absolute;

        top: 125px;

        left: 125px;

        z-index: 999;

        border: 1px solid #16a085;

        box-sizing: border-box;

      }

      .s,.m,.h{

          position: absolute;

          box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);

          border-radius: 50%;

          transform-origin: center bottom;

      }

      .s{

          height: 100px;

          width: 2px;

          background: red;

          left: 125px;

          margin-left: -1px;

          top: 25px;

          z-index: 110;

      }

      .m{

          height: 80px;

          width: 5px;

          background: #348781;

          left: 125px;

          margin-left: -2.5px;

          top: 45px;

          z-index: 100;

      }

      .h{

          height: 70px;

          width: 8px;

          background: #3D3C3A;

          left: 125px;

          margin-left: -4px;

          top: 55px;

          z-index: 90;

          border-left: 1px solid rgba(255, 255, 255, 0.1);

          box-sizing: border-box;

      }

      .clock-logo span{

        display: block;

          font-size: 7px;

          color: #333;

          margin-top: 26px;

      }

  </style>

 <body>

    <div class="clock">

    <div class="clock_number"></div>

    <div class='clock_number_point'></div>

    <div class="bg"></div>

    <div class="clock-logo"></div>

    <div class="m"></div><div class="h"></div><div class="s"></div>

    <div class="clock-center"></div>

   </div>

   <script>

      // autor:戈小戈

      for (var i = 1; i <= 12; i++)

      {

        var div=document.createElement('span');

        if(i<=8){document.getElementsByClassName("clock_number_point")[0].appendChild(div); }//插入数字方块子元素

        div.innerHTML=''+i;

        document.getElementsByClassName("clock_number")[0].appendChild(div);

      }

      function setTime() {

          const sHand = document.querySelector('.s');

          const mHand = document.querySelector('.m');

          const hHand = document.querySelector('.h');

          const d = new Date();

          const s = d.getSeconds();//秒

          const m = d.getMinutes();//分

          const h = d.getHours();//时

          const sDeg = (( s / 60 ) * 360 );

          const mDeg = (( m / 60 ) * 360 ) + (( s / 60 ) * 6 );

          const hDeg = (( h / 12 ) * 360 ) + (( m / 60 ) * 30 );

          sHand.style.transform = 'rotate('+sDeg+'deg )';

          mHand.style.transform = 'rotate('+mDeg+'deg )';

          hHand.style.transform = 'rotate('+hDeg+'deg )';

      }

      setInterval( setTime, 1000 );

</script>

 </body>

</html>

HTML+CSS+JS制作一个灰白色简约时钟的更多相关文章

  1. JS制作一个创意数字时钟

    通过js代码制作一个创意数字时钟 通过JS代码实现创意数字时钟效果如下:由数字化的卡通形象图片取代常规的数字显示当前实时北京时间.具体效果示例: 核心重点: (1)Date方法的初步了解 (2)构建模 ...

  2. 通过JS制作一个简易数码时钟

    设计思路: 数码时钟即通过图片数字来显示当前时间,需要显示的图片的URL根据时间变化而变化. a.获取当前时间Date()并将当前时间信息转换为一个6位的字符串; b.根据时间字符串每个位置对应的数字 ...

  3. HTML/CSS+JS制作一个高考倒计时页面

    2020-07-09更新 修复倒计时归零后出现负数的bug 自动切换至下一年日期 ##效果展示 前言 在B站上找视频学习的,勉强搞出来了,写下此篇文章作为笔记,也希望有更多感兴趣的人能够有所收获. ( ...

  4. 百度前端技术学院2018笔记 之 利用 CSS animation 制作一个炫酷的 Slider

    前言 题目地址 利用 CSS animation 制作一个炫酷的 Slider 思路整理 首先页面包含三种东西 一个是type为radio的input其实就是单选框 二是每个单选框对应的label 三 ...

  5. #3使用html+css+js制作网页 番外篇 使用python flask 框架 (II)

    #3使用html+css+js制作网页 番外篇 使用python flask 框架 II第二部 0. 本系列教程 1. 登录功能准备 a.python中操控mysql b. 安装数据库 c.安装mys ...

  6. #3使用html+css+js制作网页 番外篇 使用python flask 框架 (I)

    #3使用html+css+js制作网页 番外篇 使用python flask 框架(I 第一部) 0. 本系列教程 1. 准备 a.python b. flask c. flask 环境安装 d. f ...

  7. #3使用html+css+js制作网页 番外篇 制作接收php

    使用html+css+js制作网页 番外篇 制作接收php 本系列链接 基础 php语法 例子 本系列链接 #1使用html+css+js制作网站教程 准备 #2使用html+css+js制作网站教程 ...

  8. #3使用html+css+js制作网页 制作登录网页

    #3使用html+css+js制作网页 制作登录网页 本系列链接 2制作登录网页 2.1 准备 2.1.1 创建文件夹 2.1.2 创建主文件 2.2 html部分 2.2.1 网站信息 2.2.2 ...

  9. #1使用html+css+js制作网站教程 准备

    #1使用html+css+js制作网站教程 准备 本系列链接 0 准备 0.1 IDE编辑软件 0.2 浏览器 0.3 基础概念 0.3.1 html 0.3.2 css 0.3.3 js 0.4 文 ...

  10. 用JS制作一个信息管理平台完整版

      前  言 JRedu 在之前的文章中,介绍了如何用JS制作一个实用的信息管理平台. 但是那样的平台功能过于简陋了,我们今天来继续完善一下. 首先我们回顾一下之前的内容.   1.JSON的基础知识 ...

随机推荐

  1. Java--Comparable接口实现，控制数组和列表的排序

    实现Comparable 接口,可以获得的排序方法有 列表排序 Collections.sort(); 数组排序 Arrays.sort(); sort()方法中的参数是可以获取排序索引的对象或者按照 ...

  2. c++练习271题：水仙花数

    *271题 原题传送门:http://oj.tfls.net/p/271 题解: #include<bits/stdc++.h>using namespace std; int cf(in ...

  3. 十二、21.提交本地代码到Git仓库并推送到码云

    查看分支 运行git add . 把所有修改过后文件添加到暂存区 git commit 把当前所有的代码提交到rights分支 加-m加一个消息 到此所有的功能模块都已经提交到了rights这个分支里 ...

  4. Go语言中超过1000个线程panic

    1.问题描述 2.实验 3.原理 4.解释 Close太多,Close在Windows上阻塞型的可能会新创建线程,而Linux上是非阻塞型不会新创建线程.

  5. webpack5的基本用法

    webpack的基本使用 webpack 本身功能有限: 开发模式: 仅能编译JS中的ES Module 语法 生产模式: 能编译ES Module 语法, 还能压缩JS代码 添加实例文件 npm i ...

  6. C++中map用法详解(转)

    Map是c++的一个标准容器,她提供了很好一对一的关系,在一些程序中建立一个map可以起到事半功倍的效果,总结了一些map基本简单实用的操作!1. map最基本的构造函数:   map<stri ...

  7. GP232RL国产USB串口如何兼容FT232RL开发资料

    GP232RL是最新加入 ftdi 系列 usb 接口集成电路设备的设备. 232r是一个 usb 到串行 uart 接口,带有可选的时钟发生器输出,以及新的 ftdichip-idTM 安全加密器特 ...

  8. 年羹尧奏摺专集（下）.PDF

    书本详情 年羹尧奏摺专集(下)作者: 国立故宫博物院出版社: 国立故宫博物院出版年: 1971页数: 1180装帧: 精装ISBN: 9788017310909

  9. 快速傅里叶变换详解(FFT)

    自己也看了几篇博客,但是对我这种不擅长推导小白来说还是有一点困难,所以自己也写一篇博客也为像我一样的小白提供思路.以下内容包含各种LaTeX渲染,如果哪里有错误欢迎大家评论留言,或者添加本人qq:14 ...

  10. docker 搭建 nginxconfig.io 文档

    docker镜像仓库 https://hub.docker.com/r/devopstestlab/nginxconfig.io 获取镜像 docekr pull devopstestlab/ngin ...