2018-1-12電子表、存成績、輪播圖
今天整理了幾個有關於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>
2018-1-12電子表、存成績、輪播圖