Question

我正在尝试使用HTML构建计时器功能，而我很难使用div来读取单独的JS文件并使用其功能。这是我到目前为止的HTML代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="/Timer.js" /></script>
<title>Work Timer</title>
</head>
<body>
<h1>Work Timer</h1>

<h2/></h2>

<div id="timer"></div>

<script type="text/javascript"> 
    window.onload=CreateTimer("timer");
</script>

<h3/></h3>
<button onclick="start()">Start count!</button>
<h3/></h3>
<button onclick="stop()">Stop count!</button>

这是我的.js文件：

var Timer;
var TotalSeconds;
var timer_is_on = 0;
var t;

function CreateTimer(TimerID) {
    Timer = TimerID;
    TotalSeconds = 0;
    }

function start(){
    if(!timer_is_on){
        timer_is_on = 1;
        Tick();
    }
}

function stop(){
    clearTimeout(t);
    timer_is_on=0;
}

function Tick() {
    UpdateTimer();
    TotalSeconds += 1;
    t = setTimeout("Tick()", 1000);
    }

function UpdateTimer() {
    var Seconds = TotalSeconds;

    var Days = Math.floor(Seconds / 86400);
    Seconds -= Days * 86400;

    var Hours = Math.floor(Seconds / 3600);
    Seconds -= Hours * (3600);

    var Minutes = Math.floor(Seconds / 60);
    Seconds -= Minutes * (60);


    var TimeStr = ((Days > 0) ? Days + " days " : "") + LeadingZero(Hours) + ":" + LeadingZero(Minutes) + ":" + LeadingZero(Seconds);


    document.getElementById(Timer).innerHTML = TimeStr;
    }


function LeadingZero(Time) {

    return (Time < 10) ? "0" + Time : + Time;

    }

我调用.js文件，初始化div，并正确使用window.onload，所以我不确定为什么计时器不会在屏幕上输出。我的js和HTML文件位于同一个项目文件夹中。有人有什么建议吗？

Answer 1

在此行<script type="text/javascript" src="/Timer.js" /></script>中，src的值为/，而根据您js and HTML files are in the same project folder。 /使它跳回一个目录，然后查找js文件。因此，只需删除/。

无法使用HTML来利用JS函数来正确生成输出

1 个答案: