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. emacs config on win10 for rust 1

    native win32 (setq package-archives '(("gnu" . "http://mirrors.ustc.edu.cn/elpa/gnu/& ...

  2. Echarts 环形图 每项之间有间隙

    option = { tooltip: { trigger: 'item' }, legend: { top: '5%', left: 'center', textStyle:{ color:'#ff ...

  3. oracle收缩表和表空间

    oracle shrink space收缩表 segment shrink分为两个阶段: 1).数据重组(compact):通过一系列insert.delete操作,将数据尽量排列在段的前面.在这个过 ...

  4. [转载]Net分布式系统之四：RabbitMQ消息队列应用

    消息通信组件Net分布式系统的核心中间件之一,应用与系统高并发,各个组件之间解耦的依赖的场景.本框架采用消息队列中间件主要应用于两方面:一是解决部分高并发的业务处理:二是通过消息队列传输系统日志.目前 ...

  5. CVE-2018-8174漏洞复现（IE浏览器远程代码执行漏洞）

    漏洞介绍:CVE-2018-8174这个漏洞是针对IE浏览器的一个远程代码执行漏洞,是Windows VBScript Engine 代码执行漏洞,由于VBScript脚本执行引擎(vbscript. ...

  6. git基础代码获取

    1.新建文件夹 2.使用命令git init 初始化 3.见你与远程厂库的连接,git remote add origin 远程仓库地址 4.将远程仓库代码拉去到本地,git fetch origin ...

  7. 升级grafana

    We recommend everyone to upgrade Grafana often to stay up to date with the latest fixes and enhancem ...

  8. gcc_to_use

    gcc 目录 gcc 概要 基本指令及功能(以gcc为例) gcc -gdb gcc -cmake 概要 GCC:GNU Compiler Collection(GUN 编译器集合),是GNU项目中符 ...

  9. locust 检查点、集合点、参数化设置。

    1.参数化 方式1:循环取数据,数据可以重复使用. 所有并发虚拟用户共享同一份测试数据,各虚拟用户在数据列表中循环取值. 例如,模拟10个用户并发请求网页,总共有4个URL地址,每个虚拟用户都会依次循 ...

  10. Vmware-workstation - Centos8.0扩容磁盘空间 / 目录

    1. 软件版本 vmware workstation  15 pro 虚拟机: centos8.0 2.将虚拟机关机选择扩容到多大 3. 进入操作系统,执行lsblk查看sda盘的情况.下图所示,需要 ...