网页在线qq客服代码,html5 canvas显示日期星期的时钟代码

特效描述：html5 canvas 显示日期星期 时钟代码，html5显示日期星期 可以全屏漂浮

代码部署教程

1. 引入JS

<script type=”text/javascript” src=”js/jquery-1.8.3.min.js”>
</script>

<script type=”text/javascript” src=”js/shizhong.js”>

</script>

2. HTML代码

<br />
<br />

<div style=”width:150px;margin:0 auto;”>

<canvas id=”myCanvas” width=”150″ height=”150″>

</canvas>

</div>

<script>

var x = 50,y = 60;//图片距离顶部的位置
var xin = true, yin = true
var step = 1 //图片移动的步速 越高越快
var delay = 10 //图片移动延时 越高越慢
var obj=document.getElementById(“myCanvas”)
function float() {
var L=T=0
var R= document.documentElement.clientWidth-obj.offsetWidth //offsetHeight 则是网页内容实际高度
var B = document.documentElement.clientHeight-obj.offsetHeight // clientHeight 就是透过浏览器看内容的这个区域高度。
obj.style.left = x + document.documentElement.scrollLeft + “px”;
obj.style.top = y + document.documentElement.scrollTop + “px”;
x = x + step*(xin?1:-1)
if (x < L) { xin = true; x = L}
if (x >

R){ xin = false; x = R}
y = y + step*(yin?1:-1)
if (y < T) { yin = true; y = T }
if (y >

B) { yin = false; y = B }
}
var itl= setInterval(“float()”, delay)
obj.onmouseover=function(){clearInterval(itl)}
obj.onmouseout=function(){itl=setInterval(“float()”, delay)}
</script>

下载地址

立即下载