<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: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>

js小效果-双色球的更多相关文章

  1. js小效果-轮播图

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  2. js小效果：返回顶部 scrollTop 。 滚屏：animate

    返回顶部: (scroll 滚屏事件,如果超出第一屏,显示返回顶部的按钮) <div id="gotop" onclick="javascript:scroll(0 ...

  3. js小效果-全选

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  4. js小效果-简易计算器

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  5. [转载]Js小技巧||给input type=“password”的输入框赋默认值

    http://www.cnblogs.com/Raywang80s/archive/2012/12/06/2804459.html [转载]Js小技巧||给input type="passw ...

  6. CSS3实现几个常用的网页小效果

    主题 由于最近比较忙,自己也没有很充裕的时间可以去做比较丰富的分享.今晚我挤出时间来制作这几个很常用的CSS3网页小效果.最近写JS的时间比例比较多,不过我还是比较钟情于CSS3.所以我还是坚持分享一 ...

  7. js-------》(小效果)实现倒计时及时间对象

    js实现倒计时及时间对象 JS实现倒计时效果代码如下: 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset ...

  8. JS打字效果的动态菜单代码分享

    这篇文章主要介绍了JS打字效果的动态菜单,推荐给大家,有需要的小伙伴可以参考下. 这是一款基于javascript实现的打字效果的动态菜单特效代码,分享给大家学习学习. 小提示:浏览器中如果不能正常运 ...

  9. hammer使用: 代码：捏合、捏开、图片放大 的一个手机图片“放大缩小可拖动”的小效果

    hammer.js 的使用. (手机手势插件) 捏合.捏开.图片放大 的一个手机图片“放大缩小可拖动”的小效果. 相关js 到 http://www.bootcdn.cn/  查找和下载. hamme ...

随机推荐

  1. 几年前做家教写的C教程（之二）

    C语言学习宝典(2) 认识C语言中的运算符: (1)算术运算符   (+  -  *  /  %) (2)关系运算符    (>  <  ==  >=  <=  != ) (3 ...

  2. Web框架之Tornado

    概述 Tornado 是 FriendFeed 使用的可扩展的非阻塞式 web 服务器及其相关工具的开源版本.这个 Web 框架看起来有些像web.py 或者 Google 的 webapp,不过为了 ...

  3. DES加密算法实现

    好久没写博客了,正好趁着实现网络工程与安全的DES算法的功夫,把代码发上来. DES的介绍可见:DES加密 原理不赘述了..实在太多,其实就是一个形式化算法,按部就班的实现就可以,只不过有些繁琐,我写 ...

  4. CXF学习 (1)

    Axis(Apache) -> Axis2(Apache) XFire - > CXF (XFire+Celtrix) (Apache) CXF并不仅仅是Webservice框架,更号称是 ...

  5. Hibernate一对一映射关联

    Hibernate提供了两种一对一映射关联关系的方式: 1)按照外键映射 2)按照主键映射 下面以员工账号表和员工档案表(员工账号和档案表之间是一对一的关系)为例,介绍这两种映射关系,并使用这两种 映 ...

  6. Zookeeper 初体验之——伪分布式安装（转）

    原文地址: http://blog.csdn.net/salonzhou/article/details/47401069 简介 Apache Zookeeper 是由 Apache Hadoop 的 ...

  7. Struts2文件上传下载

    Struts2文件上传 Struts2提供 FileUpload拦截器,用于解析 multipart/form-data 编码格式请求,解析上传文件的内容,fileUpload拦截器 默认在defau ...

  8. jquery尺寸：宽度与高度

    width() 方法设置或返回元素的宽度(不包括内边距.边框或外边距). height() 方法设置或返回元素的高度(不包括内边距.边框或外边距). innerWidth() 方法返回元素的宽度(包括 ...

  9. mongodb学习02基础知识

    文档 键值对的一个有序集 文档被表示为对象 文档必须有一个 _id 键 {"greeting" : "Hello, world!"}` 键 文档的键是字符串 区 ...

  10. mvc-6依赖管理

    CommonJS CommonJS规范,主要解决命名空间管理模块和用一套标准的编程模式来加载模块: 很快成为了JavaScript模块写法的事实标准: 它包含IO接口,底层的套接字流,以及单元测试等标 ...