JavaScript前端后端速通 - 全景圖【核心版】
HTML源碼（主頁）
<!DOCTYPE html>
<html lang="zh-cn">
<head>
??<meta charset="UTF-8">
??<meta http-equiv="X-UA-Compatible" content="IE=Edge">
??<meta name="viewport" content="width=device-width, initial-scale=1.0">
??<title>Visual Studio Code 做的網(wǎng)頁主頁</title>
??<style>
????.a {
??????color: rgb(0, 150, 255);
??????user-select: none;
????}
?????
????.b {
??????color: rgb(0, 0, 0, 0);
??????user-select: none;
????}
?????
????.c {
??????height: 500px;
??????user-select: none;
????}
?????
????.d {
??????color: rgb(0, 190, 255);
??????user-select: none;
????}
?????
????.e {
??????color: rgb(0, 140, 255);
??????user-select: none;
????}
?????
????.f {
??????color: rgb(0, 0, 0, 0);
??????user-select: none;
????}
?????
????.h1z1 {
??????display: block;
??????font-size: 2em;
??????margin-block-start: 0.67em;
??????margin-block-end: 0.67em;
??????margin-inline-start: 0px;
??????margin-inline-end: 0px;
??????font-weight: bold;
??????user-select: none;
??????color: rgb(0, 190, 255);
??????width: 425px;
????}
?????
????.h2z {
??????display: block;
??????font-size: 1.5em;
??????margin-block-start: 0.83em;
??????margin-block-end: 0.83em;
??????margin-inline-start: 0px;
??????margin-inline-end: 0px;
??????font-weight: bold;
??????user-select: none;
??????color: rgb(0, 190, 255);
??????width: 500px;
????}
?????
????.h3z1 {
??????display: block;
??????font-size: 1.17em;
??????margin-block-start: 1em;
??????margin-block-end: 1em;
??????margin-inline-start: 0px;
??????margin-inline-end: 0px;
??????font-weight: bold;
??????user-select: none;
??????color: rgb(0, 190, 255);
??????width: 342px;
????}
?????
????.h3z2 {
??????display: block;
??????font-size: 1.17em;
??????margin-block-start: 1em;
??????margin-block-end: 1em;
??????margin-inline-start: 0px;
??????margin-inline-end: 0px;
??????font-weight: bold;
??????user-select: none;
??????color: rgb(0, 190, 255);
??????width: 211px;
????}
?????
????#musicplayer1 {
??????position: absolute;
??????left: -9999px;
????}
?????
????#musicplayer2 {
??????position: absolute;
??????left: -9999px;
????}
?????
????#musicplayer3 {
??????position: absolute;
??????left: -9999px;
????}
?????
????#musicplayer4 {
??????position: absolute;
??????left: -9999px;
????}
?????
????#musicplayer5 {
??????position: absolute;
??????left: -9999px;
????}
?????
????#musicplayer6 {
??????position: absolute;
??????left: -9999px;
????}
?????
????#musicplayer7 {
??????position: absolute;
??????left: -9999px;
????}
?????
????#musicplayer8 {
??????position: absolute;
??????left: -9999px;
????}
?????
????#musicplayer9 {
??????position: absolute;
??????left: -9999px;
????}
?????
????#musicplayer10 {
??????position: absolute;
??????left: -9999px;
????}
?????
????#musicplayer11 {
??????position: absolute;
??????left: -9999px;
????}
?????
????#musicplayer12 {
??????position: absolute;
??????left: -9999px;
????}
??</style>
</head>
<body style="margin: 100px;">
??<bq class="f">sxxyrry/是星星與然然呀</bq>
??<script>
????//禁用右鍵（防止右鍵查看源代碼）?
????window.oncontextmenu = function() {
????????return false;
??????}
??????//禁止任何鍵盤敲擊事件（防止F12和shift+ctrl+i調(diào)起開發(fā)者工具）?
????window.onkeydown = window.onkeyup = window.onkeypress = function() {
????????window.event.returnValue = false;
????????return false;
??????}
??????//如果用戶在工具欄調(diào)起開發(fā)者工具，那么判斷瀏覽器的可視高度和可視寬度是否有改變，如有改變則關(guān)閉本頁面
????var h = window.innerHeight,
??????w = window.innerWidth;
????window.onresize = function() {
??????if (h != window.innerHeight || w != window.innerWidth) {
????????window.close();
????????window.location = "about:blank";
??????}
????}
??</script>
??<div class="b">ZZCM(16jz):E698AFE6989FE6989FE4BA8EE784B6E784B6E59180 SM:E698AFE6989FE6989FE4BA8EE784B6E784B6E59180 12345wjsxx</div>
??<h1>
????<div class="a">————————————————————————</div>
??</h1>
??<h1 class="d"> 你好，歡迎來到 Visual Studio Code 做的網(wǎng)頁主頁</h1>
??<h1>
????<div class="a">————————————————————————</div>
??</h1>
??<p class="a">哈哈</p>
??<h1>
????<div class="a">————————————————————————</div>
??</h1>
??<h2 class="a"> 制作者 bilibili 主頁鏈接:<a class="e" href="https://space.bilibili.com/1532090388?spm_id_from=333.1007.0.0";>https://space.bilibili.com/1532090388?spm_id_from=333.1007.0.0<;/a></h2>
??<h2 class="a">我的 bilibili 名字:是星星與然然呀</h2>
??<div class="b">ZZCM(16jz):E698AFE6989FE6989FE4BA8EE784B6E784B6E59180 SM:E698AFE6989FE6989FE4BA8EE784B6E784B6E59180 12345wjsxx</div>
??<img class="c" draggable="false" src="tp\wdtx\wdtx.png">
??<h1>
????<div class="a">————————————————————————</div>
??</h1>
??<h1>
????<a class="d" href="Visual Studio Code 做的網(wǎng)頁第一頁.html">第一頁</a>
??</h1>
??<div class="b">ZZCM(16jz):E698AFE6989FE6989FE4BA8EE784B6E784B6E59180 SM:E698AFE6989FE6989FE4BA8EE784B6E784B6E59180 12345wjsxx</div>
??<h1>
????<a class="d" href="Visual Studio Code 做的網(wǎng)頁第二頁.html">第二頁</a>
??</h1>
??<div class="b">ZZCM(16jz):E698AFE6989FE6989FE4BA8EE784B6E784B6E59180 SM:E698AFE6989FE6989FE4BA8EE784B6E784B6E59180 12345wjsxx</div>
??<h1>
????<a class="d" href="Visual Studio Code 做的網(wǎng)頁第三頁.html">第三頁</a>
??</h1>
??<h1>
????<div class="a">————————————————————————</div>
??</h1>
??<details>
????<summary class="h1z1">
??????休閑區(qū)(點擊顯示/隱藏休閑區(qū))
????</summary>
????<h2>
??????<div class="a">————————————————————————————————</div>
????</h2>
????<details>
??????<summary class="h3z1">
????????點一次就加一(點擊顯示/隱藏點擊數(shù))
??????</summary>
??????<h4 class="a">
????????點擊數(shù)<button id="dianjishu" onclick="dianji()" class="d">0</button>
????????<script>
??????????function dianji() {
????????????let dianjishubiaoqian = window.document.getElementById('dianjishu');
????????????let dianjishu = parseInt(dianjishubiaoqian.innerText);
????????????let xinshuzi = dianjishu + 1;
????????????dianjishubiaoqian.innerText = xinshuzi;
????????????return
??????????}
????????</script>
??????</h4>
????</details>
????<h2>
??????<div class="a">————————————————————————————————</div>
????</h2>
????<details>
??????<summary class="h3z2">
????????歌單(點擊顯示/隱藏音樂)
??????</summary>
??????<button id="playButton1" class="d">1.糯米Nomi - 調(diào)查中-《開端》bgm歌詞版</button>
??????<audio id="musicplayer1" src="yy\糯米Nomi - 調(diào)查中-《開端》bgm歌詞版.flac" controls></audio>
??????<div class="b">www.wwww.www</div>
??????<button id="playButton2" class="d">2.三無MarBlue - 病名は愛だった（Cover 鏡音リン ／ 鏡音レン）</button>
??????<audio id="musicplayer2" src="yy\三無MarBlue - 病名は愛だった（Cover 鏡音リン ／ 鏡音レン）.flac" controls></audio>
??????<div class="b">www.wwww.www</div>
??????<button id="playButton3" class="d">3.大課間跑步音樂</button>
??????<audio id="musicplayer3" src="\大課間跑步音樂.flac" controls></audio>
??????<div class="b">www.wwww.www</div>
??????<button id="playButton4" class="d">4.三無MarBlue - 〇（cover 洛天依）</button>
??????<audio id="musicplayer4" src="yy\三無MarBlue - 〇（cover 洛天依）.flac" controls></audio>
??????<div class="b">www.wwww.www</div>
??????<button id="playButton5" class="d">5.愛不會絕跡</button>
??????<audio id="musicplayer5" src="yy\愛不會絕跡.flac" controls></audio>
??????<div class="b">www.wwww.www</div>
??????<button id="playButton6" class="d">6.愛人錯過（0.8x）</button>
??????<audio id="musicplayer6" src="yy\愛人錯過（0.8x）.flac" controls></audio>
??????<div class="b">www.wwww.www</div>
??????<button id="playButton7" class="d">7.Lemon</button>
??????<audio id="musicplayer7" src="yy\Lemon.flac" controls></audio>
??????<div class="b">www.wwww.www</div>
??????<button id="playButton8" class="d">8.Loser</button>
??????<audio id="musicplayer8" src="yy\Loser.flac" controls></audio>
??????<div class="b">www.wwww.www</div>
??????<button id="playButton9" class="d">9.AIR STARS - 玫瑰少年</button>
??????<audio id="musicplayer9" src="yy\AIR STARS - 玫瑰少年跡.flac" controls></audio>
??????<div class="b">www.wwww.www</div>
??????<button id="playButton10" class="d">10.S.T.A.Y. (Delta Heavy Tribute)</button>
??????<audio id="musicplayer10" src="yy\S.T.A.Y. (Delta Heavy Tribute).flac" controls></audio>
??????<div class="b">www.wwww.www</div>
??????<button id="playButton11" class="d">11.夢心 - lifeline</button>
??????<audio id="musicplayer11" src="yy\夢心 - lifeline.flac" controls></audio>
??????<div class="b">www.wwww.www</div>
??????<button id="playButton12" class="d">12.約定</button>
??????<audio id="musicplayer12" src="yy\約定.flac" controls></audio>
??????<script>
????????//創(chuàng)建變量1
????????var playButton1 = document.getElementById('playButton1');
????????var musicplayer1 = document.getElementById('musicplayer1');
????????var playButton2 = document.getElementById('playButton2');
????????var musicplayer2 = document.getElementById('musicplayer2');
????????var playButton3 = document.getElementById('playButton3');
????????var musicplayer3 = document.getElementById('musicplayer3');
????????var playButton4 = document.getElementById('playButton4');
????????var musicplayer4 = document.getElementById('musicplayer4');
????????var playButton5 = document.getElementById('playButton5');
????????var musicplayer5 = document.getElementById('musicplayer5');
????????var playButton6 = document.getElementById('playButton6');
????????var musicplayer6 = document.getElementById('musicplayer6');
????????var playButton7 = document.getElementById('playButton7');
????????var musicplayer7 = document.getElementById('musicplayer7');
????????var playButton8 = document.getElementById('playButton8');
????????var musicplayer8 = document.getElementById('musicplayer8');
????????var playButton5 = document.getElementById('playButton9');
????????var musicplayer5 = document.getElementById('musicplayer9');
????????var playButton6 = document.getElementById('playButton10');
????????var musicplayer6 = document.getElementById('musicplayer10');
????????var playButton7 = document.getElementById('playButton11');
????????var musicplayer7 = document.getElementById('musicplayer11');
????????var playButton8 = document.getElementById('playButton12');
????????var musicplayer8 = document.getElementById('musicplayer12');
????????//創(chuàng)建變量2
????????function stopAllMusic() {
??????????musicplayer1.pause();
??????????musicplayer2.pause();
??????????musicplayer3.pause();
??????????musicplayer4.pause();
??????????musicplayer5.pause();
??????????musicplayer6.pause();
??????????musicplayer7.pause();
??????????musicplayer8.pause();
??????????musicplayer9.pause();
??????????musicplayer10.pause();
??????????musicplayer11.pause();
??????????musicplayer12.pause();
????????}
????????//換歌
????????playButton1.addEventListener('click', function() {
??????????stopAllMusic();
??????????if (musicplayer1.paused) {
????????????musicplayer1.play();
??????????} else {
????????????musicplayer1.pause();
??????????}
????????});
????????playButton2.addEventListener('click', function() {
??????????stopAllMusic();
??????????if (musicplayer2.paused) {
????????????musicplayer2.play();
??????????} else {
????????????musicplayer2.pause();
??????????}
????????});
????????playButton3.addEventListener('click', function() {
??????????stopAllMusic();
??????????if (musicplayer3.paused) {
????????????musicplayer3.play();
??????????} else {
????????????musicplayer3.pause();
??????????}
????????});
????????playButton4.addEventListener('click', function() {
??????????stopAllMusic();
??????????if (musicplayer4.paused) {
????????????musicplayer4.play();
??????????} else {
????????????musicplayer4.pause();
??????????}
????????});
????????playButton5.addEventListener('click', function() {
??????????stopAllMusic();
??????????if (musicplayer5.paused) {
????????????musicplayer5.play();
??????????} else {
????????????musicplayer5.pause();
??????????}
????????});
????????playButton6.addEventListener('click', function() {
??????????stopAllMusic();
??????????if (musicplayer6.paused) {
????????????musicplayer6.play();
??????????} else {
????????????musicplayer6.pause();
??????????}
????????});
????????playButton7.addEventListener('click', function() {
??????????stopAllMusic();
??????????if (musicplayer7.paused) {
????????????musicplayer7.play();
??????????} else {
????????????musicplayer7.pause();
??????????}
????????});
????????playButton8.addEventListener('click', function() {
??????????stopAllMusic();
??????????if (musicplayer8.paused) {
????????????musicplayer8.play();
??????????} else {
????????????musicplayer8.pause();
??????????}
????????});
????????playButton9.addEventListener('click', function() {
??????????stopAllMusic();
??????????if (musicplayer9.paused) {
????????????musicplayer9.play();
??????????} else {
????????????musicplayer9.pause();
??????????}
????????});
????????playButton10.addEventListener('click', function() {
??????????stopAllMusic();
??????????if (musicplayer10.paused) {
????????????musicplayer10.play();
??????????} else {
????????????musicplayer10.pause();
??????????}
????????});
????????playButton11.addEventListener('click', function() {
??????????stopAllMusic();
??????????if (musicplayer11.paused) {
????????????musicplayer11.play();
??????????} else {
????????????musicplayer11.pause();
??????????}
????????});
????????playButton12.addEventListener('click', function() {
??????????stopAllMusic();
??????????if (musicplayer12.paused) {
????????????musicplayer12.play();
??????????} else {
????????????musicplayer12.pause();
??????????}
????????});
????????//循環(huán)
????????musicplayer1.addEventListener('ended', function() {
??????????musicplayer1.currentTime = 0;
??????????musicplayer1.play();
????????});
????????musicplayer2.addEventListener('ended', function() {
??????????musicplayer2.currentTime = 0;
??????????musicplayer2.play();
????????});
????????musicplayer3.addEventListener('ended', function() {
??????????musicplayer3.currentTime = 0;
??????????musicplayer3.play();
????????});
????????musicplayer4.addEventListener('ended', function() {
??????????musicplayer4.currentTime = 0;
??????????musicplayer4.play();
????????});
????????musicplayer5.addEventListener('ended', function() {
??????????musicplayer5.currentTime = 0;
??????????musicplayer5.play();
????????});
????????musicplayer6.addEventListener('ended', function() {
??????????musicplayer6.currentTime = 0;
??????????musicplayer6.play();
????????});
????????musicplayer7.addEventListener('ended', function() {
??????????musicplayer7.currentTime = 0;
??????????musicplayer7.play();
????????});
????????musicplayer8.addEventListener('ended', function() {
??????????musicplayer8.currentTime = 0;
??????????musicplayer8.play();
????????});
????????musicplayer9.addEventListener('ended', function() {
??????????musicplayer9.currentTime = 0;
??????????musicplayer9.play();
????????});
????????musicplayer10.addEventListener('ended', function() {
??????????musicplayer10.currentTime = 0;
??????????musicplayer10.play();
????????});
????????musicplayer11.addEventListener('ended', function() {
??????????musicplayer11.currentTime = 0;
??????????musicplayer11.play();
????????});
????????musicplayer12.addEventListener('ended', function() {
??????????musicplayer12.currentTime = 0;
??????????musicplayer12.play();
????????});
??????</script>
????</details>
??</details>
??<h1>
????<div class="a">————————————————————————</div>
??</h1>
??<h1 class="a">拜拜</h1>
??<div class="b">ZZCM(16jz):E698AFE6989FE6989FE4BA8EE784B6E784B6E59180 SM:E698AFE6989FE6989FE4BA8EE784B6E784B6E59180 12345wjsxx</div>
??<bq class="f">sxxyrry/是星星與然然呀</bq>
</body>
</html>
