圆形数字时钟同时显示数字时钟、日期和星期特效

前几天看到动画效果，于是今天想写个时钟效果分享。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>日期时钟特效</title><style type="text/css">* {padding: 0;margin: 0;}#date {width: 450px;height: 300px;border-radius: 10px;margin: 100px auto;position: relative;}#nowDate {width: 450px;height: 60px;line-height: 60px;text-align: center;color: brown;font-size: 26px;}#clock {width: 250px;height: 250px;background: url('images/clock.jpg') no-repeat;background-size: cover;position: relative;margin: 2px auto;}#hour,#minute,#second {position: absolute;width: 10px;height: 250px;left: 50%;top: 0;margin-left: -4px;}#hour {background: url('images/hour.png') no-repeat center center;background-size: 12px;}#minute {background: url('images/minute.png') no-repeat center center;background-size: 10.5px;}#second {background: url('images/second.png') no-repeat center center;background-size: 11px;}</style></head><body><div id="date"><p id="nowDate"></p><div id="clock"><div id="hour"></div><div id="minute"></div><div id="second"></div></div></div><script type="text/javascript">// 1.获取标签var nowDate = document.getElementById('nowDate');var day = document.getElementById('day');// 用定时器 更新时间的变化setInterval(nowNumTime, 10);function nowNumTime() {var now = new Date();var hour = now.getHours(); //0 ~ 23.   //19var minute = now.getMinutes();var second = now.getSeconds();var year = now.getFullYear();var month = now.getMonth() + 1;var d = now.getDate();var week = now.getDay();//console.log(week); //索引var weeks = ['星期天', '星期一', '星期二', '星期叁', '星期肆', '星期伍', '星期六'];// 18 > 12  ? 18-12  : 8var temp = '' + (hour > 12 ? hour - 12 : hour);if (hour === 0) {temp = '12';}temp = temp + (minute < 10 ? ':0' : ":") + minute;temp = temp + (second < 10 ? ':0' : ":") + second;temp = temp + (hour >= 12 ? ' P.M.' : " A.M.");temp = `${year}年${month}月${d}日  ${temp} ${weeks[week]}`;nowDate.innerHTML = temp;}// 1.获取标签var hour = document.getElementById('hour');var minute = document.getElementById('minute');var second = document.getElementById('second');// 2.开启定时器 获取当前时间setInterval(function() {// 2.1 获取当前的时间戳var now = new Date();// 2.2 获取小时 分钟 秒var s = now.getSeconds();var m = now.getMinutes() + s / 60;var h = now.getHours() % 12 + m / 60;// 2.3 旋转second.style.transform = `rotate(${s * 6}deg)`;minute.style.transform = `rotate(${m * 6}deg)`;hour.style.transform = `rotate(${h * 30}deg)`;}, 10);</script></body>
</html>

js基于css3制作的圆形虚线时钟特效，一款简单的网页时钟，实时动态获取本地时间，同时还显示数字时钟、日期和星期。

圆形数字时钟同时显示数字时钟、日期和星期特效相关推荐

html的canvas显示数字,HTML5效果：Canvas 实现圆形进度条并显示数字百分比
实现效果 1.首先创建html代码 2.创建canvas环境 var canvas = document.getElementById('canvas'), //获取canvas元素 context ...
html数字显示百分比,扣丁学堂html5 教程之Canvas实现圆形进度条并显示数字百分比效果...
今天扣丁学堂html5培训小编和大家分享一下Canvas实现圆形进度条并显示数字百分比效果示例,对html5感兴趣的小伙伴或者是参加学习的小伙伴可以了解一下. Canvas实现圆形进度条并显示数字百分 ...
HT1621 控制LCD屏幕显示数字，连续显示数字
今天刚刚写的一个程序,使用HT1621驱动LCD显示,通过控制WR端口到低电平,使得LCD模块得到要显示什么的数据,为何只显示了第一次的数据,让他接着清屏或者数字全部显示,或者显示下一个数据时他就不会 ...
关于0.96 OLED显示屏显示数字
在使用0.96 OLED显示屏的时候,我发现显示数字是一个大问题,特别是关于显示浮点型数据,自己折腾了一番,目前虽然浮点型显示上还有不小的问题,但可以满足最低级别的需求. 首先声明,本文中使用的程序是 ...
树莓派驱动数码管c 语言,0023 树莓派电脑控制单位数码管显示数字
原标题:0023 树莓派电脑控制单位数码管显示数字这节课,来学习如何控制单位数码管来显示数字. 电路原理要使用一个电子元器件,首先是要掌握它的电路原理图,来看一下单位数码管的电路原理图: 我们选择 ...
在网页中显示数字时钟
<html> <head> <title>实时走动的数字时钟</title> </head> <script> function ...
Android Studio利用时钟控件AnalogClock显示模拟时钟以及TextClock显示数字时钟
前言利用时钟控件AnalogClock快速制作一个模拟时钟.利用TextClock显示数字时钟. 一.AnalogClock是什么? AnalogClock继承的是View,可重写OnDraw方法. ...
Windows UI改造-任务栏全透明、桌面数字时钟、息屏显示数字时钟
任务栏完全透明 windows系统自带的设置不支持完全透明任务栏,这里需要借助软件TranslucentTB进行设置. TranslucentTB可以在微软商店里找到,也可以用我上传的https:// ...
Python制作一个简易时钟（可显示日期，星期）
源代码: # coding=utf-8 import turtle from datetime import *# 由于表盘刻度不连续,需频繁抬起画笔,放下画笔 def skip(step):turt ...

圆形数字时钟同时显示数字时钟、日期和星期特效

前几天看到动画效果，于是今天想写个时钟效果分享。

js基于css3制作的圆形虚线时钟特效，一款简单的网页时钟，实时动态获取本地时间，同时还显示数字时钟、日期和星期。

圆形数字时钟同时显示数字时钟、日期和星期特效相关推荐

最新文章

热门文章