2016年12月14日星期三

一个基于JavaScript的timer实现

为了方便观察色谱的运行状态,在降低辐射剂量的情况下获得色谱的时间信息,我用Javascript撰写了一个html小程序,用来在限制很多的色谱工作站上跑。
内容比较简单,所以我一点注释都没有加。


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<html>
<head>
<script type="text/javascript">
var c=0
var d=0
var t
var per=0.1
var alOffset=0
function offset(sec)
 {
   clearTimeout(t);
   if (sec == '-1')
   {
     sec = (document.getElementById("offsetbox").value)*600
   }
   c = sec
   d = sec%(per*600)
 }
function changeColor()
{
  var bgcolor = document.getElementById('txt').style.backgroundColor
  //var x = alert(bgcolor)
  if (bgcolor != "green"){
    document.getElementById('txt').style.backgroundColor = "green"
  }
  else
  {
    document.getElementById('txt').style.backgroundColor = "yellow"
  }
}
function timedCount()
 {
 document.getElementById('txt').innerHTML=(c/600).toFixed(3)
 d=d+1
 c=c+1
 t=setTimeout("timedCount()",100)
 if (d>=per*600){
   changeColor()
   d = 0
 }
 return false;
 }
function timedStop()
{
  clearTimeout(t);
  document.getElementById('txt').innerHTML=0
}
function setAlert()
{
  per = document.getElementById("alPerBox").value
  alOffset = document.getElementById("alOffsetBox").value
  d = alOffset*600
}
</script>
</head>
<body>
<form>
<input type="button" value="0 sec" onClick="offset(0); timedCount()">
<input type="button" value="5 sec" onClick="offset(50); timedCount()">
<input type="button" value="0.1 min" onClick="offset(60); timedCount()">
<input type="button" value="stop" onClick="timedStop()">
<div id="txt" style="color:red;font-size:100px">
0
</div>
<div>
<input type="button" value="Start at" onClick="offset(-1); timedCount()" id="offsetbutton">
<input type="text" id="offsetbox" value="0.5" size="3"> min
</div>
<hr />
<div>
<input type="button" value="Set Alert" onClick="setAlert()">
<br />
Period:
<input type="text" id="alPerBox" value="0.1" size="1.5"> min
<br />
Offset:
<input type="text" id="alOffsetBox" value="0" size="1.5"> min
</div>
</form>
</body>
</html>
    

效果见:

没有评论 :

发表评论