今天整理了几个有关于Javascript的实例:
1、电子表:
<body>
<h2></h2>
<input type="button" value="取消" onclick="cancel()" /> (定义按钮,给按钮添加点击事件,方法名为cancel())
</body>
<script type="text/javascript">
function showtime(){
var d = new Date(); (定义时间变量,年月日时分秒)
var year = d.getFullYear();
var month = d.getMonth();
var riqi = d.getDate();
var hour = d.getHours();
var minute = d.getMinutes();
var second = d.getSeconds();
var timeinfo = year+"-"+month+"-"+riqi+" "+hour+":"+minute+":"+second; (具体时间)
document.getElementsByTagName(‘h2‘)[0].innerHTML = timeinfo; (将h2的内容赋值,具体值为时间的值。)
}
window.onload = function(){ (将页面加载完成后,执行该方法)
mytime = setInterval("showtime()",1000); (添加定时器,每一秒变化一次)
}
function cancel(){ (按钮的点击事件,点击“取消”暂停当前时间)
clearInterval(mytime);
}
</script>
2、存成绩:
<body>
(定义s三个数组,分别接收输入语文、数学、英语的成绩)
第<span id=sp1>1</span>个学生成绩:语文<input type="text" id="yuwen">数学:<input type="text" id="shuxue">英语:<input type="text" id="yingyu"><button onClick="sp()" id="xiayige">下一个</button><br>
语文总成绩:<input type="text" id="yuwensum">平均分:<input type="text" id="yuwenavg"><br>
数学总成绩:<input type="text" id="shuxuesum">平均分:<input type="text"
id="shuxueavg"><br>
英语总成绩:<input type="text" id="yingyusum">平均分:<input type="text" id="yingyuavg"><br>
</body>
<script type="text/javascript">
var sp1=document.getElementById("sp1"), (设变量,获取元素)
yuwen=document.getElementById("yuwen"),
shuxue=document.getElementById("shuxue"),
yingyu=document.getElementById("yingyu"),
yuwensum=document.getElementById("yuwensum"),
shuxuesum=document.getElementById("shuxuesum"),
yingyusum=document.getElementById("yingyusum");
var arr=[]; (设一个变量为数组,存成绩)
n=0;
function sp(){
arr[n]=[yuwen.value,shuxue.value,yingyu.value];
n=n+1;
sp1.innerHTML=n+1; (第n位学生,改变学生的编号)
yuwen.value="";
shuxue.value="";
yingyu.value="";
yuwensum.value="";
shuxuesum.value="";
yingyusum.value="";
for(var i in arr){ (二维数组挑选出第i位学生的语文、数学、英语成绩)
yuwensum.value=yuwensum.value+arr[i][0]; (计算总分)
shuxuesum.value=shuxuesum.value+arr[i][1];
yingyusum.value=yingyusum.value+arr[i][2];
}
document.getElementById("yuwenavg").value=(+yuwensum.value/arr.length); (计算各科平均分)
document.getElementById("shuxueavg").value=(+shuxuesum.value/arr.length);
document.getElementById("yingyuavg").value=(+yingyusum.value/arr.length)
}
</script>
3、轮播图:
<body>
<button id="qian" onClick="xiangqian()"> < </button>
<img src="1.png" id="tupian" onMouseMove="stop()" onMouseOut="start()">
<button id="hou" onClick="xianghou()"> > </button>
</body>
<script type="text/javascript">
var qian=document.getElementById("qian"); (定义变量)
var hou=document.getElementById("hou");
var tupian=document.getElementById("tupian");
var arr=["1.png","2.png","3.png"];
var i=0;
var n=2;
var setint=null;
window.onload=function(){ (不点击按钮时,图片定时调换到下一张图片)
setint=setInterval(function(){
xianghou();
},1000);
}
function stop(){ (鼠标移动到图片上图片静止,不再发生变化)
clearInterval(setint);
}
function start(){ (鼠标移走时,图片继续自动调换到下一张图片)
setint=setInterval(function(){
xianghou();
},1000);
}
function xianghou(){ (点击按钮,图片调换到下一张)
tupian.setAttribute(‘src‘,arr[i]);
i=i+1;
if (i>2){ (判断当图片是最后一张时,点击按钮,返回第一张图片)
i=0;
}
}
function xiangqian(){
tupian.setAttribute(‘src‘,arr[n]); (点击按钮,图片调换到上一张)
n=n-1;
if(n<0){ (判断当图片已经是第一张时,点击按钮,返回最后一张图片)
n=arr.length-1;
}
}
</script>