js原生钟表(属性只支持的谷歌)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分页</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>

.box{
width:300px;
height:300px;
border-radius:150px;
background:#fff;
border:5px solid #000;
position: relative;
margin:50px auto;
}
.hour{
width:6px;
height:80px;
background:#000;
position: absolute;
top:70px;
left:147px;
transform-origin:bottom center;
}
.minute{
width:4px;
height:120px;
position: absolute;
background:#000;
top:30px;
left:148px;
transform-origin:bottom center;
}
.second{
width:2px;
position: absolute;
height:120px;
background:red;
top:30px;
left:149px;
transform-origin:bottom center;
}
.center{
position: absolute;
left:0;
right:0;
top:0;
bottom:0;
margin: auto;
width:10px;
height:10px;
background:#000;
border-radius: 5px;
z-index: 1;
}
.box ul li{
position:absolute;
width:2px;
height:10px;
background:#000;
list-style: none;
left:0;
top:0;
right:0;
bottom:0;
margin: auto;
}
.box ul li:nth-child(5n+1){
width:4px;
height:15px;
}
</style>
</head>
<body>

<div class="box">
<div class="center"></div>
<div class="hour" id="hour"></div>
<div class="minute" id="minute"></div>
<div class="second" id="second"></div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

<script>
function time(){
var myDate = new Date();
var h = myDate.getHours() > 11 ? myDate.getHours() - 12 : myDate.getHours();
var m = myDate.getMinutes();
var s = myDate.getSeconds();
document.getElementById("hour").setAttribute("style","transform: rotate(" + (h*30 + (m*6)/360*30) + "deg)");
document.getElementById("minute").setAttribute("style","transform: rotate(" + (m*6 + (s*6)/360*6) + "deg)");
document.getElementById("second").setAttribute("style","transform: rotate(" + s*6 + "deg)");

}
time();
for(var i = 0; i < 60; i++){
document.getElementsByTagName("li")[i].setAttribute("style","transform: rotate(" + i*6 + "deg) translateY(145px)");
}
setInterval(function(){
time();
},1000)

</script>

</body>
</html>

时间: 2024-10-08 05:55:37

js原生钟表(属性只支持的谷歌)的相关文章

transport.js报hasOwnProperty对象不支持此属性

ECShop transport.js错误 这次出现的问题是transport.js在IE下提示对象不支持该用法.出现错误位置为608行的下面的代码: if(this.hasOwnProperty(k)){ 仔细看了一下代码,这个判断的主要作用应该是判断属性的.可能由于各浏览器的差异化,IE下就会出现不支持该用法的错误. 解决方法很简单,只要加多一个判断:if(this.hasOwnProperty&&this.hasOwnProperty(k)){ 就可以解决这个问题了. 究其原因在ie

找出并打印window非原生扩展属性 windowExtendAttr.js

supme 找出并打印window非原生扩展属性 windowExtendAttr.js window扩展属性,扩展方法,扩展函数,非原生属性,非原生方法,非原生函数 http://owmivsi48.bkt.clouddn.com/windowExtendAttr.js // windowExtendAttr.js (function() { var iframe = document.createElement("iframe"); document.body.appendChil

ie中placeholder属性不支持,js解决

ie中placeholder属性不支持,js的解决方法: //placeholder属性在ie下兼容 function placeholder ( pEle , con ) { var pEle = pEle if( pEle.find("input,textarea").val() == "" ){ pEle.append("<i class='placeholder_ie'>"+con+"</i>"

JS(原生)事件委托:为动态创建的节点绑定事件

项目开发中经常需要为动态创建的节点绑定事件, 比如需要创建一个动态列表:在li的数量非常少的时候,为每一个li绑定事件不会存在太多性能方面的问题,但是当列表非常的长,长到上百上千甚至上万的时候(假设),为每个li绑定事件就会对页面性能产生很大的影响.当有大量元素需要绑定相同事件的时候可采用事件委托,将在目标元素上要处理的事件委托给父元素或者祖先元素 优点    事件委托对于web应用程序的性能有如下几个优点:    1.需要管理的函数变少了    2.占用的内存少了    3.javascrip

图片轮播(左右切换)--js原生和jquery实现

图片轮播(左右切换)--js原生和jquery实现 左右切换的做法基本步骤跟 上一篇文章  淡入淡出 类似,只不过修改了一些特定的部分 (1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后是图片两端的左箭头和右箭头5.然后是一个透明背景层,放在图片底部 6.然后是一个图片描述info层,放在

H5、CSS3属性的支持性以及flex

一.项目中用到一个flex属性,但是应用了flex的父容器只设置了width,没有设置height,此时每一个应用了上面提到的属性的样式的div都重叠在了一起,在IE10,IE11出问题,IE9没有问题.(待深入研究) 二.距离上一次发布<五大主流浏览器 HTML5 和 CSS3 兼容性大比拼>转眼已过去一年,在这一年里,浏览器领域的竞争愈演愈烈.Firefox 成为新的“版本帝”但依然未能摆脱被 Chrome 超越的命运,支持更多标准的 IE10 将随着 Windows 8 在10月底正式发

使用jQuery.makeArray() 将多种类型转换成JS原生Array

jQuery.makeArray(obj)这个函数从名字上来看很容易猜出它的用途:应该是用来将传入的对象转换成一个原生array 再看看官网上对它的解释:Convert an array-like object into a true JavaScript array.(将一个类似数组对象转换为JS原生的数组) 那么怎么样的object才可以称为"array-like object"呢?这个问题不急着回答,相信看完文章你会明白的,先看看下面的实验 将HTMLCollection转换成原

Java节点操作(JS原生+JQuery)

Java节点操作(JS原生+JQuery) 节点关系与类型 任何HTML元素,都有nodeType属性.值有1~12,常用的有: 1.元素节点 2.文本节点 8.注释节点 9.document节点(HTML文档对象) 10.DTD(文档类型定义) box.nodeType       //返回值1,获得nodeType属性 box.childNodes            //获得全部子元素 //兼容性问题 注意:在chrome,IE9 IE10高版本的浏览器里面的回车都认为是节点,IE6,7

JavaScript原生对象属性和方法详解——Array对象 转载

length 设置或返回 数组中元素的数目. 注意:设置 length 属性可改变数组的大小.如果设置的值比其当前值小,数组将被截断,其尾部的元素将丢失.如果设置的值比它的当前值大,数组将增大,新的元素被添加到数组的尾部,它们的值为 undefined.所以length不一定代表数组的元素个数. var arr = new Array(3) arr[0] = "John" arr[1] = "Andy" arr[2] = "Wendy" cons