L ỊCH TRÌNH THỰC HIỆN ĐỒ ÁN TỐT NGHIỆ P
b. Lưu đồ:
3.4.5.3 Điều khiển tự động:
Hình 3.25: Giao diện web cài đặt thời gian hệ thống.
Để tạo được khung nhập số và nút nhấn như hình trên, ta sẽ viết ra một <form>
bằng html như sau:
<form action="" style="color:#CC0000; font-size:150%;">
<span style="margin-left:23em">Giờ bật : <span style="margin-left:0.01em"><input type="time" name="gio" style=" font-size:100%;width: 10%; height: 5%" ></span><br><br>
<span style="margin-left:23em">Giờ tắt : <span style="margin-left:0.255em"><input
type="time" name="phut" style="font-size:100%; width: 10%; height:
5%"></span><br><br>
<span style="margin-left:26.75em"><input type="Submit" value="Enter"
style="font-size:100%; background-color:#4CAF50;color:#FFFFFF; width: 7%; height: 7%"></span>
CHƯƠNG III: THIẾT KẾ VÀ XÂY DỰNG HỆ THỐNG. 88 Lệnh <span style="margin-left:23em"> có chức năng canh lề cho text và khung
text được thẳng hàng.
Lệnh <input type="time" name="gio" style=" font-size:100%;width: 10%; height: 5%" > có chức năng tạo khung để nhập giá trị thời gian.
Lệnh <input type="Submit" value="Enter" style="font-size:100%; background-color:#4CAF50;color:#FFFFFF; width: 7%; height: 7%">có chức năng
tạo ra nút nhấn với các định dạng màu sắc, kích thước tùy ý.
Để có thểđọc thời gian và hiển thị thời gian lên web, ta dùng đoạn code sau :
<p id="demo" style="color:#CC0000; font-size:100%;" ></p> <script>
var myVar = setInterval(function(){ myTimer() }, 1000); function myTimer() {
var c = new Date().toTimeString() var a = new Date().toDateString()
document.getElementById("demo").innerHTML = a + " " + c;
}
</script>
Trong đoạn code trên, lệnh var c = new Date().toTimeString() có chức năng đọc giờ phút giây của hệ thống và sau đó gán nó vào biến c.
Lệnh var a = new Date().toDateString() có chức năng đọc ngày tháng năm của hệ
thống và sau đó gán vào biến a.
Lệnh document.getElementById("demo").innerHTML = a + " " + c; có chức
năng ghép ngày và giờ vừa được gán vào biến a và c ở trên lại với nhau và sau đó gán
chuỗi này vào một Id là demo.
Cuối cùng là lệnh <p id="demo" style="color:#CC0000; font-size:100%;" ></p>, lệnh này sẽ hiển thị chuỗi demo lên web. Chuỗi này là ngày và giờ mà mình cần hiển thị.
CHƯƠNG III: THIẾT KẾ VÀ XÂY DỰNG HỆ THỐNG. 89