css3获取当前时间并显示,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:何宇恒 展示 ...
css3获取当前时间并显示,CSS3实现时间表相关推荐
- css3获取当前时间并显示,实时获取当前时间并展示在页面上
简介 实时获取当前时间并展示在页面上,是很多地方常用的:在页面中做此展示以便查看时间.本文使用js通过一个小的demo实现效果. 完整Code 实时展示当前时间 #time { width: 60%; ...
- android 获取当前时间_js如何获取当前时间并显示
js可以通过Date对象获取当前日期和时间,使用Date()获取系统当前时间,在使用getFullYear().getMonth().getDate() .getHours()等方法获取特定格式的时间 ...
- Js实现获取当前时间并显示
js可以通过Date对象获取当前日期和时间,使用Date()获取系统当前时间,在使用getFullYear().getMonth().getDate() .getHours()等方法获取特定格式的时间 ...
- css3如何让文字垂直居中显示,css3如何让文字垂直居中显示
css3如何让文字垂直居中显示 发布时间:2020-11-20 09:59:43 来源:亿速云 阅读:57 作者:小新 小编给大家分享一下css3如何让文字垂直居中显示,相信大部分人都还不怎么了解,因 ...
- html页面获取时间格式,js实现动态获取系统时间,显示到页面上
获取系统时间 //获取系统时间. var dateTime=new Date(); var hh=dateTime.getHours(); var mm=dateTime.getMinutes(); ...
- 【HTML】获取当前时间并显示在网页上
首先在页面中我们直接写一个标签,然后给标签定义一个id, 这里我们用什么标签都可以,我们就用<span></span>演示吧, 代码如下: <span id=" ...
- php 获取动态时间,PHP 显示动态时间
PHP 显示动态时间 一.重点:php时间的表示方法,js,dom取值 1.第一种方法 当前时间: function changetime(){ var ary = ["星期日", ...
- EXCELL自动获取当前时间并显示当前时间是今年的第几周
早先发表了一篇文章介绍如何获取输入日期是当年的第几周,这次增加一个自动获取系统日期的功能. 1,打开EXCEL表格. 2,在要显示日期的地方输入=TODAY() 这个地方将会显示系统日期. 3,在 ...
- java获取系统时间并显示时区_JAVA中获取当前系统时间
转自:http://www.cnblogs.com/Matrix54/archive/2012/05/01/2478158.html 一. 获取当前系统时间和日期并格式化输出: 1 importjav ...
最新文章
- 《DSP using MATLAB》示例Example7.23
- python索引序列_Pythonfor循环通过序列索引迭代过程解析
- 伽马分布极大似然估计_一文通俗解释极大似然估计
- Java面试之ArrayList为什么线程不安全?
- vue.js computedmethod
- Shp数据批量导入Postgresql工具的原理和设计
- RAID (HP)双循环
- 车用总线技术 | J1939协议实用指南与J1939数据记录方案
- 数据库课程设计(饭店点餐系统)
- 微信小程序 java运动健身课程打卡系统uniapp
- elementui回到顶部Backtop
- 图层蒙版和图层剪贴路径_PS蒙版解读:快速蒙版、图层蒙版、剪贴蒙版、矢量蒙版(二)...
- 校园•计量抄表信职学院
- 超级计算机神威太湖之光储蓄量,中国超级计算机神威太湖之光世界最快,且总量排名榜单第一...
- ps铅笔素描效果教程
- 指纹锁的识别与原理及安全性
- C++ 求圆的周长和面积
- 云南省增值税发票综合平台(新网址):https://fpdk.yunnan.chinatax.gov.cn/
- pandas数据分析常用的一些方法
- 西铁城s621c打印机调试说明,西铁城CL-S621CII驱动
热门文章
- mysql 历史数据表迁移方案
- c语言酶切算法,科学网—FitHiC V1算法解析(一) - 卢锐的博文
- openni+linux+arm,openni2+mac
- 服务器时间修改连接超时时间,服务器设置网络连接超时时间设置
- 【Xshell】删除键显示^H的解决方法
- 十七届全国大学生智能车竞赛华北赛区开幕式议程
- Windows10下局域网的两台电脑间传输文件,设置文件夹共享
- leaks Android内存泄露,安卓-内存泄露总结
- 怎么用计算机网络控制接触器,交流接触器怎么使用_交流接触器安装方法
- 单相精密馈电监控系统应用方案