HTML+CSS+JS制作一个灰白色简约时钟
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制作一个灰白色简约时钟的更多相关文章
- JS制作一个创意数字时钟
通过js代码制作一个创意数字时钟 通过JS代码实现创意数字时钟效果如下:由数字化的卡通形象图片取代常规的数字显示当前实时北京时间.具体效果示例: 核心重点: (1)Date方法的初步了解 (2)构建模 ...
- 通过JS制作一个简易数码时钟
设计思路: 数码时钟即通过图片数字来显示当前时间,需要显示的图片的URL根据时间变化而变化. a.获取当前时间Date()并将当前时间信息转换为一个6位的字符串; b.根据时间字符串每个位置对应的数字 ...
- HTML/CSS+JS制作一个高考倒计时页面
2020-07-09更新 修复倒计时归零后出现负数的bug 自动切换至下一年日期 ##效果展示 前言 在B站上找视频学习的,勉强搞出来了,写下此篇文章作为笔记,也希望有更多感兴趣的人能够有所收获. ( ...
- 百度前端技术学院2018笔记 之 利用 CSS animation 制作一个炫酷的 Slider
前言 题目地址 利用 CSS animation 制作一个炫酷的 Slider 思路整理 首先页面包含三种东西 一个是type为radio的input其实就是单选框 二是每个单选框对应的label 三 ...
- #3使用html+css+js制作网页 番外篇 使用python flask 框架 (II)
#3使用html+css+js制作网页 番外篇 使用python flask 框架 II第二部 0. 本系列教程 1. 登录功能准备 a.python中操控mysql b. 安装数据库 c.安装mys ...
- #3使用html+css+js制作网页 番外篇 使用python flask 框架 (I)
#3使用html+css+js制作网页 番外篇 使用python flask 框架(I 第一部) 0. 本系列教程 1. 准备 a.python b. flask c. flask 环境安装 d. f ...
- #3使用html+css+js制作网页 番外篇 制作接收php
使用html+css+js制作网页 番外篇 制作接收php 本系列链接 基础 php语法 例子 本系列链接 #1使用html+css+js制作网站教程 准备 #2使用html+css+js制作网站教程 ...
- #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 ...
- #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 文 ...
- 用JS制作一个信息管理平台完整版
前 言 JRedu 在之前的文章中,介绍了如何用JS制作一个实用的信息管理平台. 但是那样的平台功能过于简陋了,我们今天来继续完善一下. 首先我们回顾一下之前的内容. 1.JSON的基础知识 ...
随机推荐
- 狂神--Vue
概述 前端三要素 HTML(结构) :超文本标记语言(Hyper Text Markup Language) ,决定网页的结构和内容 CSS(表现) :层叠样式表(Cascading Style sh ...
- 浅谈hive
hive支持sql标准的数据仓库,可以将sql语句转化成mr程序执行.基础分析一般用hive来做,比较复杂的用mr来做数据仓库和数据库的区别 数据仓库:历史数据,面向分析,保证数据的完整性可以允 ...
- mysql修改密码遇到的问题
在docker上安装了 mysql 容器,mysql镜像是8.0+版本 修改密码语句: 只针对本机生效 alter user "root"@'localhost' identifi ...
- 2022-05-24内部群每日三题-清辉PMP
1.一家公司具有一项变更控制委员会(CCB)政策,规定其每月举行一次会议来评估和审查变更请求.一个项目正在执行过程中,由于时间表和目标较为激进,需要更快的响应时间.项目经理应该怎么做? A.更新风险登 ...
- mac + win ，用python一行代码批量下载哔哩哔哩视频
首先,你的机器已经安装python,然后是安装you-get. 打开终端,输入 pip3 install you-get,回车,即开始安装,如下图所示. 编辑 安装成功后,比如要下载某个视屏,首 ...
- linux系统下命令行方式创建KVM虚拟机
一:安装虚拟机 1:设备重启进入BIOS打开SMMU,F10保存退出. 2:进入系统安装相关组件 virt-install qemu-kvm qemu-img virt-manager libvi ...
- 错误 : 资产文件“\obj\project.assets.json”没有“.NETCoreApp,Version=v2.0”的目标。确保已运行还原，且“netcoreapp2.0”已包含在项目的 TargetFrameworks 中。
原因是项目升级了目标框架netcoreapp2.1但是发布配置文件上的目标框架配置项没有更改导致发布错误 将此处修改成需要的版本即可.例如:<TargetFramework>netcore ...
- 用keil调试程序的时候，一点击调试就弹出STARTUP.A51那个窗口，解决办法
前天晚上我折腾了很久 网上查了各种方法.最终自己发现,调试之前一定要在keil编译一遍,再debug这样就不会弹窗了. 另外,keil在调试过程中,修改代码是不会有任何作用的,你看我故意写错,继续单步 ...
- PHP_冒泡排序代码解析
<?php /** * 基本思想:将数组中的每一个下标元素遍历出来 *依次将这些下标的值对后面一个下标的值对比 *如果大于后面一位下标的值,将两者调换位置 */ $arr = array (55 ...
- C# Thread.Join()作用
Thread.Join()在MSDN中的解释:Blocks the calling thread until a thread terminates 阻塞calling thread,直到当前join ...