1

私は簡単なウェブページを持っています：

<html>
  <body>
    When button has value of "Start Clock" and button is pushed:
      <li>The clock information is shown in the textfield</li>
      <li>The value of the button changes to "Stop Clock"</li>
    When the button has the value "Stop Clock" and button is pushed
      <li>The clock information stops in the textfied</li>
      <li>The button value changes to "Start Clock"</li>

    <input type="text" id="clocktext"/>
    <input type="button" id="clockb" value="Start Clock"/> 

    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="scripts.js"></script>
  </body>
</html>

スクリプトファイルもあります。

function myclock() { 
    var date = new Date(); // Get the current date/time
    var hour = date.getHours(); // Save hours
    var min = date.getMinutes(); // Save minutes
    var sec = date.getSeconds(); // Save seconds
    formathour = format(hour); // Format hours
    formatmin = format(min); // Format minutes
    formatsec = format(sec); // Format seconds
    timeout = setTimeout("myclock()", 1000); 
}

function format(x) {
    if (x < 10) x = "0" + x;
    return x;
}

$("#clockb").click(function () {
    var c = setInterval(setTheTime(), 1000);
    if (this.value == "Start Clock") {
        $(this).prop('value', 'Stop Clock'); // Set button value to Stop Clock
    } else if (this.value == "Stop Clock") {
        $(this).prop('value', 'Start Clock');
            clearInterval(c);
    }
});

function setTheTime() {
    myclock();
    var curTime = formathour+":"+formatmin+":"+formatsec // Current time formatted
    $("#clocktext").prop('value', curTime);
}

ボタンを押しても時計を継続的に更新できません：/

私はこれとその非常に迷惑なことを複雑にしすぎているように感じます。

私はjQueryとjsに非常に慣れていないので、どんな洞察も役に立ちます

4

3 に答える 3

0

これを使用できます。スパンをクリックします

<span id="clock" style="background-color:#9CC;float:right" onclick="updateClock();">&nbsp;</span>
<script type="text/javascript">

function updateClock ( )
{
var currentTime = new Date ( );

var currentHours = currentTime.getHours ( );
var currentMinutes = currentTime.getMinutes ( );
var currentSeconds = currentTime.getSeconds ( );

// Pad the minutes and seconds with leading zeros, if required
currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;

  // Choose either "AM" or "PM" as appropriate
var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";

  // Convert the hours component to 12-hour format if needed
currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;

// Convert an hours component of "0" to "12"
//currentHours = ( currentHours == 0 ) ? 12 : currentHours;

// Compose the string for display
var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " "   + timeOfDay;

// Update the time display
document.getElementById("clock").firstChild.nodeValue = currentTimeString;
}
</script>
于 2012-10-20T06:43:27.033 に答える
0

私はあなたが2つのことのうちの1つを逃していると思います：

  • htmlファイル内にjquerylibを含めなかったか
  • 関数をdocument.ready内に配置しなかったかのどちらかです。

次のように2つの関数をラップする必要があります。

$(document).ready(function() {
function setTheTime() {
    myclock();
    var curTime = formathour+":"+formatmin+":"+formatsec // Current time formatted
    $("#clocktext").prop('value', curTime);
}

$("#clockb").attr("onclick", "").click(function () {
    var c = setInterval(setTheTime(), 1000);
    if (this.value == "Start Clock") {
        $(this).prop('value', 'Stop Clock'); // Set button value to Stop Clock
    } else if (this.value == "Stop Clock") {
        $(this).prop('value', 'Start Clock');
            clearInterval(c);
    }
});

ここで動作するコードを見ることができます：http：//jsfiddle.net/T47ME/

于 2012-10-20T06:43:38.710 に答える
0

動作するコードは次のとおりです：http：//jsfiddle.net/hUYZv/1/

エラーは、setIntervalの誤った使用にありました。そのはず：

var c = setInterval(setTheTime, 1000);

関数の実行結果ではなく、関数への参照を提供する必要があります（次のように記述しますsetTheTime()）。

于 2012-10-20T06:39:03.340 に答える