コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > javascript_javascript スキルを使用してシンプルなストップウォッチ タイマーを設計する

javascript_javascript スキルを使用してシンプルなストップウォッチ タイマーを設計する

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
リリース： 2016-05-16 15:31:14
オリジナル
1169 人が閲覧しました

この記事の例では、JavaScript で設計された単純なストップウォッチ タイマーの実装コードについて説明します。皆さんの参考に共有してください。詳細は以下の通りです。
実行中のエフェクトのスクリーンショットは次のとおりです:

具体的なコードは次のとおりです:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

<html>

<head>

<title> New Document </title>

</head>

<body>

 <form action="somepage.asp">

  <input type="text" value="0" name="txt1"/>

  <input type="button" value="开始" name="btnStart"/>

  <input type="button" value="重置" name="btnReset"/>

 </form>

</body>

</html>

<script language="JavaScript" type="text/javascript">

<!--

//获取表单中的表单域

var txt=document.forms[0].elements["txt1"];

var btnStart=document.forms[0].elements["btnStart"];

var btnReset=document.forms[0].elements["btnReset"]

//定义定时器的id

var id;

//每10毫秒该值增加1

var seed=0;

btnStart.onclick=function(){

  //根据按钮文本来判断当前操作

  if(this.value=="开始"){

    //使按钮文本变为停止

    this.value="停止";

    //使重置按钮不可用

    btnReset.disabled=true;

    //设置定时器，每0.01s跳一次

    id=window.setInterval(tip,10);

  }else{

    //使按钮文本变为开始

    this.value="开始";

    //使重置按钮可用

    btnReset.disabled=false;

    //取消定时

    window.clearInterval(id);

  }

}

//重置按钮

btnReset.onclick=function(){

  seed=0;

}

//让秒表跳一格

function tip(){

  seed++;

  txt.value=seed/100;

}

//-->

</script>

ログイン後にコピー

この記事が JavaScript プログラミングを学習するすべての人に役立つことを願っています。

関連ラベル：
javascript秒表计时器 js秒表计时器 javascript定时器
前の記事：Jquery のすべての選択と逆選択の例 code_jquery 次の記事：me_javascript スキルから JavaScript タイマーを学ぶ
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート