index.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes"/>
    <link rel="icon shortcut bookmark" type="image/png" href="compress-bg/ico1.ico">
    <title>掘金demo列表</title>
    <base target="_blank" />
    <style type="text/css">
        .bg{
            margin: 0;
        }
        .allBox{
            width: 80%;
            margin: 0 auto;
        }
        p{
            display: inline-block!important;
            width: 50%;
            font-size: 2rem;
            float: left;
        }
        a{
            text-decoration: none;
            target= "_Blank";
            color:#7e6b5a;
        }
       h1{
           color: #d1c0a5;
           text-align: center;
       }

    </style>
</head>
<body class="bg">
    <div class="allBox">
        <h1>这里是掘金文章demo</h1>
        <p><a href="https://juejin.im/user/58714f0eb123db4a2eb95372">掘金主页链接</a></p>
        <p><a href="js-time/time-countDown.html">1.倒计时和获取时间的demo</a></p>
        <p><a href="diy-style/diyStyle.html">2.自定义input radio range select的样式</a></p>
        <p><a href="diy-style/range-diy.html">3.range滑块自定义样式，步骤详解以及实际应用</a></p>
        <p><a href="2017/jsTwoWayBinding/jsTwoWay.html">4.原生js双向绑定及其应用</a></p>
        <p><a href="2017/js-random/randomDemo.html">5.js生成随机数，生成指定范围的随机数，获得不重复随机数组。</a></p>
        <p><a href="2017/uiRouter/index.html">6.简单的ui-router实现。</a></p>
        <p><a href="2017/cookieStorage/index.html">7.cookie and storage。</a></p>
    </div>


    <script type="text/javascript">//产生随机背景图片
    var bodyBgs = [];
    for (var i = 1; i < 62; i++) {//注意图片数量
        bodyBgs[i] = "compress-bg/bg"+i+".jpg";
    };
    var randomBgIndex = Math.round( Math.random() * 61 );//随机获取字符串标识，注意图片数量
    console.log(randomBgIndex);
    document.write('<style>.bg{width:100%;background:url(');
    document.write(bodyBgs[randomBgIndex]);
    document.write(');background-size: cover;}</style>');
    //上面的三个字符串可以用“+”连接成一个字符串，这里因为位置原因我拆开写了。
    </script>

</body>
</html>