基于typecho的页面功能，进行点击按钮随机抽取歌单的简单前端开发

uranium92

2022 年 11 月 17 日

388 次浏览

2 条评论

2130字数

网站运营

重写了92的音乐电台页面！

试玩：https://uranium92.top/index.php/fm-old.html
（目前是隐藏界面了捏）

基本思路

之前我的实现思路和一言是一样的，通过网页刷新随机呈现每一次进入网页的内容
但是，在我们更换的新的主题外观之后，网页刷新会有动画，之前的方式就显得不太优雅了
Nicebowl酱教我说，typecho页面中可以通过!!!......!!!的格式插入html代码

这里，我们希望实现的是通过简单的代码编写，在页面上展示一个文本框和一个按钮。每当我们点击按钮，网页就会通过刷新以外的其他方式在文本框中呈现歌单中的随机文本。

失败的尝试

起初，我想把歌单的文本文件放在网站根目录下，然后通过前后端之间的交互进行随机
但是目前还没学会这门技术...所以最后是完全在网页前端写了一个很蠢的实现方式

代码

第一部分

1.定义按钮样式
参考的是https://www.runoob.com/css3/css3-buttons.html
2.div标签使描述文本居中呈现

!!!
<style>
.button {
    background-color: white;
    color: black;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 4px;
    cursor: pointer;
        
    border: 2px solid #555555;
    border-radius: 8px;
}
</style>
<div align="center">
<p>随机呈现歌单中的一首歌曲：</p>
<p>老二刺螈了（</p>
</div>
!!!

第二部分

1.定义Num函数：随机在列表中抽取一个字符串
参考了https://www.codeleading.com/article/47684722276/
https://www.ikxin.com/php-randomly-reads-txt.html
和Nicebowl酱的https://nicebowl.fun/5
2.使用input标签呈现函数输出
其中，placeholder为默认文本，style中，border:0是去边框，text-align:center是居中呈现，width:100%是自适应
3.使用预定义的样式绘制按钮，并且使用onclick实现点击按钮运行函数的需求

!!!
<script>
function Num()
{
var clas=['《橙子汽水》-ChiliChill', '《秋天的第一场雨真让人矫情》-ChiliChill', '《半醒》-ChiliChill', '《丑马》-ChiliChill', '《万一对了呢》-ChiliChill', '《夜间出租车》-ilem', '《梦良衣》-ilem', '《泥汤》-ilem', '《白鸟过河滩》-ilem', '《世末歌者》-COP', '《为谁而为》-COP', '《10p.m.》-COP', '《hello&bye,days》-COP', '《凉雨》-COP', '《灰烬》-COP', '《灼之花》-COP', '《Reeeee》-COP', '《哀歌》-阿良良木健', '《黑血症》-阿良良木健', '《春风来》-阿良良木健', '《白夜梦》-阿良良木健', '《寄明月》-T2O', '《琴弦上》-T2O', '《夜笙歌》-T2O', '《十三月》-闹闹', '《与星之约》-闹闹', '《青》-Hitorie', '《SLEEPWALK》-Hitorie', '《Night Diver》-三浦春马', '《黑凤梨》-z新豪', '《东京不太热》-z新豪', '《干物女》-z新豪', '《布衣》-z新豪', '《万能诊听器》-z新豪', '《红丝绒蛋糕》-食己z', '《夜苏打》-食己z','《MILABO》-ずっと真夜中でいいのに','《残機》-ずっと真夜中でいいのに'];
    
var n = clas.length; 
x = Math.floor(Math.random()*(n-1)); 
document.getElementById("field").value=clas[x];
}
</script>
<div align="center"><blockquote><strong><input type="text" id="field" placeholder="点击按钮刷新" style="border:0;text-align:center;width:100%;"></strong></blockquote></div><br>
<div align="center"><button onclick="Num()" class="button">换一首</button></div>
!!!

最后把两部分依次放进页面，就可以得到“92的音乐电台”了