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. 监控系统grafana常见问题合集

    监控系统搭建完毕后,使用中确实存在不少的习惯问题. 系统组成: 展示界面:Grafana 核心系统:Promethus snmp监控:SNMP Exporter ping监控:Blackbox Exp ...

  2. TP3.2 I('post.') 获取到的参数特殊字符被自动转义

    eg:原数据 :&这是一条测试数据 被转义后的数据:&nbmp;  这是一条测试数据 解决办法: $input = json_encode(I('post.'));$input = h ...

  3. v-if和v-show最重要一点

    vif是新建与销毁标签 show是显示与隐藏标签 如果涉及到权限操作的话 必须使用vif 因为vshow中把标签改成display:none的话可以手动改成显示

  4. React Tree树形结构封装工具类

    需要依赖 immutable,用于group by分组 buildTree 为入口方法,注意返回的是Immutable.List对象,使用需要调用.toJS()方法转为普通对象 其中 creatNod ...

  5. Unity Vuforia 动态替换识别图

    1.在Unity里 Vuforia 用来做识别信息的是 StreamingAssets 下 Vuforia文件夹内的 Dat和XML 文件. 2.想要替换识别图需要在Vuforia官网里替换识别图 ( ...

  6. vue指令入门

    1.  vue属性.事件.内容绑定 1 <div id="dv"> 2 <!-- v-cloak能够解决表达式闪烁问题 3 (当网速较慢时,会先出现{{msg}} ...

  7. 090_Java

    在JAVA程序中,性能问题的大部分原因并不在于JAVA语言,而是程序本身.养成良好的编码习惯非常重要,能够显著地提升程序性能. ● 1. 尽量在合适的场合使用单例 使用单例可以减轻加载的负担,缩短加载 ...

  8. kafka在阿里云上的配置

    只需要改server.properties listeners=PLAINTEXT://  内网的ip地址和9092端口advertised.listeners=PLAINTEXT://外网的ip的地 ...

  9. 集合（Collection）

    前几天做数据结构题碰到了集合,当时并没有学,只是通过做题对此稍微有了了解.今天正好学到了,来做一下学习记录. 一.集合总体框架 由上图可知,集合的实现方式有两大类: (1)线性接口:该集合的顶层接口是 ...

  10. QT--QMainWindow窗口的状态栏设置

    QMainWindow窗口状态栏 实时显示时间: 1.获取实时时间使用定时器QTimer, QTimer *timer = new QTimer(); connect(timer, &QTim ...