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

1. 效果图:


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


3. 代码实现:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>黑灰色简约时钟</title>
<style lang="css">
.clock {
position: absolute;
margin: auto;
width: 400px;
height: 400px;
padding: 0;
background-color: #262c33;
border: 18px solid #373f4a;
border-radius: 50%;
background-clip: border-box;
}
.point{
position: absolute;
width: 400px;
height: 400px;
top: 0;
}
.s,.m,.h{
position: absolute;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
border-radius: 10px;
left: 50%;
bottom: 50%;
transform-origin: center bottom;
} .s{
height: 180px;
width: 4px;
background: red;
margin-left: -1px;
z-index: 110;
} .m{
height: 140px;
width: 5px;
background: #26a79d;
margin-left: -2.5px;
z-index: 100;
} .h{
height: 100px;
width: 8px;
background: #d4d5d6;
margin-left: -4px;
z-index: 90;
border-left: 1px solid rgba(255, 255, 255, 0.1);
box-sizing: border-box;
}
.clock-center{
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border-radius: 50%;
background-color: #d4d5d6;
position: absolute;
top: 50%;
left: 50%;
z-index: 999;
}
.minute-marks {
display: inline-block;
padding: 0;
margin: 0;
list-style-type: none;
width: 0px;
height: 0px;
}
.minute-marks li {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
display: inline-block;
width: 200px;
height: 200px;
}
.minute-marks li:before,
.minute-marks li:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0px;
height: 0px;
display: inline-block;
border-color: #d4d5d6;
border-width: 4px;
border-style: solid;
border-radius: 4px;
background-clip: padding-box;
opacity: 1;
}
.minute-marks li:before {top: -380px;}
.minute-marks li:after {bottom: -380px;}
.minute-marks li.five:before,.minute-marks li.five:after {width: 0px;height: 20px;}
.minute-marks li.five:before {top: -360px;}
.minute-marks li.five:after {bottom: -360px;}
</style>
</head>
<body>
<div class='clock'>
<ul class='minute-marks'></ul>
<div class='point'>
<div class="m"></div><div class="h"></div><div class="s"></div>
<div class="clock-center"></div>
</div>
</div>
<script>
// autor:戈小戈
for (var i = 1; i <= 6; i++){
for(var m = 1;m<=5;m++){
var div=document.createElement('li');
if(m==1){div.className = 'five';}
div.style.transform = 'rotate('+(i*5-6+m)*6+'deg )';//设置每一分钟点所在位置
document.getElementsByClassName("minute-marks")[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. HTML/CSS+JS制作一个高考倒计时页面

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

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

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

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

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

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

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

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

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

  6. #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 ...

  7. #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 文 ...

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

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

  9. No.6 - 利用 CSS animation 制作一个炫酷的 Slider

    *{ margin:; padding:; } div{ margin: auto; width: 800px; height: 681px; position: relative; overflow ...

  10. 如何使用纯js实现一个带有灰色半透明背景的弹出框

    原文如何使用纯js实现一个带有灰色半透明背景的弹出框 // 加入透明背景 var body = document.body;var backgroundDiv = document.createEle ...

随机推荐

  1. JavaSE总结(1)

    Java发展历史.HelloWorld.常量.变量类型转换.运算符.方法(函数)1.jdk版本:    jdk1.2---J2EE/J2SE/J2ME    jdk1.5---JavaSE/JavaE ...

  2. SAP 后台任务定时job

    定时任务的事务码 sm36:创建定时任务 sm37:查看定时任务 JDBG:后台任务debug,在对应的sm37中对应的job页面 t-code输入 创建定时任务SM36 名称可以随便起 一般都是按自 ...

  3. mysql错误号码2003 can't connect to mysql server on 'localhost' (0)解决方案

    找到mysql安装目录下的Bin目录,在cmd中进入这个目录,运行net start mysql 却显示服务名无效 所以此时 首先在MYSQL的安装目录bin下,输入mysqld --install ...

  4. Oracle备份脚本(数据泵)-Windows平台

    将以下内容根据自己想要备份的库修改后保存为expdp.bat,加入到计划任务中 set NLS_LANG=AMERICAN_AMERICA.AL32UTF8set filename=%date:~0, ...

  5. vue学习 第二天 CSS基础

    CSS: 层叠样式表  ( Cascading Style Sheets ) 的简称 1.css简介 1)也是一种标记语言 2)主要用来设置html页面中,标签的样式. 3)css美化了html页面, ...

  6. GitLab-Runner安装及使用

    Git_Lab CI Setting 根据该教程本地下载并安装 gitlab-runner.exe 在GitLab远程仓库页面点击 setting-> CI/CD ->runner Exp ...

  7. react-router V6踩坑

    useRoutes() may be used only in the context of a <Router> component.需要将BrowserRouter放到外层,放到APP ...

  8. 最新2019Java调用百度智能云人脸识别流程

    首先先注册账户 https://console.bce.baidu.com/?fromai=1#/aip/overview 点击链接 有账户直接登录  如无 则注册 进入控制台后 点击人脸识别 随便选 ...

  9. Android 切换wifi小记

    我手机是Android 7.1的魅族.相关网络权限注册之后,还有一个特别的权限就是<uses-permission android:name="android.permission.A ...

  10. OS-lab1

    OS-lab1 boot boot文件夹中只有start.S文件,这个文件用于初始化内核.关掉中断,设置内核栈,并跳转到main函数. init init.c 执行初始化操作. main.c 主函数, ...