618快到了送上自制前端小项目（html css js）_编写html、css和js代码,为某购物平台设计并实现一个618活动大促页,要求包含但不限(2)

        <kbd>S</kbd>
        <span class="sound">clap</span>
    </div>
    <div data-key="68" class="key">
        <kbd>D</kbd>
        <span class="sound">clap</span>
    </div>
    <div data-key="70" class="key">
        <kbd>F</kbd>
        <span class="sound">clap</span>
    </div>
    <div data-key="71" class="key">
        <kbd>G</kbd>
        <span class="sound">clap</span>
    </div>
    <div data-key="72" class="key">
        <kbd>H</kbd>
        <span class="sound">clap</span>
    </div>
    <div data-key="74" class="key">
        <kbd>J</kbd>
        <span class="sound">clap</span>
    </div>
    <div data-key="75" class="key">
        <kbd>K</kbd>
        <span class="sound">clap</span>
    </div>
    <div data-key="76" class="key">
        <kbd>L</kbd>
        <span class="sound">clap</span>
    </div>
    <div data-key="90" class="key">
        <kbd>Z</kbd>
        <span class="sound">clap</span>
    </div>
    <div data-key="88" class="key">
        <kbd>X</kbd>
        <span class="sound">clap</span>
    </div>
    <div data-key="67" class="key">
        <kbd>C</kbd>
        <span class="sound">clap</span>
    </div>
    <div data-key="86" class="key">
        <kbd>V</kbd>
        <span class="sound">clap</span>
    </div>
    <div data-key="66" class="key">
        <kbd>B</kbd>
        <span class="sound">clap</span>
    </div>
    <div data-key="78" class="key">
        <kbd>N</kbd>
        <span class="sound">clap</span>
    </div>
    <div data-key="77" class="key">
        <kbd>M</kbd>
        <span class="sound">clap</span>
    </div>
</div>
<div id='btn'>提交数据</div>
<audio data-key="81" src="sounds/clap.wav"></audio>

css:

*{
margin:0;
padding:0;
}
.top{
width:100%;
height:100px;
}
.top i{
font-size: 24px;
}
.top-left{
width:20%;
height:100%;
float:left;
text-align: center;
line-height: 100px;
position: relative;
}
.top-left .cls5{
position: absolute;
left:40px;
}
.top-middle{
width:50%;
height:100%;
float:left;
text-align: center;
line-height: 100px;
position:relative;
}
.top-middle .cls1{
position: absolute;
left:30px;
}
.top-middle .cls2{
position: absolute;
left:60px;
}
.top-middle .cls3{
position: absolute;
right:500px;
}
.top-middle .container{
width:300px;
height:40px;
border:1px solid whitesmoke;
border-radius: 10px;
position:absolute;
left:100px;
top:30px;
text-align: center;
line-height: 40px;
}
.top-middle .container .cls4{
position: absolute;
left:20px;
}
.top-right{
width:30%;
height:100%;
float:right;
}
.top-right ul{
list-style: none;
text-align: center;
height:100px;
line-height:100px ;
}
.top-right ul li{
float:right;
margin:0 20px 0 20px;
}

.bottom{
width:100%;
height:100px;
margin-top:710px;
}
.bottom i{
font-size: 24px;
}
.bottom-left{
width:20%;
height:100px;
line-height: 100px;
float:left;
text-align: center;
}
.bottom-left ul{
list-style: none;
}
.bottom-left ul li{
float:left;
margin:0 30px 0 30px;
}

.bottom-mid{
width:50%;
height:100px;
line-height: 100px;
float:left;
}
.bottom-mid ul{
list-style: none;
}
.bottom-mid ul li{
float:left;
margin: auto 50px;
}
.bot-mid-top{
width:100%;
height:60px;
text-align: center;
line-height: 50px;
}
.bot-mid-top .clf1{
margin-left:250px;
}
.bot-mid-bot{
width:100%;
height:40px;
line-height: 40px;
}
.bot-mid-bot .item{
width:80%;
border:1px solid #333;
border-radius: 3px;
height:9px;

margin-top:12px;
margin-left:100px;

}
.bottom-right{
width:30%;
height:100px;
line-height: 100px;
float:left;
}
.bottom-right ul{
list-style: none;
}
.bottom-right ul li{
float:left;
margin:0 30px 0 30px;
}
.bottom-right ul .clf2{
margin-left:200px;
}

js:

let audioArr = []

function removeClass(e) {
let key = document.querySelector(div[data-key="${e.keyCode})
let audio = document.querySelector(audio[data-key="${e.keyCode}"])
key.classList.remove(‘playing’)
audioArr.push(audio)
}

function playAudio(e) {
let key = document.querySelector(div[data-key="${e.keyCode})
let audio = document.querySelector(audio[data-key="${e.keyCode}"])
key.classList.add(‘playing’)
//audio.currentTime = 0; // 每次播放之后都使音频播放进度归零
if (!audio) return;
audio.play()
}

window.addEventListener(‘keydown’, e => playAudio(e))
window.addEventListener(‘keyup’, e => removeClass(e))

const btn = document.getElementById(‘btn’)

function Play() {
const self=this
const item1=setInterval(function(){
self.i++
console.log(self.i)
audioArr[self.i-2].play()
if(self.i>audioArr.length){
clearInterval(item1)
}
}, 200);
}

let obj={
i:1
}

function bind(){
Play.call(obj)
}
btn.addEventListener(“click”,bind)

---


## 2.图片自动消失



![](https://img-blog.csdnimg.cn/0d5fc98ec4d14a75a29f85cf7bca3690.gif)




> 
> 一张图片，在其右上角放置一个div
> 
> 
> ，分别得到那个元素，在div中插入数字
> 
> 
> 开启一个定时器，每隔一段时间减一。
> 
> 
> 直到为0.图片消失
> 
> 
> 

5

```

---

yy3.小轮播图

放置三张图片，移动到那个图片，

改变他的偏移量。

*{
	padding:0;
	margin:0;
	}
body,html{
	width:100%;
	 overflow:hidden;
	}
#wrap1{
	width:100%;
	position:absolute;
	bottom:0;
	left:0;
	text-align: center;
	}
#wrap1>img{
	width:64px;
	}
</style>
</head>
<body>
	<div id="wrap1">
		<img src="img/1.png" />
		<img src="img/2.png" />
		<img src="img/3.png" />
		<img src="img/4.png" />
		<img src="img/5.png" />
	</div>
<script type="text/javascript">
	window.onload=function(){
		var r=320
		var imgNodes=document.querySelectorAll("#wrap1>img")
		document.onmousemove=function(ev){
		ev=ev||event
		for(var i=0;i<imgNodes.length;i++){
var a= imgNodes[i].getBoundingClientRect().top+imgNodes[i].offsetHeight/2-ev.clientY
var b= imgNodes[i].getBoundingClientRect().right+ imgNodes[i].offsetWidth/2-ev.clientX
	var c=Math.sqrt(a*a+b*b)
			if(c>=r){
					c=r
					}
				 imgNodes[i].style.width=128-c*0.2+'px'
					}
				}
			}
</script>

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

if(c>=r){
				c=r
				}
			 imgNodes[i].style.width=128-c*0.2+'px'
				}
			}
		}

```

[外链图片转存中…(img-oF0zQhKI-1714224206585)]
[外链图片转存中…(img-vKRDbgXZ-1714224206585)]
[外链图片转存中…(img-drn1kFto-1714224206585)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取