-
Notifications
You must be signed in to change notification settings - Fork 1
/
js7_demo.html
76 lines (64 loc) · 3.44 KB
/
js7_demo.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
<html>
<head>
<meta charset="utf-8">
<title>JavaScript 7-segment Display by SpeedBit (c)</title>
<style>body { background-color: #cccccc; font-family: Arial, Helvetica, Sans-Serif; Color: #000088; } </style>
<!-- load script file -->
<script type="text/javascript" src="js_display.js"></script>
</head>
<script>
var container1 = "dpl1";
var container2 = "dpl2";
var container3 = "dpl3";
var container4 = "dpl4";
var container5 = "dpl5";
var container6 = "dpl6";
</script>
<body>
<h3><center>js_display by the SpeedBit</h3>
<script>
// make container for display
document.write("<br><center><div id='" + container1 + "' style='background-color: #f0f0f0; width: 90%; height: 50%; position: relative'></div>");
document.write("<br><center><div id='" + container2 + "' style='background-color: #f0f0f0; width: 90%; height: 50%; position: relative'></div>");
document.write("<br><center><div id='" + container3 + "' style='background-color: #f0f0f0; width: 90%; height: 50%; position: relative'></div>");
document.write("<br><center><div id='" + container4 + "' style='background-color: #f0f0f0; width: 90%; height: 50%; position: relative'></div>");
document.write("<br><center><div id='" + container5 + "' style='background-color: #f0f0f0; width: 90%; height: 50%; position: relative'></div>");
document.write("<br><center><div id='" + container6 + "' style='background-color: #f0f0f0; width: 90%; height: 50%; position: relative'></div>");
var dpl1 = new js_display(container1, 15, 60, "green" );
var dpl2 = new js_display(container2, 5, 120, "cyan" );
var dpl3 = new js_display(container3, 8, 30, "red" );
var dpl4 = new js_display(container4, 7, 40, "blue" );
var dpl5 = new js_display(container5, 10, 50, "yellow");
var dpl6 = new js_display(container6, 1, 200, "green" );
var num = -500;
dpl3.sang = 0;
dpl4.sang = 12;
dpl5.sang = 5;
dpl6.sang = 1;
interval= setInterval(function() {
num++;
dpl1.draw_num(num /1, 2);
dpl2.draw_num((500-num) /10, 2);
dpl3.draw("Enjoy! " );
dpl4.draw_str("7-seg" );
dpl5.draw_str("Display!");
dpl1.sang = Math.abs(num % 100 / 10);
dpl6.sang = Math.abs(num % 100 / 10);
if (num.toString()[2]<5)
dpl6.draw(num.toString()[2]+"." );
else
dpl6.draw(num.toString()[2]);
if ((num>=100) && (num<150)) dpl1.draw_str("hello" );
if ((num>=150) && (num<200)) dpl1.draw_str("it is..." );
if ((num>=200) && (num<250)) dpl1.draw_str("7-seg display!");
if ((num>=250) && (num<400)) dpl1.draw_str("display!!!" );
if (num==100) dpl1.color("cyan" );
if (num==200) dpl1.color("blue" );
if (num==300) dpl1.color("yellow");
if (num==400) dpl1.color("red" );
if (num==500) dpl1.color("green" );
}, 10);
</script>
<p><center>Enjoy :-) </p>
</body>
</html>