源码分享 | 有趣文字

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

亲爱的小伙伴们，大家好

分享一个简洁的使用本地数据来显示多分类有趣文字的html源码

有趣文字 - funText

关于

•(◔◡◔) 随机有趣文字，仿自一篇文字：https://www.dumogu.top/•包含：毒鸡汤、一言、土味情话、名言、古诗词•离线：使用本地数据，无需联网，界面简约(^．^)下载即用•传送门：https://bzxg-space.github.io/funText•备注：in 20-6-7 by bzxg，不喜勿喷...

示例

点击"→"即可切换句子，点击"↗"即可复制句子

结构

源码

1、index.html

<!--   20-6-7  有趣的文字：毒鸡汤、一言、土味情话、名言、古诗词--><!DOCTYPE html><html>  <head>    <meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1" />    <link data-n-head="ssr" rel="icon" type="image/x-icon" href="img/favicon.png">    <title>一言 - 有趣文字</title>    <meta name="author" content="bzxg" />    <!-- 通用的样式 -->    <link rel="stylesheet" type="text/css" href="css/general.css" />  </head>  <body>    <div id="container">      <!-- 头 开始 -->      <div id="head">        <a class="home" href="index.html"><img src="img/logo.png" /></a>        <!--  flex实现导航  -->        <nav class="nav-flex">          <a href="index.html" class="active">一言</a>          <a href="djt.html">毒鸡汤</a>          <a href="twqh.html">土味情话</a>          <a href="my.html">名言</a>          <a href="gsc.html">古诗词</a>        </nav>      </div>      <!-- 头 结束 -->      <!-- 主体 -->      <div id="content">        <div id="word"></div>        <div id="deal">          <button onclick="copy()" title="复制">↗</button>          <button onclick="getData()" title="换一句">→</button>        </div>      </div>      <!-- 主体 结束 -->    </div>    <!-- 尾 开始 -->    <footer>      <p>©2020&nbsp;有趣文字        <br />        <a href="https://github.com/bzxg-space/funText" target="_blank" title="查看源码仓库">Github↗</a></p>    </footer>    <!-- 尾 结束 -->    <!-- 数据 -->    <script type="text/javascript" src="js/data.js"></script>    <!-- 通用js -->    <script type="text/javascript" src="js/general.js"></script>    <!-- 当前js -->    <script type="text/javascript">      var words = data.yy;      getData();</script>  </body></html>

2、gsc.html

<!--   20-6-7  有趣的文字：毒鸡汤、一言、土味情话、名言、古诗词--><!DOCTYPE html><html>  <head>    <meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1" />    <link data-n-head="ssr" rel="icon" type="image/x-icon" href="img/favicon.png">    <title>古诗词 - 有趣文字</title>    <meta name="author" content="bzxg" />    <!-- 通用的样式 -->    <link rel="stylesheet" type="text/css" href="css/general.css" />    <!-- 当前独立样式 -->    <style type="text/css">      span {        font-size: 0.8em;        font-weight: 300;      }</style>  </head>  <body>    <div id="container">      <!-- 头 开始 -->      <div id="head">        <a class="home" href="index.html"><img src="img/logo.png" /></a>        <!--  flex实现导航  -->        <nav class="nav-flex">          <a href="index.html">一言</a>          <a href="djt.html">毒鸡汤</a>          <a href="twqh.html">土味情话</a>          <a href="my.html">名言</a>          <a href="gsc.html" class="active">古诗词</a>        </nav>      </div>      <!-- 头 结束 -->      <!-- 主体 -->      <div id="content">        <div id="word"></div>        <div id="deal">          <button onclick="copy()" title="复制">↗</button>          <button onclick="getData()" title="换一句">→</button>        </div>      </div>      <!-- 主体 结束 -->    </div>    <!-- 尾 开始 -->    <footer>      <p>©2020&nbsp;有趣文字        <br />        <a href="https://github.com/bzxg-space/funText" target="_blank" title="查看源码仓库">Github↗</a></p>    </footer>    <!-- 尾 结束 -->    <!-- 数据 -->    <script type="text/javascript" src="js/data.js"></script>    <!-- 通用js -->    <script type="text/javascript" src="js/general.js"></script>    <!-- 当前js -->    <script type="text/javascript" src="js/gsc.js"></script>  </body></html>

3、my.html

<!--   20-6-7  有趣的文字：毒鸡汤、一言、土味情话、名言、古诗词--><!DOCTYPE html><html>  <head>    <meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1" />    <link data-n-head="ssr" rel="icon" type="image/x-icon" href="img/favicon.png">    <title>名言 - 有趣文字</title>    <meta name="author" content="bzxg" />    <!-- 通用的样式 -->    <link rel="stylesheet" type="text/css" href="css/general.css" />  </head>  <body>    <div id="container">      <!-- 头 开始 -->      <div id="head">        <a class="home" href="index.html"><img src="img/logo.png" /></a>        <!--  flex实现导航  -->        <nav class="nav-flex">          <a href="index.html">一言</a>          <a href="djt.html">毒鸡汤</a>          <a href="twqh.html">土味情话</a>          <a href="my.html" class="active">名言</a>          <a href="gsc.html">古诗词</a>        </nav>      </div>      <!-- 头 结束 -->      <!-- 主体 -->      <div id="content">        <div id="word"></div>        <div id="deal">          <button onclick="copy()" title="复制">↗</button>          <button onclick="getData()" title="换一句">→</button>        </div>      </div>      <!-- 主体 结束 -->    </div>    <!-- 尾 开始 -->    <footer>      <p>©2020&nbsp;有趣文字        <br />        <a href="https://github.com/bzxg-space/funText" target="_blank" title="查看源码仓库">Github↗</a></p>    </footer>    <!-- 尾 结束 -->    <!-- 数据 -->    <script type="text/javascript" src="js/data.js"></script>    <!-- 通用js -->    <script type="text/javascript" src="js/general.js"></script>    <!-- 当前js -->    <script type="text/javascript">      var words = data.my;      getData();</script>  </body></html>

4、djt.html

<!--   20-6-7  有趣的文字：毒鸡汤、一言、土味情话、名言、古诗词--><!DOCTYPE html><html>  <head>    <meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1" />    <link data-n-head="ssr" rel="icon" type="image/x-icon" href="img/favicon.png">    <title>毒鸡汤 - 有趣文字</title>    <meta name="author" content="bzxg" />    <!-- 通用的样式 -->    <link rel="stylesheet" type="text/css" href="css/general.css" />  </head>  <body>    <div id="container">      <!-- 头 开始 -->      <div id="head">        <a class="home" href="index.html"><img src="img/logo.png" /></a>        <!--  flex实现导航  -->        <nav class="nav-flex">          <a href="index.html">一言</a>          <a href="djt.html" class="active">毒鸡汤</a>          <a href="twqh.html">土味情话</a>          <a href="my.html">名言</a>          <a href="gsc.html">古诗词</a>        </nav>      </div>      <!-- 头 结束 -->      <!-- 主体 -->      <div id="content">        <div id="word"></div>        <div id="deal">          <button onclick="copy()" title="复制">↗</button>          <button onclick="getData()" title="换一句">→</button>        </div>      </div>      <!-- 主体 结束 -->    </div>    <!-- 尾 开始 -->    <footer>      <p>©2020&nbsp;有趣文字        <br />        <a href="https://github.com/bzxg-space/funText" target="_blank" title="查看源码仓库">Github↗</a></p>    </footer>    <!-- 尾 结束 -->    <!-- 数据 -->    <script type="text/javascript" src="js/data.js"></script>    <!-- 通用js -->    <script type="text/javascript" src="js/general.js"></script>    <!-- 当前js -->    <script type="text/javascript">      var words = data.djt;      getData();</script>  </body></html>

5、twqh.html

<!--   20-6-7  有趣的文字：毒鸡汤、一言、土味情话、名言、古诗词--><!DOCTYPE html><html>  <head>    <meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1" />    <link data-n-head="ssr" rel="icon" type="image/x-icon" href="img/favicon.png">    <title>土味情话 - 有趣文字</title>    <meta name="author" content="bzxg" />    <!-- 通用的样式 -->    <link rel="stylesheet" type="text/css" href="css/general.css" />  </head>  <body>    <div id="container">      <!-- 头 开始 -->      <div id="head">        <a class="home" href="index.html"><img src="img/logo.png" /></a>        <!--  flex实现导航  -->        <nav class="nav-flex">          <a href="index.html">一言</a>          <a href="djt.html">毒鸡汤</a>          <a href="twqh.html" class="active">土味情话</a>          <a href="my.html">名言</a>          <a href="gsc.html">古诗词</a>        </nav>      </div>      <!-- 头 结束 -->      <!-- 主体 -->      <div id="content">        <div id="word"></div>        <div id="deal">          <button onclick="copy()" title="复制">↗</button>          <button onclick="getData()" title="换一句">→</button>        </div>      </div>      <!-- 主体 结束 -->    </div>    <!-- 尾 开始 -->    <footer>      <p>©2020&nbsp;有趣文字        <br />        <a href="https://github.com/bzxg-space/funText" target="_blank" title="查看源码仓库">Github↗</a></p>    </footer>    <!-- 尾 结束 -->    <!-- 数据 -->    <script type="text/javascript" src="js/data.js"></script>    <!-- 通用js -->    <script type="text/javascript" src="js/general.js"></script>    <!-- 当前js -->    <script type="text/javascript">      var words = data.twqh;      getData();</script>  </body></html>

6、general.css

/* 清除内外边距 全局过渡*/* {  padding: 0;  margin: 0;  -webkit-transition: font-size 0.3s linear;  -ms-transition: all 0.3s linear;  -o-transition: all 0.3s linear;  -moz-transition: all 0.3s linear;  transition: all 0.3s linear;}
/*去除点击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;}
/* 清除a的下划线,添加小手 */a {  text-decoration: none;  cursor: pointer;}
/* 最外围  整体*/div#container {  width: 80%;  max-width: 1000px;  margin: 0px auto;}
/* 头 */div#container div#head {  margin-top: 10px;  padding: 0px 10px;  display: flex;  flex-wrap: wrap;  /* 超出自动换行 */  flex-direction: row;  /* 主轴:水平 */  justify-content: space-between;  /* 均分对齐 */}
div#container div#head a.home {  width: 20%;  display: block;  max-width: 150px;  min-width: 100px;  margin-top: 10px;}
div#container div#head a.home img {  width: 100%;}
div#container div#head nav.nav-flex {  width: 80%;  max-width: 800px;  display: flex;  flex-wrap: wrap;  /* 超出自动换行 */  flex-direction: row;  /* 主轴:水平 */  justify-content: space-around;  /* 均分对齐 */  padding: 10px 0px;}
div#container div#head nav.nav-flex a {  display: block;  padding: 10px;  color: rgb(39, 35, 67);  font-size: 15px;  font-weight: 600;  letter-spacing: 1.5px;}
div#container div#head nav.nav-flex a.active {  color: rgb(243, 69, 115);}
div#container div#head nav.nav-flex a:hover {  font-size: 16px;  -webkit-text-shadow: 0px 0px 3px rgb(243, 69, 115);  -ms-text-shadow: 0px 0px 3px rgb(243, 69, 115);  -moz-text-shadow: 0px 0px 3px rgb(243, 69, 115);  -o-text-shadow: 0px 0px 3px rgb(243, 69, 115);  text-shadow: 0px 0px 3px rgb(243, 69, 115);}
/* 主体 */
div#content {  padding: 10px;}
div#content div#word {  width: 90%;  margin: 30px auto;  -webkit-box-shadow: 0px 0px 6px #999;  -ms-box-shadow: 0px 0px 6px #999;  -moz-box-shadow: 0px 0px 6px #999;  -o-box-shadow: 0px 0px 6px #999;  box-shadow: 0px 0px 6px #999;  color: #212529;  letter-spacing: 0.1em;  font-size: 2em;  font-weight: 400;  line-height: 1.5;  padding: 8px;  /* 单词强制换行 */  word-break: break-word;  text-align: center;}
div#content div#deal {  text-align: center;}
div#content div#deal button {  display: inline-block;  margin: 5px 10px;  border-radius: 100%;  cursor: pointer;}
div#content div#deal button:first-child {  border: solid 3px #d3d6dd;  width: 60px;  height: 60px;  color: #204969;  font-size: 30px;  font-weight: 500;  background: white;}
div#content div#deal button:last-child {  width: 80px;  height: 80px;  color: white;  font-size: 30px;  font-weight: 700;  background: #e42c64;  -webkit-box-shadow: 0px 0px 6px #b52b65;  -ms-box-shadow: 0px 0px 6px #b52b65;  -moz-box-shadow: 0px 0px 6px #b52b65;  -o-box-shadow: 0px 0px 6px #b52b65;  box-shadow: 0px 0px 6px #b52b65;  border: none;}
div#content div#deal button:hover {  color: #333;}
div#content div#deal button:first-child:hover {  border-color: #e42c64;}
/* 尾 */footer {  padding: 10px 0px;}
footer p {  text-align: center;  color: #a0a4af;  font-size: 12px;  letter-spacing: 1.5px;  line-height: 24px;}
footer p a {  color: #a0a4af;}
footer p a:hover {  color: rgb(243, 69, 115);}
/* 媒体查询 */@media screen and (max-width:767px) {  div#content div#word {    font-size: 1.8em;  }
  div#container {    width: 98%;  }
  div#content div#word {    margin: 20px auto;  }
  div#container div#head nav.nav-flex a {    font-size: 14px;  }
  div#content div#deal button:first-child {    width: 50px;    height: 50px;  }
  div#content div#deal button:last-child {    width: 65px;    height: 65px;  }}

7、general.js

/* 获取文本盒子 */var word=document.getElementById("word");/* 复制 */function copy(){  var textArea = document.createElement("textarea");  textArea.innerHTML = word.innerText;  document.body.appendChild(textArea);  textArea.select();  document.execCommand('copy');  alert('复制成功:)');  textArea.parentNode.removeChild(textArea);}/* 切换句子 */function getData(){  var index = Math.floor(Math.random() * words.length);  word.innerText=words[index];}

8、gsc.js

var words=data.gsc;/* 切换句子 */function getData(){  var index = Math.floor(Math.random() * words.length);  var temp=words[index].split('&');  var content=temp[0]+'<br/>'+'<span>'+temp[1]+'</span>'  word.innerHTML=content;}getData();