20161208 JS计时器和CSS3旋转属性闹钟
来源:互联网 发布:朗文和牛津 知乎 编辑:程序博客网 时间:2024/05/22 06:59
谷歌控制盒子旋转
盒子.style.WebkitTransform = "rotate(180deg)"
例子:时钟
<body>
<h1 id="z">时间表</h1>
<div class="clock" id="clock">
<div class="hour" id="hour"></div>
<div class="minute" id="minute"></div>
<div class="second" id="second"></div>
</div>
</body>
<script>
var clock =document.getElementById("clock");
var z =document.getElementById("z");
function zhong(){
var time =new Date()
var h=time.getHours();
var m=time.getMinutes();
var s=time.getSeconds();
var ss=s*6
var mm=m*6
var hh=(h*30)+(mm/12)
z.innerHTML=(h+" :"+m+" :"+s)
clock.children[2].style.WebkitTransform = "rotate("+ss+"deg)"
clock.children[1].style.WebkitTransform = "rotate("+mm+"deg)"
clock.children[0].style.WebkitTransform = "rotate("+hh+"deg)"
}
setInterval("zhong()",1000)
</script>
- 20161208 JS计时器和CSS3旋转属性闹钟
- CSS3 transform旋转属性
- CSS3练习之时钟计时器,3D旋转
- 20161208 JS计时器案例
- CSS3的transform属性实现旋转正方体
- js 计时器 (timer)和钟表
- 图片的每点击一次旋转90度, filter和css3属性
- css3 js实现3D旋转效果
- js计时器(timer) 和 js时钟(clock)
- CSS3背景属性和CSS3的渐变
- css3 翻转和旋转的区别
- css3 旋转
- CSS3旋转
- css3旋转
- CSS3 transform旋转属性在IE浏览器里的实现
- 旋转的风车—利用css3新属性
- 8.11、8.12 js提示框和计时器
- js中的定时器和计时器使用
- react-native--手绘直线(手势)
- 手机拍照或者相册获取图片总结
- C#中的抽象类和接口
- 首篇博客小记
- Android开发-如何快速实现分享功能
- 20161208 JS计时器和CSS3旋转属性闹钟
- Python/Java中文乱码的问题
- 微信小程序学习笔记(5)--------框架之视图层
- CSS经典BUG
- Android stuido 中的keystore
- VS调试C#程序产生的dump
- 图片验证码识别程序全面分析
- alsa音频编程
- spring data jpa session 批量添加