set 限制解除

源码分享 | 一言 - 分类版

搬砖小哥figthing 技巧分享屋 2020-01-15
亲爱的小伙伴们，大家好
在前期的文章中，有趣网站里分享过一个网站，叫Hitokoto - 一言 ，里面提供一句话服务，访问网站后就会随机出现一句话，十分有意思，网址：https://hitokoto.cn
小哥发现里面有一个API文档页面，提到了通过设置不同的参数值来获取到不同分类的句子，网址：https://hitokoto.cn/api
图片
里面有动画、漫画、游戏、小说、原创、来自网络、其他，再加上随机的分类共8种类型，就想着一言官方访问时是随机分类，假如我们喜欢这8种分类中的任意1种分类的句子，那该如何是好？
想到的思路：如果弄一个导航来分类，通过选择不同的分类来访问不同的API，获取API返回的数据，之后显示该分类的随机句子，这不就很方便！
于是，在暑假时，就用手机写了个简易的导航和显示的页面，实现了功能，并且提供了按钮来快捷复制句子，效果如下
图片
是不是觉得不太好看，小哥也觉得太简陋了，就在空闲时改了改，改之后的效果如下
图片
觉得美了许多\（^_^）/，在电脑端的效果是这样的
图片
演示动图如下
图片
下面开始简单的介绍这个源码


01
文件结构



图片


02
关于



名称：一言 - 分类版
作者：搬砖小哥
语言：HTML、CSS、JavaScript
分类：任意、动画、漫画、游戏、小说、原创、网络、其他
接口：来自一言 | https://hitokoto.cn/
字体链接：http://www.fonts.net.cn/font-32030420746.html
演示网址：https://bzxg-space.github.io/oneWords
源码仓库：https://github.com/bzxg-space/oneWords
备注：仅仅使用导航栏，通过选择不同的分类来调用一言官方api来显示句子，不喜勿喷，移动端和PC端均加入快捷一键复制，快速复制当前一句话


03
源码



style.css
* {  padding: 0;  margin: 0;}
/* 字体 by http://www.fonts.net.cn/font-32030420746.html */@font-face {  font-family: '站酷快乐体';  src: url('../fonts/站酷快乐体.ttf');}
body {  padding: 2px;}
button {  font-family: "站酷快乐体";  letter-spacing: 0.15em;}
article {  width: 99%;  max-width: 1000px;  min-width: 300px;  margin: 0px auto;/* font-family: "微软雅黑", arial; */  font-family: "站酷快乐体";  border-radius: 5px;  border: solid 1px grey;  position: fixed;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  -webkit-transform: translate(-50%, -50%);  -moz-transform: translate(-50%, -50%);  -ms-transform: translate(-50%, -50%);  -o-transform: translate(-50%, -50%);  box-shadow: 5px 5px 5px rgba(136, 136, 136, 0.5);  -webkit-box-shadow: 5px 5px 5px rgba(136, 136, 136, 0.5);  -moz-box-shadow: 5px 5px 5px rgba(136, 136, 136, 0.5);  -ms-box-shadow: 5px 5px 5px rgba(136, 136, 136, 0.5);  -o-box-shadow: 5px 5px 5px rgba(136, 136, 136, 0.5);  filter: progid:DXImageTransform.Microsoft.Shadow(Color='rgba(136, 136, 136, 0.5)', Direction='135', Strength='5');}
header {  text-align: center;  height: 40px;  font-weight: normal;  line-height: 40px;  letter-spacing: 0.2em;  text-shadow: 5px 5px 3px rgba(0, 0, 0, 0.5);/* -webkit-text-shadow: 5px 5px 3px rgba(0, 0, 0, 0.5); */  -moz-text-shadow: 5px 5px 3px rgba(0, 0, 0, 0.5);  -ms-text-shadow: 5px 5px 3px rgba(0, 0, 0, 0.5);  -o-text-shadow: 5px 5px 3px rgba(0, 0, 0, 0.5);  filter: Shadow(Color='rgba(0, 0, 0, 0.5)', Direction='135', Strength='3');  filter: dropshadow(OffX=5, OffY=5, Color='rgba(0, 0, 0, 0.5)', Positive='true');}
nav {  width: 95%;  padding: 8px;  margin: 10px auto;  background: #00a4ff;  border-radius: 5px;  box-shadow: 5px 5px 6px rgb(0, 164, 255, 0.5);}
nav ul li {  float: left;  width: 25%;  height: 40px;  text-align: center;  line-height: 40px;  list-style-type: none;  color: white;  border-bottom: solid 2px #00a4ff;  letter-spacing: 0.2em;}
li:hover {  background: #1AAF5D;}
.active {  border: none;  border-bottom: solid 2px #8800ff;}
section {  width: 90%;  height: 350px;  margin: 30px auto 0px;  position: relative;  border: solid 1px gray;}
section button {  position: absolute;  top: 0;  right: 0;  padding: 5px 8px;  border: none;  color: white;  background: #FF69B4;  display: block;  font-size: 14px;}
section div {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  -webkit-transform: translate(-50%, -50%);  -moz-transform: translate(-50%, -50%);  -ms-transform: translate(-50%, -50%);  -o-transform: translate(-50%, -50%);  width: 95%;  line-height: 28px;  letter-spacing: 0.2em;  text-align: center;  border-bottom: solid 1px gray;/* font-family: "站酷快乐体"; */}
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: #FF69B4;  margin: 10px auto;}
footer {  height: 30px;  color: darkgray;  line-height: 30px;  text-align: center;  font-size: 12px;  margin-bottom: 10px;  letter-spacing: 0.12em;}
@media (max-width:420px) {  article {    width: 96%;  }
  nav {    width: 90%;  }}
/* 625px */@media (max-height:645px) {  header {    height: 30px;    line-height: 30px;  }
  nav {    margin: 5px auto 0px;  }
  article {    position: relative;    top: 0;    left: 0;    transform: none;    -webkit-transform: none;    -moz-transform: none;    -ms-transform: none;    -o-transform: none;    margin: 5px auto;  }
  section {    height: 320px;    margin: 10px auto 0px  }
  article>button {    margin: 10px auto;    width: 125px;    height: 30px;    line-height: 30px;  }
  footer {    height: 20px;    line-height: 20px;    text-align: center;    margin-bottom: 5px;  }
  nav ul li {    height: 30px;    line-height: 30px;  }}
copy.js
function copy() {  var textArea = document.createElement("textarea");  textArea.innerHTML = word.innerHTML + '\n-- 来自一言';  document.body.appendChild(textArea);  textArea.select();  document.execCommand('copy');  toast('复制成功 : )', 0);  textArea.parentNode.removeChild(textArea);//document.body.removeChild(textArea);}
index.js
var apis = [  'https://v1.hitokoto.cn/?encode=text',  'https://v1.hitokoto.cn/?c=a&encode=text',  'https://v1.hitokoto.cn/?c=b&encode=text',  'https://v1.hitokoto.cn/?c=c&encode=text',  'https://v1.hitokoto.cn/?c=d&encode=text',  'https://v1.hitokoto.cn/?c=e&encode=text',  'https://v1.hitokoto.cn/?c=f&encode=text','https://v1.hitokoto.cn/?c=g&encode=text'];var flag = 0;var word = document.getElementById('word');var lis = document.getElementsByTagName('li');ajax(apis[0]);
function reload() {  show(flag + 1);}
function show(locals) {  flag = locals - 1;  ajax(apis[locals - 1]);  for (var i = 0; i < lis.length; i++) {    if (i != locals - 1) {      lis[i].style.cssText = "border:none;border-bottom:solid 2px #00a4ff;";    } else {      lis[i].style.cssText = "border:none;border-bottom:solid 2px #8800ff;";    }  }}
//获取内容//by https://blog.csdn.net/qq_15243963/article/details/77970175function ajax(url) {  var xmlhttp = new XMLHttpRequest();  var type = "GET"; //请求方式  xmlhttp.open(type, url, true); //请求方式，接口，异步  xmlhttp.send(); //发送请求  xmlhttp.onreadystatechange = function() {    if (xmlhttp.status == 200 && xmlhttp.readyState == 4) {      var result = xmlhttp.response;      if (window.screen.width > 420) {        word.style.cssText = "font-size:22px;";      } else {        if (result.length <= 60) {          word.style.cssText = "font-size:20px;";        } else if (result.length <= 100) {          word.style.cssText = "font-size:18px;";        } else {          word.style.cssText = "font-size:16px;line-height:25px;";        }      }      word.innerText = result;    }  }}
toast.js
//类似安卓toastfunction toast(msg = "Toast内容", local = -1) {// local 位置//   1 上//   0 中//   -1 下  var time = 3000;  var m = document.createElement('div');  m.innerHTML = msg;  m.style.cssText =    "max-width:60%;min-width: 150px;height:40px;color:#FFFFFF;line-height:40px;text-align:center;padding:5px 15px;border-radius:6px;position:fixed;left:50%;background:#C0C0C0;margin-top:-20px;font-size: 14px;transform: translate(-50%, -50%);z-index: 999999;";  if (isNaN(local) == false && local == -1) {    m.style.top = "80%";  }  if (isNaN(local) == false && local == 1) {    m.style.top = "20%";  }  if (isNaN(local) == false && local == 0) {    m.style.top = "50%";  }  document.body.appendChild(m);  setTimeout(function() {    document.body.removeChild(m);  }, time);}
index.html
<!--时间：19暑假 作者：搬砖小哥github：https://github.com/bzxg-space接口来自一言：https://hitokoto.cn/--><!DOCTYPE html><html><head><meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" type="text/css" href="css/style.css">    <title>一言 - 分类版</title><meta name="author" content="搬砖小哥" /></head><body><article><header>        <h3>一言 - 分类版</h3></header><nav><ul>          <li onclick="show(1);" class="active">任意</li>          <li onclick="show(2);">动画</li>          <li onclick="show(3);">漫画</li>          <li onclick="show(4);">游戏</li>          <li onclick="show(5);">小说</li>          <li onclick="show(6);">原创</li>          <li onclick="show(7);">网络</li>          <li onclick="show(8);">其他</li>          <div style="clear:both;"></div></ul></nav><section id="hitokoto">        <button type="button" onclick="copy();">复制</button>        <div id="word"></div></section>      <button type="button" onclick="reload();">再来一句！</button><footer>        <p>接口来自一言 - <a href="https://hitokoto.cn/">hitokoto.cn</a></p></footer></article></body>  <script type="text/javascript" src="js/toast.js"></script>  <script type="text/javascript" src="js/copy.js"></script>  <script type="text/javascript" src="js/index.js"></script></html>


图片
图片
图片
你点的每个赞，我都认真当成了喜欢




    微信扫一扫
    关注该公众号