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>

Joe — 一款个人类型Typecho主题

screenshot.png
Joe.zip主题下载

1、整包仅1.7Mb(重新打包了),却实现超强功能,极其迅速的响应(在开发时,都是使用30000篇文章进行开发测试)
2、全站变量名、类名统一规范,重在方便更多人参与二开与拓展
3、主题开箱即用,没有任何复杂的操作,无需像其他主题去特意创建个分类等。
4、主题首发Typecho独家Joe编辑器
5、主题响应式布局,不依赖任何响应式框架,采用 Joe 独家响应式
6、主题在一切可能暴露的接口上,屏蔽sql注入、xss攻击风险,提供安全保障
7、内置超强视频功能、包含直播功能、全网影视功能、文章内插入视频功能
8、主题SEO极致优化,Lighthouse SEO跑分彪满100分
9、主题色彩全局公用、小白轻松直接修改整站自定义主题色
10、主题内置代码高亮、无需借助任何插件、支持200种语言
11、主题首发极强画图回复功能,为你的博客带来用户互动,不再像传统博客那样,仅限文字
12、主题内置sitemap、百度推送、友联、回复可见等,无需依赖任何插件

说明我这提供的版本替换了CDN链接,修改了部分JS。需要原版的去作者官网下载。
此主题的几个地方要说下,JS过多引用,运行不会很快。
已知问题,那年今日开启没数据会报错。

Maven 镜像源加速-腾讯云

操作场景
为解决软件依赖安装时官方源访问速度慢的问题,腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构,目前腾讯云软件源站支持公网访问和内网访问。

公网访问地址:http://mirrors.cloud.tencent.com/
内网访问地址:http://mirrors.tencentyun.com/
设置方法
settings.xml 文件中的 mirrors 标签中添加 mirror 子节点:

<mirror>
    <id>tencent-cloud</id>
    <mirrorOf>central</mirrorOf>
    <url>http://mirrors.cloud.tencent.com/nexus/repository/maven-public/</url>
</mirror>

让网页变灰白(让网页灰白失效)

让网页灰白

html{filter:grayscale(100%);
-webkit-filter:grayscale(100%);
-moz-filter:grayscale(100%);
-ms-filter:grayscale(100%);
-o-filter:grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter:grayscale(1)}

让网页灰白失效
F12进入控制台 粘贴代码回车即可

(function() {
    //创建一个元素
    var globalCss = document.createElement("style");
    //设置这个元素的类型 <style type = "text/css"></style>
    globalCss.type = "text/css";
    //获取head标签,并把<style type = "text/css"></style>添加进去
    document.getElementsByTagName("head")[0].append(globalCss)
    //设置style标签的样式
    globalCss.appendChild(document.createTextNode("*{-webkit-filter:none !important;}"));
})();