单击此处返回首页
一个简单的html单页导航/音乐播放器
网上随便找了下，然后自行修改了一些东西完成的，可以拿去作为导航页使用，也可以拿去做音乐播放器来用，也能当成图片随机滚动页面来用，总之很多用途就不全列举了
截图
演示站点，单击这行文本即可前往
<!DOCTYPE html>
<html lang="zh-CN" id="bgimg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<!-- 网页标题 -->
<title>测试text</title>
<meta name="description" content="测试text">
<meta name="keywords" content="测试text">
<link rel="icon" href="https://i.imgtg.com/2022/05/22/hAAMq.png" mce_href="/favicon.ico" type="image/x-icon">
<!-- css引用
调用压缩包中css文件夹下的3个css -->
<link rel="stylesheet" type="text/css" href="https://keli.rth7.com/text1/css/buttons.css">
<link rel="stylesheet" type="text/css" href="https://keli.rth7.com/text1/css/showcase.css">
<link type="text/css" rel="stylesheet" href="https://keli.rth7.com/text1/css/style.css">
<meta name="keywords" content="YAN RU">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="referrer" content="no-referrer">
<div style="text-align:center;clear:both">
</div>
<div class="tooltips">
<span>
</span>
</div>
</head>
<body>
<div id="top">
<main id="top_main">
<!-- 上方的旋转头图，可自改
调用压缩包中图片位置为img/tx2.png -->
<div id="top_logo"><img src="https://i.imgtg.com/2022/05/22/hAAMq.png" onmouseover="mouseOver()" onmouseout="mouseOut()" id="mainimg"></div>
<!-- 头图下方欢迎标语图片
调用压缩包中图片位置为img/toptitle01.png -->
<div id="top_title"><img id="top_title01" alt src="https://i.imgtg.com/2022/05/22/hAZHr.png">
<!-- 播放的音频，可自改，调用压缩包的位置为audio/textaudio.mp3 --><audio autoplay="autoplay" controls="controls"loop="loop" preload="auto" src="https://pan.bilnn.cn/api/v3/file/sourcejump/2lEOWYSG/bEPiLmNA5K5TtlkNmoNP1GHH26HBWJn4hw3NIRXzX3A*"> 你的浏览器版本太低，不支持audio标签 </audio>
<br class="top_hr_style01">
</div><br/>
<div class="showcase-examples l-over l-center">
<!-- 按钮，看着点改就行 -->
<a href="https://keli.rth1.one" title="回到首页" class="button button-rounded button-plain button-small-caps button-border" target="_blank">回到首页</a>
<a href="https://pan.bilnn.cn/s/PdYJU5" title="下载背景音乐" class="button button-rounded button-plain button-small-caps button-border" target="_blank">下载背景音乐</a>
<a href="https://keli.rth1.com/text1/tp.html" title="查看背景图片" class="button button-rounded button-plain button-small-caps button-border" target="_blank">查看背景图片</a>
</div>
</main>
</div>
<!-- 时间统计，有bug勿用
<div class="showTime"></div>
<script>
var t = null;
t = setTimeout(time, 1000);
function time() {
clearTimeout(t);
dt = new Date();
var y = dt.getFullYear();
var mt = dt.getMonth() + 1;
var day = dt.getDate();
var h = dt.getHours();
var m = dt.getMinutes();
var s = dt.getSeconds();
document.querySelector(".showTime").innerHTML =
"当前时间为:" +
y +
"年" +
mt +
"月" +
day +
"日" +
h +
"时" +
m +
"分" +
s +
"秒";
t = setTimeout(time, 1000);
}
</script>
-->
<!-- 播放组件，存在一些问题，但是部分功能需使用此js，调用压缩包位置为js/player.js -->
<script id="ilt" src="https://keli.rth7.com/text1/js/player.js" key="a948258de7284da8beb4f44818f93cef"></script>
</span>
</footer>
</body>
<!-- 旋转头图控制组件，下方两个建议相同
调用压缩包中图片位置为img/tx2.png -->
<script>
function mouseOver(){
document.getElementById("mainimg").src="https://i.imgtg.com/2022/05/22/hAAMq.png";//鼠标悬浮时的旋转图标
}
function mouseOut()
{
document.getElementById('mainimg').src ="https://i.imgtg.com/2022/05/22/hAAMq.png"//默认的旋转图标
}
</script>
<!-- 背景图，可自改，调用压缩包中图片位置为img/bg1.png - bg12.png
下方的window.setTimeout(function(){change()},5000);中跟着的数据7000可改，是切换延迟，单位是毫秒 -->
<script type="text/javascript">
function change(){
var bodyBgs = [];
bodyBgs[1] = "https://i.imgtg.com/2022/04/04/kFNmt.png";
bodyBgs[2] = "https://i.imgtg.com/2022/04/04/kFhiC.png";
bodyBgs[3] = "https://i.imgtg.com/2022/04/04/kFzCN.png";
bodyBgs[4] = "https://i.imgtg.com/2022/04/04/kFkAa.png";
bodyBgs[5] = "https://i.imgtg.com/2022/04/04/kFo4b.png";
bodyBgs[6] = "https://i.imgtg.com/2022/04/04/kFaiP.png";
bodyBgs[7] = "https://i.imgtg.com/2022/04/04/kFM36.png";
bodyBgs[8] = "https://i.imgtg.com/2022/04/04/kzCrD.png";
bodyBgs[9] = "https://i.imgtg.com/2022/04/04/kzuV1.png";
bodyBgs[10] = "https://i.imgtg.com/2022/04/04/kzXgG.png";
bodyBgs[11] = "https://i.imgtg.com/2022/04/04/kz8bM.png";
bodyBgs[12] = "https://i.imgtg.com/2022/04/04/kz9iq.png";
var randomBgIndex = Math.round( Math.random() * 12 );
var img1= document.getElementById('bgimg');
img1.style.backgroundImage='url(' + bodyBgs[randomBgIndex] + ')';
window.setTimeout(function(){change()},7000);
}
change();
</script>
<!-- 雪花效果js调用压缩包位置为js/snow.min.js -->
<script type="text/javascript" src="https://keli.rth7.com/text1/js/snow.min.js"></script>
<script type="text/javascript">
createSnow('src/', 60);
</script>
<div class="showTime"></div>
</html>
把代码以及调用的css，js，图片，音频下载到本地请看下方
单击此处去下载
单击此处返回顶部