**
适合刚学js小白熟悉运算符的一个小页
**
刚学习js的小白,对于运算符上手的没那么快的,可以着手尝试一下这种简单,对逻辑提升比较快的小页面
因为我也是一个萌新,只是感觉这个页面帮助很大,所以分享出来,只简化了js的代码,HTML和css部分代码比较冗余,比较乱,大佬勿喷,求指点
以下是css的代码
* {
padding: 0px;
margin: 0px;
}
html,body {
width: 100%;
height: 100%;
}
.back {
width: 100%;
height: 100%;
background-image: url(../img/bg1.jpg);
background-size: 100% 100%;
position: relative;
}
#piano {
width: 700px;
height: 390px;
position: absolute;
top: 0px;
left: 50%;
margin-left: -350px;
display: none;
z-index: 1;
}
.content {
width: 340px;
height: 340px;
position: absolute;
left: 50%;
margin-left: -170px;
}
.nav {
width: 100px;
height: 100px;
background-image: url(../img/2.jpg);
background-size: 100% 100%;
position: absolute;
left: 50%;
margin-left: -50px;
top: 50%;
margin-top: -50px;
}
.back>.content>ul>li {
width: 100px;
height: 100px;
background-image: url(../img/1.png);
background-size: 100% 100%;
position: absolute;
color: white;
list-style: none;
line-height: 100px;
font-size: 24px;
text-align: center;
}
.back>.content>ul>li:nth-child(1) {
top: 0px;
left: 0px;
}
.back>.content>ul>li:nth-child(2) {
left: 50%;
margin-left: -50px;
}
.back>.content>ul>li:nth-child(3) {
right: 0px;
}
.back>.content>ul>li:nth-child(4) {
top: 120px;
right: 0px;
}
.back>.content>ul>li:nth-child(5) {
bottom: 0px;
right: 0px;
}
.back>.content>ul>li:nth-child(6) {
left: 50%;
margin-left: -50px;
bottom: 0px;
}
.back>.content>ul>li:nth-child(7) {
left: 0px;
bottom: 0px;
}
.back>.content>ul>li:nth-child(8) {
left: 0px;
top: 50%;
margin-top: -50px;
}
.content1 {
height: 300px;
width: 672px;
background: white;
position: absolute;
top: 390px;
left: 50%;
margin-left: -336px;
}
.content1>ul>li {
list-style: none;
float: left;
width: 80px;
height: 300px;
border: 2px solid black;
text-align: center;
position: relative;
}
li>span {
width: 40px;
height: 150px;
background: black;
display: block;
position: absolute;
top: 0px;
right: -20px;
}
以下的是HTML的代码,有点混乱嘿嘿
<body>
<div class="back">
<div id="piano"></div>
<div class="content">
<div class="nav" id="btn"></div>
<ul>
<li class="key1">两只老虎</li>
<li class="key1">轨迹</li>
<li class="key1">小星星</li>
<li class="key1">粉刷匠</li>
<li class="key1">新年好</li>
<li class="key1">找朋友</li>
<li class="key1">世上只有</li>
<li class="key1">青花瓷</li>
</ul>
</div>
<div class="content1">
<ul>
<li class="key">do<span></span></li>
<li class="key">re<span></span></li>
<li class="key">mi</li>
<li class="key">fa<span></span></li>
<li class="key">sol<span></span></li>
<li class="key">la<span></span></li>
<li class="key">si</li>
<li class="key">do</li>
</ul>
</div>
</div>
<audio src="../mp3/1do.mp3"></audio>
<audio src="../mp3/2re.mp3"></audio>
<audio src="../mp3/3mi.mp3"></audio>
<audio src="../mp3/4fa.mp3"></audio>
<audio src="../mp3/5so.mp3"></audio>
<audio src="../mp3/6la.mp3"></audio>
<audio src="../mp3/7si.mp3"></audio>
<audio src="../mp3/8do.mp3"></audio>
以下是js代码,注释的是没有优化过的代码,主要是理清楚逻辑
<script>
var btn = document.getElementById("btn");
var lis = document.getElementsByClassName("key1");
var arr = ["../img/青花瓷.png", "../img/两只老虎.png", "../img/轨迹.png", "../img/小星星.png", "../img/粉刷匠.png",
"../img/新年好.png", "../img/找朋友.png", "../img/世上只有.png"
];
var piano = document.getElementById("piano");
var a = 0;
btn.onclick = function() {
var ran = parseInt((Math.random() * 20) + 16);//随机数
var rans = ran + a;
//转盘转到什么歌就出现什么歌谱
var timer1 = setInterval(function() {
for(var j = 0; j < 8; j++) {
if(rans % 8 == j) {
clearInterval(timer1);
piano.style.backgroundImage = "url(" + arr[j] + ")";
piano.style.display = "block";
piano.style.backgroundSize = "100% 100%";
}
}
}, 120 * rans);
//随机数控制转盘落点的定时器
var timer = setInterval(function() {
if(a == 8) {
a = 0;
}
ran--;
if(ran == 0) {
clearInterval(timer);
}
for(var i = 0; i < 8; i++) {
lis[i].style.opacity = "1";
}
lis[a++].style.opacity = "0.5";
}, 100);
}
//键盘的点击发出声音
var liss = document.getElementsByClassName("key");
var mp3 = document.getElementsByTagName("audio");
// window.οnkeydοwn=function(event){
// if(event.keyCode == 49){
// mp3[0].play();
// }else if(event.keyCode == 50){
// mp3[1].play();
// }else if(event.keyCode == 51){
// mp3[2].play();
// }else if(event.keyCode == 52){
// mp3[3].play();
// }else if(event.keyCode == 53){
// mp3[4].play();
// }else if(event.keyCode == 54){
// mp3[5].play();
// }else if(event.keyCode == 55){
// mp3[6].play();
// }else if(event.keyCode == 56){
// mp3[7].play();
// }
// }
window.onkeydown = function(event) {
for(var k = 49; k < 57; k++) {
if(event.keyCode == k) {
mp3[k - 49].play();
liss[k - 49].style.opacity = "0.5";
}
}
}
// window.οnkeyup=function(event){
// if(event.keyCode==49){
// mp3[0].pause();
// mp3[0].currentTime = 0;
// }else if(event.keyCode==50){
// mp3[1].pause();
// mp3[1].currentTime = 0;
// }else if(event.keyCode==51){
// mp3[2].pause();
// mp3[2].currentTime = 0;
// }else if(event.keyCode==52){
// mp3[3].pause();
// mp3[3].currentTime = 0;
// }else if(event.keyCode==53){
// mp3[4].pause();
// mp3[4].currentTime = 0;
// }else if(event.keyCode==54){
// mp3[5].pause();
// mp3[5].currentTime = 0;
// }else if(event.keyCode==55){
// mp3[6].pause();
// mp3[6].currentTime = 0;
// }else if(event.keyCode==56){
// mp3[7].pause();
// mp3[7].currentTime = 0;
// }
// }
window.onkeyup = function(event) {
for(var k = 49; k < 57; k++) {
if(event.keyCode == k) {
mp3[k - 49].pause();
mp3[k - 49].currentTime = 0;
liss[k - 49].style.opacity = "1";
}
}
}
piano.onclick = function() {
piano.style.display = "none";
}
</script>
文件和页面
https://download.csdn.net/download/qq_45187600/13489364