今天主要是dom的操作,用的是web-storm编写
1.对图片放大与缩小
<span style="color:#333333;"><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>图片放大缩小</title>
</head>
<body>
<p align="center">
<input type="button" value="放大" οnclick="big()">
<input type="button" value="缩小" οnclick="smr()">
</p>
<div align="center">
<input name="img1" type="image" id="img1" src="images/tu1.png"/>
</div>
<script language="JavaScript">
function big(){//图片放大的方法
var height=img1.height;
var width=img1.width;
if((height<=height*2)||(width<=width*2)){
img1.height=img1.height+20;
img1.width=img1.width+20;
}
}
function smr(){//图片缩小的方法
var height=img1.height;
var width=img1.width;
if((img1.width>100)||(img1.height>100)){
img1.height=img1.height-20;
img1.width=img1.width-20;
}
}
</script>
</body>
</html></span>
2.计时器,包括停止开始
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>计时器</title>
<script>
var s;
window.οnlοad=function(){//时间自动1秒更新一次
s=window.setInterval("showtime()",1000);
}
function showtime(){//获取当前时间方法
var sdom=document.getElementById("spantime");
var now=new Date();//得到当前时间
var stime=now.getFullYear()+"年"+now.getMonth()+"月"
+now.getDate()+"日"+now.getHours()+"时"
+now.getMinutes()+"分"+now.getSeconds()+"秒";
sdom.innerHTML=stime;
}
function stopit(){
window.clearInterval(s);//停止计时器
}
function start(){//开始计时器
s=window.setInterval("showtime()",1000);
}
</script>
</head>
<body>
<span id="spantime"></span>
<input type="button" value="停止" οnclick="stopit()">
<input type="button" value="开始" οnclick="start()">
</body>
</html>
3.图片定时消失,出现
<pre name="code" class="html"><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>计时器</title>
<script>
window.οnlοad=function(){
window.setInterval("start()",1000);
}
function display(){
var sdom=document.getElementById("img1");
sdom.style.display="none";
window.setTimeout("start()",3000);
}
function start(){
var dom=document.getElementById("img1");
dom.style.display="block";
window.setTimeout("display()",3000);
}
function spantime(){
var dates=new Date();
var imgdate=document.getElementById("spantime");
var date =dates.getFullYear()+"年"+dates.getMonth()+"月"+dates.getDate()+
"日"+dates.getHours()+"时"+dates.getMinutes()+"分"+dates.getSeconds()+"秒";
imgdate.innerHTML=date;
}
</script>
</head>
<body>
<img src="images/tu1.png" id="img1">
<span id="spantime"></span>
</body>
</html>