zoukankan      html  css  js  c++  java
  • js小效果-双色球

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
    div{
    50px;
    height:50px;
    border-radius: 50px;
    background: red;
    float:left;
    margin-left: 10px;
    line-height: 50px;
    text-align: center;
    }
    </style>
    <script>
    function addZero(n){
    return n<10 ? '0'+n : ''+n;
    };
    function rnd(n,m){
    return parseInt(Math.random()*(m-n)+n);
    };
    function findInArr(n,arr){
    for(var i=0;i<arr.length;i++){
    if(n==arr[i]){
    return true;
    }
    }
    return false;
    }
    window.onload=function(){
    var oBtn=document.getElementById('btn');
    var aDiv=document.getElementsByTagName('div');
    var timer=null;
    function show(){
    var arr=[];
    while(arr.length<6){
    var n=addZero(rnd(1,34));
    if(findInArr(n,arr)==false){
    arr.push(n);
    }
    };
    for(var i=0;i<aDiv.length;i++){
    aDiv[i].innerHTML=arr[i];
    }
    setTimeout(function(){
    clearTimeout(timer);
    },1000)
    }
    show();
    oBtn.onclick=show;
    }
    </script>
    </head>
    <body>
    <input type="button" value="随机" id="btn" />
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    </body>
    </html>
  • 相关阅读:
    podfile 文件写法
    九大内置对象
    动态网页开发基础
    表单效验
    使用jQuery快速高效制作网页交互特效
    使用jQuery操作DOM
    jQuery选择器
    初始jQuery
    javaScript基础及初始面向对象
    JavaScript操作DOM对象
  • 原文地址:https://www.cnblogs.com/HUANGRONG888/p/6063559.html
Copyright © 2011-2022 走看看