十年网站开发经验+多家企业客户+靠谱的建站团队
量身定制+运营维护+专业推广+无忧售后，网站问题一站解决
!DOCTYPEhtml
html
head
metacharset="UTF-8"
titleanimation/title
style
#box{
height:200px;
width:200px;
background-color:aqua;
position:absolute;
left:0;
margin-top:50px;
}
input{
width:100px;
height:30px;
/style
/head
body
divid="box"/div
inputtype="button"value="前进"
script
varbox=document.getElementById('box');
varbt=document.getElementsByTagName('input');
vartimer=null;
bt[0].onclick=function(){
ani(box,600);
functionani(ele,target){
clearInterval(ele.timer);
ele.timer=setInterval(function(){
varstep=(target-ele.offsetLeft)/10;
step=step0Math.ceil(step):Math.floor(step);
ele.style.left=ele.offsetLeft+step+"px";
console.log(1);
if(Math.abs(target-ele.offsetLeft)=Math.abs(step)){
ele.style.left=target+"px";
},30);
/script
/body
/html
首先准备好11张图片，放到img文件夹下供调用
代码如下：
title/title
p/p
imgsrc="img/0.JPG"/
imgsrc="img/colon.JPG"/
//varoBody=document.body;
varoP=document.getElementsByTagName("p")[0];
varaImg=document.getElementsByTagName("img");
fn();
setInterval(fn,1000)
functionfn(){
variHour=mytime.getHours();//小时
variMin=mytime.getMinutes();//分钟
variSen=mytime.getSeconds();//秒钟
varstr="";
//220640
str=toZero(iHour)+":"+toZero(iMin)+":"+toZero(iSen);
oP.innerHTML=str;
for(vari=0;iaImg.length;i++){
if(str.charAt(i)==":"){
aImg[i].src="img/colon.JPG";
}else{
aImg[i].src="img/"+str.charAt(i)+".JPG";
functiontoZero(n){
if(n10){
returnn="0"+n;
returnn=""+n;
这个是基础的表格，你可以去研究改一下就可以了。
htmllang="en"
metaname="viewport"content="width=device-width,initial-scale=1.0"