源码分享 | 随机句子

原创搬砖小哥figthing 技巧分享屋 2020-07-05

亲爱的小伙伴们，大家好

分享一个简洁的调用有趣句子api的显示句子的html单页源码

前言

直接访问有趣句子api，显示的文字太小不利于观看，想着用静态页面显示，让字体大一些，看起来舒服一些。链接转成二维码，每次扫一扫，显示特定类型的随机有趣句子，觉得蛮有意思的:)

关于

1.时间：20-5-92.接口：来自网络3.作者：bzxg4.功能：调用免费句子api显示句子（大字体）5.网址：https://bzxg-space.github.io/randomWord6.分类：地址后加不同的值显示不同类型的句子,默认分类是一言•?a - 一言：https://bzxg-space.github.io/randomWord?a•?b - 毒鸡汤：https://bzxg-space.github.io/randomWord?b•?c - 土味情话：https://bzxg-space.github.io/randomWord?c•?d - 古诗词：https://bzxg-space.github.io/randomWord?d7.备注：不喜勿喷...

示例

点击“再来一句！”即可切换句子

源码

<!--   时间：20-5-9  功能：调用免费句子api显示句子（大字体）    地址后加不同的值显示不同类型的句子      ?a-一言      ?b-毒鸡汤      ?c-土味情话      ?d-古诗词  作者：bzxg  接口：来自网络 --><!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0" />    <!--解决http警报-->        <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />    <title>随机句子 -</title>    <meta name="author" content="bzxg" />    <!-- 样式 start -->    <style>      * {        padding: 0;        margin: 0;      }            /*去除点击button时外边的框框       by https://blog.csdn.net/water_Popcorn/article/details/90480349*/      button:focus,      button:active:focus,      button.active:focus,      button.focus,      button:active.focus,      button.active.focus {        outline: none;        border-color: transparent;        box-shadow: none;      }            article{        width: 90%;        min-width: 280px;        position: fixed;        top: 50%;        left: 50%;        -webkit-transform: translate(-50%, -50%);        -moz-transform: translate(-50%, -50%);        -ms-transform: translate(-50%, -50%);        -o-transform: translate(-50%, -50%);        transform: translate(-50%, -50%);        /*解决文字过多居中显示不全*/        max-height: 100%;        overflow: auto;      }            section#word {        color: #212529;        letter-spacing: 0.1em;        font-size: 2em;        font-weight: 400;        line-height: 1.5;        padding-bottom: 10px;        border-bottom: 2px dashed #666;        word-break: break-word;        text-align: center;      }            article>button{        display: block;        width: 145px;        height: 35px;        line-height: 35px;        font-size: 14px;        text-align: center;        color: white;        border: none;        border-radius: 20px;        background: #666;        margin: 25px auto 0px;      }            article>button:hover{        background: #888;        font-weight: bold;      }            section#word span {        font-size: 0.8em;        font-weight: 300;      }
      @media screen and (max-width:767px) {        body {          font-size: 0.8em;        }        article{          max-width: 600px;        }        article>button {          margin: 15px auto 0px;          width: 125px;          height: 30px;          line-height: 30px;        }      }
      @media screen and (min-width:768px) {        article{          max-width:1000px;        }      }</style>    <!-- 样式 end -->  </head>  <body>    <!-- 主体 start -->    <article>      <section id="word">        :D 获取中...      </section>      <button type="button" onclick="location.reload();">再来一句！</button>    </article>    <!-- 主体 end -->    <!-- javascript strat -->    <script>      //api名称-地址      var apis = [{          name: "一言",          url: "https://v1.hitokoto.cn/?charset=utf-8&encode=text"        }, {          name: "毒鸡汤",          url: "http://api.btstu.cn/yan/api.php"        },        {          name: "土味情话",          url: "https://api.uomg.com/api/rand.qinghua?format=text"        },        {          name: "古诗词",          url: "https://v1.jinrishici.com/all.json"        }      ];      //获取并显示句子      function getWordData() {        var word = document.getElementById("word");        var index = chioceApi();        var url = apis[index].url;        var name = apis[index].name;        document.title += ' '+name;        var xhr = new XMLHttpRequest();        xhr.open('get', url);        xhr.onreadystatechange = function() {          if (xhr.readyState === 4.&&xhr.status==200) {            var data = xhr.responseText;;            var result;            if (index == 3) {              var newdata = JSON.parse(data);              result = newdata.content + "<br/><span>" + newdata.author + "  - 《" + newdata.origin + "》</span>";            } else {              result = data;            }            word.innerHTML = result;          }        };        xhr.send();      }      //根据链接选择api      function chioceApi() {        var address = location.href;        var index; //存放索引        if (address.indexOf("?") != -1) {          var key = address.split("?")[1];          switch (key) {            case "a":              index = 0;              break;            case "b":              index = 1;              break;            case "c":              index = 2;              break;            case "d":              index = 3;              break;            default:              index = 0;              break;          }        } else {          index = 0;        }        return index;      }      //开始      getWordData();</script>    <!-- javascript end -->  </body></html>