Question

我今天刚刚学习JavaScript / jQuery，而我正在努力制作秒表。这是我的代码：

＆＃13;

$(document).ready(function () {
    var value = 0.0;
    $("#STARTSTOP").click(function () {
        $(this).css("value", "Stop");
        while (true) {
            value += 0.1;
            $("#TIME").delay(100).html(value);
            $(this).click(function () {
                $(this).css("Value", "Start");
                break;
            });
        }
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
    <head>
        <title>JQuery Testing Facilities</title>
    </head>
    <body>
        <input id="STARTSTOP" type="button" value="Start"></input>
        <br>
        <p id="TIME">0.0</p>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="onLoad.js"></script>
    </body>
</html>

我遇到的问题是它没有启动，我的按钮的值不会改变。我尝试使用第二个onClick函数，但是我无法阻止它，并且浏览器滞后。

Answer 1

据说，尼尔斯玻尔曾一度驳回过一项提案：“你的理论不对。这甚至都没有错。“

您的代码完全偏离基础，无法正常工作。

你要做的是

 while (true) 
    wait 100ms
    update the screen

您编写的代码无法执行此操作，因为delay函数无法执行您认为的操作。但这确实不是问题所在。

真正的问题是，Javascript是单线程的。如果可以“等待”，整个浏览器将锁定。（这就是为什么Javascript试图完全不允许它。）

在单线程环境中，您将执行以下操作：

 on the START click
   set the GO variable to true
   call the TICK function

 on the STOP click
   set the GO variable to false

 define TICK
    if the GO variable is true
       update the screen
       set a timer to invoke the TICK function in 100ms

因为它似乎在你的能力范围之内，我会留给你写Javascript，除非指出你要在最后一步用代码setTimeout(tick, 100);设置计时器

祝你好运。

Answer 2

value是一个html属性，而不是css属性，您可以使用.prop或.attr方法进行更改：

$(this).prop({value: 'Stop'});

和

$(this).prop({value: 'Start'});

顺便说一下，你的无限while循环会冻结页面（你确定它是必要的吗？）。

Answer 3

您想要操纵html元素的属性，而不是css规则。＆＃34;值＆＃34;不属于style属性。所以你可以使用

$(this).prop( "value", 'Start');

或

$(this).attr('value','Start');

或

$(this).val('Start');

在大多数情况下，prop（）执行attr（）过去做的事情。在代码中用prop（）替换对attr（）的调用通常会起作用，但属性通常比属性更容易处理。查看http://api.jquery.com/中的文档。

您的输入元素也可以自动关闭，例如：

<input type="submit" value="Start"/>

既然你是新手，也许最好看到其他stackoverflow问题 How to create a stopwatch using JavaScript?

这是另一个工作示例 - http://jsfiddle.net/ezmilhouse/V2S9d/

从头开始可能既困难又令人沮丧，所以最好还是与其他人的代码一起玩（这也是大多数人学习的方式）。继续打破一些事情，提出问题并学习。

Answer 4

您尝试将值设置为css属性，而不是;它是一个html属性。试试$this.prop(value: 'ex')。在您的情况下，这将是您修改后的代码行：

$(this).prop("value", "Start");

你可以删除那个不必要的无限循环;它冻结了页面。

为什么函数中的jQuery函数无法启动？

4 个答案: