-
Notifications
You must be signed in to change notification settings - Fork 0
/
17-increase-decrease.htm
118 lines (92 loc) · 3.64 KB
/
17-increase-decrease.htm
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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html>
<head>
<title>Increase/Decrease Buttons</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="basic/basic.min.css">
<script src="basic/basic.min.js" type="text/javascript" charset="utf-8"></script>
<script>
/*
- Algorithm for selecting numbers in a given range.
*/
// BOX: object container box.
var b1
// First running function.
var start = function() {
page.color = "lightgray"
// BOX: Object container box.
b1 = createBox(50, 50, 270, 60)
that.border = 0
that.round = 12
that.color = "white"
that.center("left")
that.bottom = 40
// BUTTON: Decrease button.
b1.btnDecrease = createButton(5, 5)
b1.add(that)
that.text = "Decrease"
that.textColor = "rgba(255, 255, 255, 0.9)"
that.color = "tomato"
that.width = 100
that.round = 12
that.minimal = 1
that.onClick(decreaseNumber)
// LABEL: Number text.
b1.lblNumber = createLabel()
b1.add(that)
// Starting number.
that.text = "0"
that.textAlign = "center"
that.width = 60
that.height = 30
that.color = "transparent"
that.aline(b1.btnDecrease, "right")
// After you align it, bring it down another 10px from the top.
that.top += 10
// BUTTON: Increase button.
b1.btnIncrease = createButton()
b1.add(that)
that.text = "Increase"
that.textColor = "rgba(255, 255, 255, 0.9)"
that.color = "cadetblue"
that.width = 100
that.round = 12
that.minimal = 1
that.aline(b1.btnDecrease, "right", 60)
that.onClick(increaseNumber)
// Check and update when first created.
refreshButtonsStatus()
}
// A function that increases the number by 1 when the key is clicked.
var increaseNumber = function() {
// Sum the number in the label object by 1 and write it back to the label.
b1.lblNumber.text = num(b1.lblNumber.text) + 1
// When the number changes, check and update.
refreshButtonsStatus()
}
// A function that increases the number by 1 when the key is clicked.
var decreaseNumber = function() {
// Sum the number in the Label object by 1 and write it back to the label.
b1.lblNumber.text = num(b1.lblNumber.text) - 1
// When the number changes, check and update.
refreshButtonsStatus()
}
// Function that adjusts the state of the buttons by number.
var refreshButtonsStatus = function() {
// The number can be between 0 and 10.
// Make the buttons passive so that you cannot go beyond these limits.
if (b1.lblNumber.text == "10") {
b1.btnIncrease.enabled = 0
} else if (b1.lblNumber.text == "0") {
b1.btnDecrease.enabled = 0
} else {
b1.btnIncrease.enabled = 1
b1.btnDecrease.enabled = 1
}
}
</script>
</head>
<body>
</body>
</html>