body中的代碼和CSS
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
input{
padding: 20px 30px;
background-color: lightgreen;
border:2px inset #ccc;
color: white;
font-size: 20px;
font-weight: bold;
font-family: "微軟雅黑";
}
</style>
</head>
<body>
<div id = "buttonLinks" >
<input type = "button" value = "100">
<input type = "button" value = "60">
<input type = "button" value = "23">
<input type = "button" value = "55">
<input type = "button" value = "56">
<input type = "button" value = "10">
<input type = "button" value = "344">
<input type = "button" value = "600">
<input type = "button" value = "50">
<input type = "button" value = "50">
<input type = "button" value = "30">
</div><script type="text/javascript">
window.onload = function(){
//1. 先獲取標籤名爲input的集合，在這裏由於所有input都是button，獲得的集合就都是button的集合
var btns = document.getElementById('buttonLinks').getElementsByTagName('input');
//2. 定義一個數組，存放每個btn的value
var result = [];
for(var i = 0; i < btns.length; i++){
(function(num){
result[num] = btns[num].value;
})(i);
}
//比較函數，value從大到小排列
function compare(a, b){
return b-a;
}
result.sort(compare);
//在進行了上面那一步。result中的數字有序，但是並沒有對應到相應的btns[i]中，所以先將result賦值進去
for(var i = 0; i< result.length; i++){
btns[i].value = result[i];
}
var functionId;
for(var i = 0; i< btns.length; i++){
//使用立即調用函數，爲每一個btn都綁定一個click事件。
(function(num){
btns[num].onclick = function(){
//setInterval 進行每一秒鐘btns[num]的值減1
functionId = setInterval(function(){
if(btns[num].value > 0){
//更新btn中的值，並減一
btns[num].value = btns[num].value;
btns[num].value -= 1;
}else{
clearInterval(functionId);
}
},1000);
}
})(i)
}
}
</script>
</body>
</html>