在每一个Li中写出随机数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li {
            margin-right: 4px;
            list-style: none;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            float: left;
            background: #c00;
            color: #fff;
            border-radius: 50%;
            font-size: 20px;
            font-family: "Microsoft YaHei";
        }
    </style>
</head>
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<script>
    function rnd(n, m) {//随机数: n - m之间,包含n 不包含m;
        return parseInt(Math.random() * (m - n) + n);
    }

    function find(item, arr) {//查找item在arr中是否出现过,出现过返回true,没出现过返回false;
        for (var i = 0; i < arr.length; i++) {
            if (item === arr[i]) return true;
        }
        return false;
    }

    function addZero(n) {
        return n < 10 ? '0' + n : '' + n;
    }

    var arr = [];//用来存放6个随机数;

    for (var i = 0; i < 6; i++) {
        var n = rnd(1, 34);//随机数
        if (!find(n, arr)) {//判断随机数在数组中是否出现过, 没有出现过的话就把随机数放到数组中;
            arr.push(addZero(n));
        } else {
            // alert('重复了');
            i--;//重复的话就返回再查找一次.
        }
    }

    var aLi = document.getElementsByTagName('li');
    for (var i = 0; i < aLi.length; i++) {
        aLi[i].innerHTML = arr[i];
    }

</script>

</body>
</html>
posted on 2019-01-09 10:58 猛兽阅读(283) 评论(0) 编辑收藏举报