当前时间:
<div id="foo"></div>
<script type="text/javascript">
setInterval( function(){
/* 获取当前时间对象 */
var a = new Date();
var y = a.getFullYear();
var m = a.getMonth();
//var d1 = a.getDay();
var d2 = a.getDate();
var h = a.getHours();
var m1 = a.getMinutes();
var s = a.getSeconds();
foo.innerHTML = y+"年"+ (m+1)+"月"+ d2 +"日" + h + ":" + m1 + ":" + s;
} , 1000 );
</script>
1.5 特效2 帧动画
<img src="img/pie_0.jpg" width="400" id="tom">
<button οnclick="pie()">丢球</button>
<script type="text/javascript">
function pie() {
var i = 1;
setInterval( function(){
tom.src = "img/pie_"+i%24+".jpg";
i++;
} ,100 );
}
</script>
A 一组动画完成的时候 需要停止动画
B 一组动画没有完成的时候 重复点击没有效果
<body>
<img src="img/pie_0.jpg" width="400" id="tom">
<button οnclick="pie()">丢球</button>
<script type="text/javascript">
var t = null;
function pie() {
/* 判断是否有定时器在执行 */
if(t == null){
var i = 1;
t = setInterval( function(){
tom.src = "img/pie_"+i+".jpg";
i++;
/* 判断是否该停止的临界点 */
if(i == 24){
clearInterval(t);
t = null;
}
} ,100 );
}
}
</script>
</body>
1.6 运动特效
<style type="text/css">
div {
position: fixed;
top: 100px;
left: 0px;
width: 200px;
background-color: green;
}
</style>
</head>
<body>
<div id="foo">你好 世界</div>
<button οnclick="run()">开始/结束</button>
<button οnclick="hehe()">向左</button>
<button οnclick="haha()">向右</button>
<script type="text/javascript">
var s = 0;
var v = 5;
var t = null;
function run() {
if(t == null){
t = setInterval( function(){
foo.style.left = s + "px";
s+=v;
},10);
}else{
clearInterval(t);
t = null;
}
}
function hehe(){
v = 5;
}
function haha(){
v = -5;
}
</script>