如何在TypeScript中制作時鍾？
[英]How to make clock in TypeScript?
問題描述
我是TypeScript和OOP的新手。 我需要做簡單的數字時鍾作為作業。 我必須上課。 在JS中制作起來對我來說比較容易，所以我做到了，效果很好。 現在，我試圖將其“反向”為TypeScript。 我還必須添加更改時區的功能。
請幫忙！
我的工作JS版本如下所示：
var clock = document.getElementById('clock');
function Clock() {
var time = new Date();
var hours = time.getHours().toString();
var minutes = time.getMinutes().toString();
var seconds = time.getSeconds().toString();
if (hours.length < 2) {
hours = '0' + hours;
}
if (minutes.length < 2) {
minutes = '0' + minutes;
}
if (seconds.length < 2) {
seconds = '0' + seconds;
}
var clockStr = hours + ' : ' + minutes + ' : ' + seconds;
clock.textContent = clockStr;
}
Clock();
setInterval(Clock, 1000);
我在TypeScript中無法正常工作的代碼如下所示：
class Clock {
hours:number;
minutes:number;
seconds:number;
constructor(hours:number, minutes:number, seconds:number) {
this.hours = hours;
this.minutes = minutes;
this.seconds = seconds;
}
print() {
if (hours.length < 2) {
hours = '0' + hours;
}
if (minutes.length < 2) {
minutes = '0' + minutes;
}
if (seconds.length < 2) {
seconds = '0' + seconds;
}
var clockStr = hours + ' : ' + minutes + ' : ' + seconds;
}
}
function timeGenerate() {
let time = new Date();
let hours = time.getHours();
let minutes = time.getMinutes();
let seconds = time.getSeconds();
}
function clockRun() {
timeGenerate();
let newClock = new Clock(hours, minutes, seconds);
newClock.print();
}
clockRun();
setInterval(clockRun, 1000);
document.getElementById('tsClock').innerHTML = newClock;
我的HTML：
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typescript Clock</title>
<style>
body {
background-color: royalblue;
font-family: 'Lato';
margin-top: 300px;
text-align: center;
color: ivory;
}
#clock {
font-weight: 300;
font-size: 100px;
}
</style>
</head>
<body>
<h1 id="tsClock"></h1>
<script src="app.js"></script>
</body>
</html>
2 個解決方案
解決方案1
2 已采納 2017-12-20 00:35:18
所有有效的JavaScript都是有效的TypeScript，但反之則不是。
在您的TypeScript中，存在一些范圍問題。
在以下函數中，您將聲明僅存在於該函數范圍內的4個變量。 返回未定義。
function timeGenerate() {
let time = new Date();
let hours = time.getHours();
let minutes = time.getMinutes();
let seconds = time.getSeconds();
}
在這里，您要調用不執行任何操作的timeGenerate函數，使用未定義的變量創建一個新時鍾，並調用print() 。
function clockRun() {
timeGenerate();
let newClock = new Clock(hours, minutes, seconds);
newClock.print();
}
clockRun();
setInterval(clockRun, 1000);
這是一個可行的最小示例（保持簡單！）
class Clock { // Declare a class variable of type "Element" called el el: Element; /** * Called when "new" is invoked, you'll pass your target element here. * @param element Target element to update */ constructor(element) { this.el = element; // Immediately kick off a setInterval to this objects "run" method, // every 1000ms like you had before. setInterval(() => this.run(), 1000) } /** * This *could* be in the constructor, but for seperation of duties we'll * make it a method. This method is invoked every ~1000ms (JavaScript timers * aren't perfect). */ run() { var time = new Date(); // Don't need to call toString, but it's fine here. When you start // concatenating numbers onto strings they get converted anyway. var hours = time.getHours().toString(); var minutes = time.getMinutes().toString(); var seconds = time.getSeconds().toString(); // Your previous logic. if (hours.length < 2) { hours = '0' + hours; } if (minutes.length < 2) { minutes = '0' + minutes; } if (seconds.length < 2) { seconds = '0' + seconds; } var clockStr = hours + ' : ' + minutes + ' : ' + seconds; // Update this class' "el" variable as before. this.el.textContent = clockStr; } } // Create a new instance of Clock, passing in your target DOM element. const clock = new Clock(document.getElementById('clock'))
解決方案2
1 2017-12-20 00:34:15
就在我們通過您的代碼之前。 您需要知道瀏覽器無法讀取打字稿。 因此，您應該將其編譯為JavaScript（ES 5）。 因此，您的index.html應該導入編譯的JavaScript，而不是打字稿文件。
現在，讓我們轉到您的代碼：
class Clock {
hours:number;
minutes:number;
seconds:number;
constructor(hours:number, minutes:number, seconds:number) {
this.hours = hours;
this.minutes = minutes;
this.seconds = seconds;
this.clockRun();
setInterval(this.clockRun, 1000);
document.getElementById('tsClock').innerHTML = newClock;
}
print() {
if (hours.length < 2) {
hours = '0' + hours;
}
if (minutes.length < 2) {
minutes = '0' + minutes;
}
if (seconds.length < 2) {
seconds = '0' + seconds;
}
var clockStr = hours + ' : ' + minutes + ' : ' + seconds;
}
}
timeGenerate() {
let time = new Date();
let hours = time.getHours();
let minutes = time.getMinutes();
let seconds = time.getSeconds();
}
clockRun() {
this.timeGenerate();
let newClock = new Clock(hours, minutes, seconds);
this.print();
}
如何讓時鍾停止
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.