css3获取当前时间并显示,CSS3实现时间表

最新推荐文章于 2024-04-03 04:53:26 发布
最新推荐文章于 2024-04-03 04:53:26 发布
阅读量1.2k 收藏
点赞数
文章标签： css3获取当前时间并显示

一直想学CSS3，今天别的论坛看到的例子，挺好，mark起来以后自己看。

title

*{margin:0;padding:0}

#box{

width:300px;

height:300px;

border:1px solid #000;

border-radius:50%;

position:absolute;

top:100px;left:300px;

box-shadow:1px 1px 5px #000;

cursor:pointer;

}

.hour{

width:14px;

height:80px;

background:#000;

position:absolute;

top:50%;left:50%;

margin:-80px 0 0 -7px;

transform-origin:center bottom;

}

.min{

width:14px;

height:100px;

background:#000;

position:absolute;

top:50%;left:50%;

margin:-100px 0px 0px -7px;

border-radius:50% 50% 0 0;

transform-origin:center bottom;

}

.sec{

width:4px;

height:120px;

background:red;

position:absolute;

top:50%;left:50%;

margin:-120px 0 0 -2px;

transform-origin:center bottom;

}

.cap{

width:20px;

height:20px;

background:#999;

border-radius:50%;

position:absolute;

top:50%;left:50%;

margin:-10px 0 0 -10px;

}

.scale{

width:4px;

height:10px;

background:#000;

position:absolute;

left:50%;

margin-left:-2px;

display:block;

-webkit-transform:rotate(45deg);

transform-origin:center 150px;

}

.bs{

width:6px;height:18px;

background:#000;

position:absolute;

left:50%;

margin-left:-3px;

display:block;

-webkit-transform:rotate(45deg);

transform-origin:center 150px;

}

.bs em{

width:50px;

text-align:center;

margin:17px 0;

position:absolute;

top:0px;left:50%;

margin-left:-25px;

font-style:normal

}

window.onload = function(){

var oBox = document.getElementById('box');

var oH = document.querySelector('.hour');

var oM = document.querySelector('.min');

var oS = document.querySelector('.sec');

var N = 60;

for(var i=0;i

var oSpan = document.createElement('span');

if(i%5==0){

oSpan.className = 'bs';

var num = i/5==0 ? 12:i/5;

oSpan.innerHTML = ''+num+'';

oSpan.style.transform = 'rotate('+(i*N)+'deg)';

oSpan.children[0].style.transform = 'rotate('+ -i*6 +'deg)';

}else{

oSpan.className = 'scale';

}

oBox.appendChild(oSpan);

oSpan.style.transform = 'rotate('+6*i+'deg)';

}

function clock(){

var oDate = new Date();

var h = oDate.getHours();

var m = oDate.getMinutes()+1;

var s = oDate.getSeconds();

var ms= oDate.getMilliseconds();

oH.style.transform = 'rotate('+(h*30+m/60*30)+'deg)';

oM.style.transform = 'rotate('+(m*6+s/60*6)+'deg)';

oS.style.transform = 'rotate('+(s*6+ms/1000*6)+'deg)';

}

clock();

setInterval(clock,30);

}

纯CSS3实现的一些酷炫效果

之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...

CSS3 border-radius边框圆角

在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...

.NET Core RC2/RTM 明确了时间表

.NET Core 经过了将近2年的开发,去年12月份发布的RC1版本,明确来说那只是一个beta版本,自从RC1发布以来,看到github里的RC2分支,整个工具链都发生了很大的变化,大家都在焦急的 ...

CSS3 3D立方体效果－transform也不过如此

CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...

三分钟学会用 js + css3 打造酷炫3D相册

之前发过该文,后来不知怎么回事不见了,现在重新发一下. 中秋主题的3D旋转相册 如图,这是通过Javascript和css3来实现的.整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的j ...

使用CSS3实现一个3D相册

CSS3系列我已经写过两篇文章,感兴趣的同学可以先看一下CSS3初体验之奇技淫巧,CSS3 3D立方体效果-transform也不过如此 第一篇主要列出了一些常用或经典的CSS3技巧和方法:第二篇是一 ...

Web大前端时代之：HTML5+CSS3入门系列

准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...

07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

前端制作动画的几种方式(css3，js)

制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式. 1.css ...

随机推荐

子元素的div不继承父元素的透明度

问题一: 如何让logo部变成这样: 步骤一:先收一个大的div,上面logo+nav再一个div,下面是三个div横排着: 步骤二:最主要的是如何让上面的部分变暗,而logo的颜色不变暗? 答案:在 ...

Combox选中项注意事项

一般我们选中某个combox的下拉框会用如下方式: 1.combox.SelectedIndex=下拉框下标,如0是选中第一个.-1是不选中任何项等等: 2.combox.SelectedItem=某 ...

自绘ListBox的两种效果

本文利用Listbox自绘实现了两种特殊效果(见图),左边的风格是自己突然灵感触发想到的,右边的风格来自＂C++ Builder 研究＂的一个帖子,老妖用BCB实现了,这里则用Delphi实现它. 演 ...

使用gulp实现文件压缩及浏览器热加载

一.安装gulp 首先,你要安装过nodejs,如果没有安装过的同学请自行下载.  先再命令行里输入   npm install gulp -g   下载gulp 二.创建gulp项目 创建一个你需要 ...

【原】以setTimeout来聊聊Event Loop

平时的工作中,也许你会经常用到setTimeout这个方法,可是你真的了解setTimeout吗?本文想通过总结setTimeout的用法,顺便来探索javascript里面的事件执行机制. setT ...

Nodejs【单机】多进程模式集群

Nodejs[单机]多进程模式集群实例: 1.安装:npm install -s cluster 2.服务代码: var debug = require('debug'); var express = ...

Python+Selenium学习--窗口切换及操作元素

场景 有时候我们在测试一个web 应用时会出现多个浏览器窗口的情况,在selenium1.0 中这个问题比较难处理.webdriver 提供了相关相方法可以很轻松的在多个窗口之间切换并操作不同窗口上的 ...

版本管理工具git与svn简介

版本管理工具 版本管理工具简介 常见版本管理工具 cvs(Concurrent Versions System) vss(Visual SourceSafe) svn 常用的版本管理工具 git 流行 ...

bata5

目录 组员情况 组员1(组长):胡绪佩 组员2:胡青元 组员3:庄卉 组员4:家灿 组员5:恺琳 组员6:翟丹丹 组员7:何家伟 组员8:政演 组员9:黄鸿杰 组员10:刘一好 组员11:何宇恒 展示 ...

霍风风
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
页面显示当前日期时间
heavenly129324的博客
12-08 816
HTML代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"/> <script type="text/javascript" src="js/fun.js" defer="defer"&g
使用html、css、JavaScript来获取当前时间
weixin_55243810的博客
05-08 903
开发工具： DW 关键技术：html、css、JavaScript 作者： 程鹏飞 写作时间：2021年 4月 30日 注意看红色箭头，按顺序操作下去 创建一个新的html。 同理，以创建html的形式创建css、JavaScript，自主命名并保存。 回到html页面，通过<link>标签来把css文件引入，再通过<script>标签把JavaScript文件引入，并保存。 注：link 元素是空元素，它仅包含属性。此元素只能存在于 he..
css如何实现时间线，熬夜整理最全面的HTML字符实体
最新发布
2401_84092508的博客
04-03 962
资料过多，篇幅有限，需要文中全部资料可以点击这里免费获取前端面试资料PDF完整版！自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！**[外链图片转存中…(img-pAMF3iVf-1712091164428)]由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你觉得这些内容对你有帮助，可以扫码获取！！
js获取当前时间年月日在HTML页面显示,实时获取当前时间并展示在页面上
weixin_30220993的博客
06-03 2468
简介实时获取当前时间并展示在页面上，是很多地方常用的；在页面中做此展示以便查看时间。本文使用js通过一个小的demo实现效果。完整Code实时展示当前时间#time {width: 60%;padding: 10px;border-radius: 6px;background-color: lightcoral;color: white;}#time1 {width: 60%;padding: 1...
CSS点击返回当前时间
m0_73373547的博客
01-31 341
CSS点击返回当前时间,可以连续的点击，点击的次数可以自行更改。本篇文章主要使用for循环来实现连续点击，也可以使用while循环，无论使用哪种循环都要标明最大循环次数，否则网页可能加载不出来。
For循环-九九乘法表/九九偶数乘法表/九九奇数乘法表
qq_45579661的博客
09-12 749
1.九九乘法表 2.九九偶数乘法表 3.九九奇数乘法表 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sca
获取当前时间
impossible1994727的博客
05-30 1462
1、获取当前时间--24小时格式 let date=new Date(); let mydate=date.toLocaleString('chinese', { hour12: false }); //mydate==14:05:23 2、10位--到当前秒 var ts = Math.round(new Date().getTime()/1000).toString()...
css时间
weixin_44540683的博客
02-20 1111
css 时间插件 CSS时间不一样的精确 大家可以看到时间上一个是只能到今天 没有具体的分钟 一个是有分钟的 其实这两个只是运用了不同的插件而已
jquery+css3实现彩色时钟表特效代码
03-20
jquery+css3实现彩色时钟表是一款用css3中的rotate实现针的旋转，显示的是当前时间。
动态时间表 html5+css3+javascript含源码
08-21
动态时间表 html5+css3+javascript含源码
CSS3实现指针时钟走动特效
04-02
CSS3实现指针时钟走动特效是一款基于CSS3+JS实现钟表特效，采用UI界面设计的。
CSS时间：CSS时间
02-19
CSS时间 CSS时间
利用css3 translate完美实现表头固定效果
12-29
前段时间在工作中正好需要这个功能，但是找了很多都不能完美的实现，所以在此就自己做了一个固定表头的方法，主要用到了css3中的translate和一小段js代码，下面来一起看看吧。 效果如下： 感觉是不是很和谐，而且...
CSS3实现指针时钟走动特效特效代码
03-20
CSS3实现指针时钟走动特效是一款基于CSS3+JS实现钟表特效，采用UI界面设计的。
案例---点击获得当前时间
qq_46150052的博客
10-29 313
点击按钮会获得当前时间 <!DOCTYPE html> <html lang="en"> <head> <title>点击按钮会获得当前时间</title> <style> div, p { width: 250px; height: 25px; line-height: 25px; colo
使用Javascript、HTML、CSS实现时间戳转成天、小时、分钟、秒
weixin_56296642的博客
10-04 989
使用Javascript、HTML、CSS实现时间戳转化成天、小时、分钟、秒
CSS3过渡效果小练习-进度条
nuomi_w的博客
11-15 1343
Document
获取系统时间
css
04-12 1432
import java.text.SimpleDateFormat; import java.util.*; public class Test{ public static void main(String [] args){ Date day=new Date(); SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd-HH:mm
用css3画布画出时钟，并让时间动起来
05-25
以下是一个用CSS3画布制作的时钟，并让时间动起来的示例代码： HTML代码： ```html <div class="clock"> <canvas id="canvas" width="200" height="200"></canvas> </div> ``` CSS代码： ```css .clock { width: 200px; height: 200px; position: relative; margin: 50px auto; } #canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } ``` JavaScript代码： ```javascript var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var radius = canvas.height / 2; ctx.translate(radius, radius); radius = radius * 0.9; setInterval(drawClock, 1000); function drawClock() { drawFace(ctx, radius); drawNumbers(ctx, radius); drawTime(ctx, radius); } function drawFace(ctx, radius) { var grad; ctx.beginPath(); ctx.arc(0, 0, radius, 0, 2 * Math.PI); ctx.fillStyle = "#fff"; ctx.fill(); grad = ctx.createRadialGradient(0, 0, radius * 0.95, 0, 0, radius * 1.05); grad.addColorStop(0, "#333"); grad.addColorStop(0.5, "#fff"); grad.addColorStop(1, "#333"); ctx.strokeStyle = grad; ctx.lineWidth = radius * 0.1; ctx.stroke(); ctx.beginPath(); ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI); ctx.fillStyle = "#333"; ctx.fill(); } function drawNumbers(ctx, radius) { var ang; var num; ctx.font = radius * 0.15 + "px arial"; ctx.textBaseline = "middle"; ctx.textAlign = "center"; for (num = 1; num < 13; num++) { ang = num * Math.PI / 6; ctx.rotate(ang); ctx.translate(0, -radius * 0.85); ctx.rotate(-ang); ctx.fillText(num.toString(), 0, 0); ctx.rotate(ang); ctx.translate(0, radius * 0.85); ctx.rotate(-ang); } } function drawTime(ctx, radius) { var now = new Date(); var hour = now.getHours(); var minute = now.getMinutes(); var second = now.getSeconds(); hour = hour % 12; hour = (hour * Math.PI / 6) + (minute * Math.PI / (6 * 60)) + (second * Math.PI / (360 * 60)); drawHand(ctx, hour, radius * 0.5, radius * 0.07); minute = (minute * Math.PI / 30) + (second * Math.PI / (30 * 60)); drawHand(ctx, minute, radius * 0.8, radius * 0.07); second = (second * Math.PI / 30); drawHand(ctx, second, radius * 0.9, radius * 0.02); } function drawHand(ctx, pos, length, width) { ctx.beginPath(); ctx.lineWidth = width; ctx.lineCap = "round"; ctx.moveTo(0, 0); ctx.rotate(pos); ctx.lineTo(0, -length); ctx.stroke(); ctx.rotate(-pos); } ``` 以上代码中，`drawFace()`函数绘制时钟的表盘和边框，`drawNumbers()`函数绘制时钟的数字，`drawTime()`函数获取当前时间并绘制时、分、秒针，`drawHand()`函数绘制时、分、秒针。`setInterval()`函数每隔一秒钟调用`drawClock()`函数，实现时钟时间的实时更新。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值