The effect of small random draw people

Random draw people to achieve a small effect with native

css、html

<style type="text/css">
    div{
        width: 300px;
        height: 300px;
        border: 2px solid saddlebrown;
        text-align: center;
        line-height: 300px;
        font-size: 60px;
    }
    input{
        width:100px;
        height: 35px;
    }
</style>
<body>
    <input type="button" id="btn" value="开始"/><br/><br/><br/>
    <div id="box"></div>
    <img src="image/1.jpg" alt="" id="m1"/>        
</body>

< Script the src = "../ public.js" > </ Script > 
< Script type = "text / JavaScript" > 
    // idea: variable control switch to start a timer and stopping 
    //    In Flag to true == button - Stop start timer - change the name change map     
    var arr = [ " Prince " , " Lao Tan " , " sauerkraut " , " beef noodles " , " bean sprouts " , " honey bud " , " Xie aircraft " ," Wang Meng ", " Liu can " , " Xie Guangkun " , " Zhao Si " , " Liu head " ];
     var In Flag   =   to true ;
     var BTN = document.getElementById ( " BTN " ); 
    btn.onclick =  function () {
         IF (In Flag ) { // Flag changed to pause, start the timer button is true, change the name in the box, the changing view of 
            the this .Value =  " pause " ; 
            the timer = setInterval (function () {
                 var index = RAND ( 0 , . 11 ); 
                $ ID ( " Box " ) .innerHTML = ARR [index]; 
                $ ID ( " M1 " ) .src =  " Image / "  + (index +  . 1 ) +  " .jpg " ; 
            }, 300 ) 
        } the else { // in Flag out timer is false, the value of the button to start 
            the this .Value = "开始";
            clearInterval(timer);
        }
        flag = !flag;
    }
</script>

public.js

function $ id (id) {// give me a name id, the id of the element returns a 
    return document.getElementById (id); 
} 
// find a random number 
function RAND (min, max) { 
    return Math.round (the Math. random () * (max - min) + min); 
} 

// hexadecimal color random 
function the getColor () { 
    var STR = "0123456789ABCDEF"; // hexadecimal string 
    var color = "#"; 
    for (var I = 0; I < =. 5 ; I ++) {// get the number 6 
        Color + = str.charAt (RAND (0,15));
         // RAND (0,15) between random 0-15 number, as the charAt () subscript, subscript characters corresponding to remove 
    } 
    return Color; 
} 
function ZERO (Val) { 
    return Val <10 "0" + Val:? Val; 
} 
// time difference
function diff(start,end){//2000-2018  2018 - 2000
    //console.log(start.getTime());
    return Math.abs(start.getTime() - end.getTime())/1000;
}

View Code

The effect of small random draw people

Guess you like