目前共有6篇帖子。 內容轉換:不轉換▼
 
點擊 回復
553 5
【原创程序】网页秒表程序
一派護法 十九級
1樓 發表于:2015-12-14 16:46


一派護法 十九級
2樓 發表于:2015-12-14 16:47
【HTML代码】
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Timer</title>
<style>
#Timer {
    font-family: Arial, Verdana, sans-serif;
    border: 1px solid black;
    width: 200px;
    text-align: center;
}
#Timer > h3 {
    margin: 3px 0px 3px 0px;
    font-size: 24px;
}
#Timer > #display {
    margin: 3px 0px 3px 0px;
    padding: 4px 0px 4px 0px;
    border: 1px solid grey;
    font-size: 20px;
}
#Timer > form {
    margin-bottom: 4px;
}
#Timer > #records.hasBorder {
    border-top: 1px solid grey;
    padding: 2px;
}
</style>
<script>
var timer = {};
timer.intervalID = null;
timer.time = [0, 0, 0, 0];
timer.display = function() {
    var text = [];
    var i;
    for (i = 0; i < this.time.length; i++) {
        value = this.time[i];
        if (value < 10) {
            value = "0" + value;
        }
        text[i] = value;
    }
    text = text.join(":");
    document.getElementById("display").innerHTML = text;
}
timer.increment = function() {
    this.time[3]++;
    if (this.time[3] >= 100) {
        this.time[3] = 0;
        this.time[2]++;
        if (this.time[2] >= 60) {
            this.time[2] = 0;
            this.time[1]++;
            if (this.time[1] >= 60) {
                this.time[1] = 0;
                this.time[0]++;
            }
        }
    }
    this.display();
}
timer.start = function() {
    this.intervalID = setInterval(function(){timer.increment()}, 10);
}
timer.stop = function() {
    clearInterval(this.intervalID);
}
timer.reset = function() {
    this.stop();
    this.time = [0, 0, 0, 0];
    this.display();
}
timer.record = function() {
    document.getElementById("records").innerHTML += document.getElementById("display").innerHTML + "<br>";
    document.getElementById("records").className = "hasBorder";
}

function init() {
    timer.display();
}
</script>
</head>

<body onLoad="init()">
<section id="Timer">
  <h3>Webpage Timer</h3>
  <div id="display"></div>
  <form>
    <input type="button" value="Start" onClick="timer.start()">
    <input type="button" value="Reset" onClick="timer.reset()">
    <input type="button" value="Record" onClick="timer.record()">
  </form>
  <div id="records"></div>
</section>
</body>
</html>
一派護法 十九級
3樓 發表于:2015-12-14 16:48
在Dreamweaver CC 2015设计视图下的显示效果:

不过我没用任何网页设计器,是完全纯手写的代码。
182.137.54.*
4樓 發表于:2015-12-14 16:50
666
182.137.54.*
5樓 發表于:2015-12-14 16:53
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head>  <title>网页秒表 </title>   <meta charset="UTF-8">  <script language="javascript">    var stop; var ss=0; var s=0; var m=0; var h=0; function  clock(){ var btn = document.getElementById('start'); switch(btn.value){ case "start": setTimeout("init()",10); btn.value = "pause"; break; case 'pause': clearTimeout(stop); btn.value = "start"; document.getElementById("showtime"); break;  } } function init(){  ss++;  var show =document.getElementById("showtime");  if(m==60){   h++;m=0;  }  if(s==60){   m++;s=0;  }  if(ss==100){   s++;ss=0;  }  if(m<10&&s<10){  show.value= "0"+h+":"+"0"+m+":"+"0"+s+":"+ss;  }  else if(s<10&&m>=10){  show.value= "0"+h+":"+m+":"+"0"+s+":"+ss;  }else if(m<10&&s>=10){  show.value="0"+h+":"+"0"+m+":"+s+":"+ss;  }  else show.value= "0"+h+":"+m+":"+s+":"+ss;  stop=setTimeout("init()",10);  }   function reset(){ h=0; m=0; s=0; ss=0; document.getElementById("showtime").value="00:00:00:00"; clearTimeout(stop); var btn = document.getElementById('start'); btn.value = "start"; } function record(){ var is =document.getElementById("record"); var is =document.getElementById("showtime"); }   </script>  <style type="text/css">        #main{ width:200px; margin: auto; border:solid 1px; } #showtime{width:196px; height:30px; font-size:25px; text-align:center;  } #t{ text-align:center; font-size:28px; }        </style>   </head>  <body onLoad="reset();">  <div id='main'>  <div id="t">网页秒表</div>   <input type="text" readonly="readonly" id="showtime"/>     <input type="button" value="start" onclick="clock();" id="start" name="start">&nbsp;    <button onclick="reset();" id="reset" name="reset"/> reset</button>&nbsp; <button onclick="record();" id="record" value="reset" >record</button> <table id="tab"; border:solid; ></table>    </div>  </body></html> 

 

我没有写记录功能 真厉害!

一派護法 十九級
6樓 發表于:2015-12-14 17:25

回復帖子

內容:
用戶名: 您目前是匿名發表
驗證碼:
(快捷鍵:Ctrl+Enter)
 

本帖信息

點擊數:553 回複數:5
評論數: ?
作者:巨大八爪鱼
最後回復:巨大八爪鱼
最後回復時間:2015-12-14 17:25
 
©2010-2024 Arslanbar Ver2.0
除非另有聲明,本站採用創用CC姓名標示-相同方式分享 3.0 Unported許可協議進行許可。