No Comments

JS实例 切割数据后随机展示

原数据大概有几百张图，为了展示删减了，新浪大多数图也失效了，这里只是为了演示效果。

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="referrer" content="never">
    <title>TOP20</title>
    <style>
       div{
        position: fixed;
        top: 50%;
        right: 100px;
        z-index: 100;
        line-height: 30px;
        color: #fff;
        border-radius: 4px;
        background: #123;
        padding: .5em;
        box-shadow: 2px 3px 5px rgba(0,0,0,.5);
        cursor:pointer;
      } 
    </style>
  <body >
    <b id="pic" ></b>
    <div id="show30" style="top: 40%">随机显示不超3张</div>
    <div id="showall">显示全部（考验你网速和机子性能）</div>
      <div id="show" style="top: 70%">一起遨游</div>
   
  </body>
  <script type="text/javascript">
    var img='http://wx4.sinaimg.cn/large/005vbOHfgy1ff3si75t4yj30m80wiaez.jpg,http://wx1.sinaimg.cn/large/005vbOHfgy1ff3si3fctsj30dw0ki76a.jpg,http://wx3.sinaimg.cn/large/005vbOHfgy1ff3shxa4qoj30gi0kr4qp.jpg,http://wx3.sinaimg.cn/large/005vbOHfgy1ff3shswjptj30ia0rftbq.jpg,http://ww4.sinaimg.cn/large/a82b014bjw1fbaff1h2olg20fa05qhdz.gif,http://wx4.sinaimg.cn/large/a180de74gy1ff3h090e37g20b409dnph.gif,http://wx2.sinaimg.cn/large/006GlaT2ly1ff3mi2vzy5j30eg0j0mza.jpg,http://wx4.sinaimg.cn/large/005LPJdcly1ff3j7xwkdvj30go0mzqml.jpg,http://wx1.sinaimg.cn/large/92e8647aly1ff3f2ibcq6g20d10ej1kz.gif,http://ww2.sinaimg.cn/large/a82b014bjw1f2s4ozmf2wg207r07c1kx.gif,http://wx2.sinaimg.cn/large/66b3de17gy1ff2ulg7dc3j20dw0h5dgf.jpg';


  
    var pic=document.getElementById("pic");
    var imgArr=img.split(",");
    var tem,j=0;
    document.querySelector('#show30').addEventListener('click',show30);
    document.querySelector('#showall').addEventListener('click',showa);
    console.log("长度"+imgArr.length);
    function show30(){
      pic.innerHTML="";
     
      for (var i = 0; i <3; i++) {
        var j=Math.ceil(Math.random()*1000+1); 
        console.log(j);
        if(j>=imgArr.length)
          return;
        tem=document.createElement('img');
        tem.setAttribute("referrerpolicy","no-referrer");
        tem.src=imgArr[j];
        pic.appendChild(tem);
      }

    }
    function showa(){
      pic.innerHTML="";
      for (j;j<imgArr.length;j++) {
        tem=document.createElement('img');
        tem.setAttribute("referrerpolicy","no-referrer");
        tem.src=imgArr[j];
        pic.appendChild(tem);
      }
    }
  </script>
</html>

最后更新于 2023-03-04 19:36:07 并被添加「」标签，已有 1642 位网友阅读过。

本站使用「署名 4.0 国际」创作共享协议，可自由转载、引用，但需署名作者且注明文章出处

此处评论已关闭