原生JavaScript利用setInterval的一個簡單開始暫停的定時器

阿新 • • 發佈：2019-02-02

首先我們先來看看效果（圖片自理）
這裡寫圖片描述

下面看一下DOM

<body>
    <table>
        <tr>
            <td>
                <img src="number/0.bmp" id="imgLeft">
            </td>
            <td>
                <img src="number/0.bmp" id="imgRight">
            </td>
        </tr 
>
        <tr>
            <td>
                <input type="button" value="開始" id="start" onclick="doStart()">
            </td>
            <td>
                <input type="button" value="停止" id="stop" onclick="doStop()" disabled>
            </td>
        </tr 
>
    </table>
</body>

然後就是js程式碼，並沒有style樣式

<script type="text/javascript">
        var timer;
        var r=0;
        var l=0;
        function doStart(){
            $("start").disabled=true;
            $("stop").disabled=false;
            timer=setInterval(go,100);
        }
        function 
 go(){
            r++;
            if(r>9){
                r=0;
                l++;
            }   
            if(l>9){
                l=0;
            }
            $("imgRight").src="number/"+r+".bmp";
            $("imgLeft").src="number/"+l+".bmp";
        }
        function doStop(){
            $("start").disabled=false;
            $("stop").disabled=true;
            clearInterval(timer);
        }

        function $(id){
            return document.getElementById(id);
        }
    </script>

原生JavaScript利用setInterval的一個簡單開始暫停的定時器

首先我們先來看看效果（圖片自理）下面看一下DOM <body> <table> <tr> <td> <img src=

Golang中使用heap編寫一個簡單高效的定時器模塊

true pop 邏輯 .com light 初始化 callback before cell 定時器模塊在服務端開發中非常重要，一個高性能的定時器模塊能夠大幅度提升引擎的運行效率。使用Golang和heap實現一個通用的定時器模塊，代碼來自：https://github.

Golang中使用heap編寫一個簡單高效的定時器模組

package timer import ( "container/heap" // Golang提供的heap庫 "fmt" "os" "runtime/debug" "sync" "time" ) const ( MIN_TIMER_INTERVAL = 1

原生JavaScript實例之簡單放大鏡

tel 默認 this hid RF div 樣式 mov doc 原生JavaScript實例之簡單放大鏡放大鏡效果分析：一、選項卡效果鼠標移入小圖列表其中一張圖時，小圖邊框效果，大盒出現對應的大圖二、放大鏡效果鼠標移入大圖時，鼠標位置出現放大鏡，鼠

JavaScript之實現一個簡單的Vue

方法 ole tro def pre 一個進行 this upd vue的使用相信大家都很熟練了，使用起來簡單。但是大部分人不知道其內部的原理是怎麽樣的，今天我們就來一起實現一個簡單的vue。 Object.defineProperty() 實現之前我們得先看一下Obje

JavaScript 之實現一個簡單的 Vue

vue的使用相信大家都很熟練了，使用起來簡單。但是大部分人不知道其內部的原理是怎麼樣的，今天我們就來一起實現一個簡單的vue Object.defineProperty() 實現之前我們得先看一下Object.defineProperty的實現，因為vue主要是通過資料劫

blockchain 區塊鏈200行程式碼在JavaScript實現的一個簡單的例子

瞭解blockchain的概念很簡單（區塊鏈，交易鏈塊）：它是分散式的（即不是放置在同一臺機器上，不同的網路裝置上的）資料庫支援主辦記錄日益增長的名單。但是，這也是容易混淆blockchain與我們試圖幫他解決了目標 - 在人們心中的那一刻，這個詞是相當強烈的交易，合同或智慧cryptocurrency的

利用緩衝輸入流來讀取控制檯資訊，作為一個簡單的文字編輯器

package com.example.shoumahis; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; public class

blockchain 區塊鏈200行程式碼：在JavaScript實現的一個簡單的例子

瞭解blockchain的概念很簡單（區塊鏈，交易鏈塊）：它是分散式的（即不是放置在同一臺機器上，不同的網路裝置上的）資料庫支援主辦記錄日益增長的名單。但是，這也是容易混淆blockchain與我們試圖幫他解決了目標 - 在人們心中的那一刻，這個詞是相當強烈的交易，合同或智

初學javascript，寫一個簡單的階乘算法當作練習

info 學java 簡單的 png 練習分享圖片 write img var 代碼如下： <script> var a = prompt("請輸入值"); function mul(a){ if(a==1){ return 1; }

JavaScript--利用setInterval或setTimeout實現背景顏色輪播

Window屬性---暫停和定時器暫停 var timeoutObj = setTimeout("執行程式",毫秒) setTimeout(引用，1000)setTimeout("執行程式",100

利用poi包裝一個簡單的Excel讀取器.一（適配一個Reader並提供readLine方法）

通常，讀文字我們會使用BufferedReader，它裝飾或者說管理了InputStreamReader，同時提供readLine()簡化了我們對文字行的讀取。就像從流水線上獲取產品一樣，每當取完一件後，它自動準備好下一件並等待我們獲取，一直到全部取完結束。所以我們的目標就是希望也能管理poi並提供一個rea

Tomcat學習筆記（一）一個簡單的Web服務器

sub 調用 [] ont 拒絕 address 剖析文件 getprop 內容為《深入剖析Tomcat》第一章重點，以及自己的總結，如有描述不清的，可查看原書。一、HTTP協議： 1、定義：用於服務器與客戶端的通訊的協議，允許web服務器和瀏覽器通過互聯網進行發送和接

一個簡單的json解析器

har continue != objects token spa 根據 blog nbsp 實現一個簡單地json解析器。兩部分組成，詞法分析、語法分析詞法分析 package com.mahuan.json; import java.util.LinkedLis

自己動手實現一個簡單的JSON解析器

pair bool 優點輕量結束 pan isdigit 復雜 false 1. 背景 JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。相對於另一種數據交換格式 XML，JSON 有著諸多優點。比如易讀性更好，占用空間更少等

一個簡單的Web服務器

row waiting rom trace server toc 獲得 except 協議一個簡單的Web服務器 Web服務器也稱為超文本傳輸協議（HyperText Transfer Protocol）服務器，因為它使用HTTP和客戶端（通常是Web瀏覽器）進行通信

WPF 一個簡單的顏色選擇器

本章講述：WPF中，一個簡單的顏色選擇器的實現；使用外部依賴庫檔案：“ColorPicker.dll”；下載地址：https://download.csdn.net/download/byh371256/10745273 1、XAML介面程式碼 <Window x:Cl

第二十四篇－用VideoView製作一個簡單的視訊播放器

這是一個播放本地視訊的播放器，videoUrl1是手機裡放置視訊的路徑效果圖： MainActivity.java package com.example.aimee.videotest; import android.Manifest; import android.co

Qt Quick Lession3 (用QML寫一個簡單的顏色選擇器)

先看一下效果圖：實現功能：點選不同的色塊可以改變文字的顏色。實現步驟：一、建立一個預設的Qt Quick工程: 二、新增檔案Cell.qml 這一步主要是為了實現一個自定義的元件，這個元件就是我們看到的那個色塊，很明顯定義

自定義一個簡單的迭代器(line_iterator)

STL是容器、迭代器、演算法三位一體的好東西，使用STL編寫的程式看起來非常簡潔。比如從cin輸入若干字串，每一字串佔一行，然後將這些字串按字典序排序並輸出到cout中，相關的程式碼如下所示： /* 迭代器的使用 * created: btwsmile

原生JavaScript利用setInterval的一個簡單開始暫停的定時器

相關推薦