20个JavaScript开发案列（二）
相册选择功能
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>相册选择功能</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
.big{
width: 415px;
height: 400px;
}
.small img{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div>
<img src="../../images/flex-02.jpg" alt="" class="big" id="big">
</div>
<div class="smal">
<img src="../../images/flex-02.jpg" alt="">
<img src="../../images/flex-06.jpg" alt="">
<img src="../../images/flex-07.jpg" alt="">
<img src="../../images/flex-08.jpg" alt="">
</div>
<script type="text/javascript">
'user strict';
let big=document.getElementById('big');
let img=document.getElementsByTagName('img');
for(let i=1;i<img.length;++i){
img[i].onmouseover=function () {
big.src=this.src;
this.style.border='5px solid red';
}
img[i].onmouseout=function () {
this.style.border='none';
}
}
</script>
</body>
</html>
敏感词过滤
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>敏感词过滤</title>
</head>
<body>
<h2>敏感词过滤</h2>
<p>
<textarea name="" id="area" cols="30" rows="10"></textarea>
</p>
<p>
<input type="submit" value=" 发布" id="input">
</p>
<p id="res"></p>
<script>
let area=document.getElementById('area');
let input=document.getElementById('input');
let res=document.getElementById('res');
let reg=/金三胖|妈的/g; // 全文查找出现的所有匹配字符
input.onclick=function(){
let newVue=area.value.replace(reg,'*');//将敏感词变为*
res.innerText=newVue;//改变发布值
}
</script>
</body>
</html>
进度条效果
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>进度条效果</title>
<style type="text/css">
.fa{
width: 400px;
margin-bottom: 30px;
border:1px solid red;
}
.son{
width: 0;/* 设置为零 ，便于后期制作进度条前进特效*/
height: 40px;
background-color: #f0f;
text-align: center;
line-height: 40px;
}
</style>
</head>
<body>
<div class="fa">
<div class="son">
<span>0</span><span>%</span>
</div>
</div>
<button id="but">安装</button>
<script type="text/javascript">
//利用定时器来进行递增操作（改变width的值即可）
// 当变量达到400px时，停止定时器
let but=document.getElementById('but');
let div=document.getElementsByTagName('div');
let span=document.getElementsByTagName('span');
let timer=null;
but.onclick=function(){
let num=0;
if(timer===null){
timer=setInterval(()=>{
num+=1;//宽度
//改变进度条宽度
div[1].style.width=num+'px';
//改变百分比
span[0].innerText=Math.ceil(num/400*100);
if(num===400){
//达到设定的宽度,停止计时
clearInterval(timer);
}
},10);
}
}
</script>
</body>
</html>
返回首屏
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>返回首屏</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
.content{
height: 2000px;
}
.goTop{
width: 100px;
height: 100px;
background-color: #bbb;
text-align: center;
line-height: 100px;
position: fixed;
bottom: 100px;
right: 20px;
display: none;
}
</style>
</head>
<body>
<div class="content">
<h2>返回首屏</h2>
<div class="goTop">返回</div>
</div>
<script type="text/javascript">
let goTop=document.getElementsByClassName('goTop')[0];
window.onscroll=function(){
//当滑动事件发生时
// 得到滑动条距离顶部的距离
let res=document.body.scrollTop||document.documentElement.scrollTop;
console.log(res);
if(res>=400){
//大于4或等于00返回块出现
goTop.style.display='block';
}else{
goTop.style.display='none';
}
}
goTop.onclick=function(){
//点击返回块，滑动条回到顶部
document.body.scrollTop=0;
document.documentElement.scrollTop=0;
}
</script>
</body>
</html>
电影票选座
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>电影票选座</title>
<style type="text/css">
body,ul{
margin: 0;
padding: 0;
}
/* .clearfix::after{
content: '';
display: block;
clear: both;
} */
ul{
width: 560px;
border: 3px solid #eee;
margin: 0 auto;
list-style: none;
}
li{
width: 80px;
height: 40px;
background-color: #ccc;
border: 1px solid #abc;
float: left;
margin: 5px;
cursor: pointer;
}
div{
width: 280px;
height: 90px;
border: 1px solid #ccc;
margin: 0 auto;/* 居中 */
text-align: center;
line-height: 90px;
color: #333;
}
.click{
font-size: 10px;
text-align: center;
line-height: 40px;
font-family: '仿宋';
font-weight: bold;
color: #333;
background: orange;
border: 1px solid red;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<span style="clear: both; display: block;"></span>
<div>屏幕中央</div>
</ul>
<script type="text/javascript">
'user strict';
let lis=document.getElementsByTagName('li');
for(let i=0;i<lis.length;++i){
lis[i].onclick=function(){
let res=this.getAttribute('class');//得到类名，空为null
console.log(res);
if(!res){
this.setAttribute('class','click');
this.innerText='座位已选';
}else{
this.setAttribute('class','');
this.innerText='';
}
}
}
</script>
</body>
</html>
移动的小盒
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>移动的小盒</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#div {
width: 100px;
height: 100px;
background-color: #f00;
position: absolute;
/* left:100px; */
}
button {
position: relative;
top: 120px;
}
</style>
</head>
<body>
<div id="div"></div>
<button>点击开始</button>
<button>点击停止</button>
<script type="text/javascript">
'user strict';
let buts=document.getElementsByTagName('button');
let dic=document.getElementById('div');
let body=document.body;
let num=0;
let timer=null;
buts[0].onclick=function () {
let speed=10;//设置速度为10
if(timer===null) {
timer=setInterval(()=>{
//定时器
num+=speed;//位移
div.style.left=num+'px';//设置位移
console.log(body.offsetWidth);
console.log(div.offsetWidth);
// num>body.offsetWidth-div.offsetWidth 当到达右端时
// num<=0 到达左端时
if(num>body.offsetWidth-div.offsetWidth||num<=0){
speed=-speed;
}
},100);
}
}
buts[1].onclick=function(){
clearInterval(timer);
timer=null;
}
</script>
</body>
</html>
鼠标绑定小盒子
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标绑定小盒子</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: #f0f;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="div"></div>
<script type="text/javascript">
let div=document.getElementById('div');
document.onmousemove=function(e){
let event=e||window.event;
console.log(event);
//使小盒子位于鼠标中央
div.style.left=event.clientX-div.clientWidth/2+'px';
div.style.top=event.clientY-div.clientWidth/2+'px';
}
</script>
</body>
</html>
学员信息表
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学员信息表</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#app {
width: 600px;
margin: 100px auto 0;
}
table {
text-align: center;
width: 600px;
margin-top: 10px;
border: 1px solid #ddd;
}
tr {
background-color: aqua;
}
</style>
</head>
<body>
<div id="app">
<fieldset>
<legend>学生录入系统</legend>
<p>
<span>姓名：</span>
<input type="text" name="username" id="username">
</p>
<p>
<span>年龄：</span>
<input type="text" name="age" id="age">
</p>
<p>
<span>性别：</span>
<select name="sex" id="sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
</p>
<p>
<span>手机：</span>
<input type="text" name="phone" class="phone">
</p>
<p>
<button id="but">确认提交</button>
</p>
</fieldset>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>手机</th>
<th>删除</th>
</tr>
</thead>
<tbody class="tbody">
</tbody>
</table>
</div>
<script type="text/javascript">
'user strict';
let sex = document.getElementById('sex');
let but = document.getElementById('but');
let input = document.getElementsByTagName('input');
let tbody = document.getElementsByTagName('tbody')[0];
let stus=[]; //存储数据
but.onclick = function() {
let obj = {
name: input[0].value,
age: input[1].value,
sex: sex.value,
phone: input[2].value
};
stus.push(obj);
console.log(stus);
let tr = '';
stus.forEach((item, index) => {
tr += "<tr class='newTr'>" +
"<td>" + item.name + "</td>" +
"<td>" + item.age + "</td>" +
"<td>" + item.sex + "</td>" +
"<td>" + item.phone + "</td>" +
"<td style='cursor: pointer; color:red;' οnclick='del(" + index + ")'>删除</td>" +
"</tr>";
})
tbody.innerHTML=tr;
}
function del(index){
stus.splice(index,1);
let res=document.getElementsByClassName('newTr')[index];
tbody.removeChild(res);
}
</script>
</body>
</html>
抽奖机
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>抽奖机</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
#fa{
width: 600px;
height: 600px;
/* border: 1px solid red; */
margin: 80px auto 0;
}
#fa div{
width: 33%;
height: 33%;
border: 1px solid red;
float: left;
line-height: 200px;
text-align: center;
font-size: 30px;
font-weight: 600;
}
#fa div#start{
background-color: pink;
color: white;
cursor: pointer;
}
</style>
</head>
<body>
<div id="fa">
<div class="option">一等奖</div>
<div class="option">二等奖</div>
<div class="option">三等奖</div>
<div class="option">四等奖</div>
<div id="start">开始抽奖</div>
<div class="option">五等奖</div>
<div class="option">六等奖</div>
<div class="option">七等奖</div>
<div class="option">谢谢参与</div>
</div>
<script type="text/javascript">
'user strict';
let but=document.getElementById('start');
let options=document.getElementsByClassName('option');
let timer=null;
but.onclick=function(){
let num=0;
let ran=null;
if(timer===null){
timer=setInterval(()=>{
num++;
ran=Math.round(Math.random()*(7-0)+0);
for(let i=0;i<options.length;++i){
options[i].style.backgroundColor='#fff';
}
options[ran].style.backgroundColor='orange';
console.log(options[ran].innerHTML);
if(num>=50){
clearInterval(timer);
timer=null;
}
},100);
}
}
</script>
</body>
</html>
自动轮播图
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自动轮播图</title>
<script src="../../KuangJS/jquery/jquery-3.6.3.js"></script>
<style type="text/css">
a,ul,li{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
.wrap{
width: 600px;
height: 400px;
position: relative;
margin: 100px auto;
overflow: hidden;
}
.navs{
width: 4200px;
height: 100%;
position: absolute;
top: 0;
left: -600px;
}
.navs li{
width: 600px;
height: 100%;
float: left;
}
.navs li img{
width: 100%;
height: 100%;
}
#bots{
/* display: inline-block; */
width: 600px;
height: 40px;
background: rgba(0,0,0,0.3);
text-align: center;
position: absolute;
bottom: 0;
left: 0;
}
#bots li{
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #ccc;
position: relative;/* 通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动 */
left: 220px;
top: 10px;
margin-left: 10px;
float: left;
}
#bots .active{
background-color: red;
}
</style>
</head>
<body>
<div class="wrap" id="box">
<ul id="navs" class="navs">
<li><a href=""><img src="./images/ban5.jpg" /></a></li>
<li><a href=""><img src="./images/ban1.jpg" /></a></li>
<li><a href=""><img src="./images/ban2.jpg" /></a></li>
<li><a href=""><img src="./images/ban3.jpg" /></a></li>
<li><a href=""><img src="./images/ban4.jpg" /></a></li>
<li><a href=""><img src="./images/ban5.jpg" /></a></li>
<li><a href=""><img src="./images/ban1.jpg" /></a></li>
</ul>
<ul id="bots">
<li class="bot active"></li>
<li class="bot"></li>
<li class="bot"></li>
<li class="bot"></li>
<li class="bot"></li>
</ul>
</div>
<script type="text/javascript">
let num=1;
let i=0;
let timer=null;
swiper();
function swiper(){
timer=setInterval(()=>{
num++;
if(num>6){
//num大于6时，重新开始一轮循环
$("#navs").css('left',-600);
num=2;
}
$("#navs").animate({
left:-num*600},500);
++i;
if(i>4){
i=0;
}
//找到对应圆点并添加相应样式，同时移除所有同胞元素的css样式
$("#bots li").eq(i).addClass('active').siblings().removeClass('active');
},2000);
}
$(".warp").mouseover(()=>{
clearInterval(timer);
});
$(".wrap").mouseout(()=>{
swiper();
})
</script>
</body>
</html>
放大镜效果
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>放大镜效果</title>
<script src="../../KuangJS/jquery/jquery-3.6.3.js"></script>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
/* 原图 */
#smallImg {
width: 300px;
height: 300px;
background-image: url('./images/lou.jpg');
background-size: cover;
position: relative;
}
/* 小遮罩层 */
#smallDiv {
width: 100px;
height: 100px;
background-color: rgba(0, 0, 0, 0.5);
display: none;
position: absolute;
}
/* 放大图容器 */
#bigDiv {
width: 300px;
height: 300px;
position: absolute;
left: 300px;
top: 0;
overflow: hidden;
display: none;
}
/* 放大图图片 */
#bigImg {
width: 900px;
height: 900px;
position: absolute;
}
</style>
</head>
<body>
<div class="fang">
<div id="smallImg">
<div id="smallDiv"></div>
</div>
<div id="bigDiv">
<img src="./images/lou.jpg" alt="" id="bigImg">
</div>
</div>
<script type="text/javascript">
let smallImg = document.getElementById("smallImg");
let smallDiv = document.getElementById("smallDiv");
let bigDiv = document.getElementById("bigDiv");
let bigImg = document.getElementById("bigImg");
smallImg.onmouseover=function(){
smallDiv.style.display='block';
bigDiv.style.display='block';
}
smallImg.onmouseout=function(){
smallDiv.style.display='none';
bigDiv.style.display='none';
}
smallImg.onmousemove=function(e){
var m=e||window.event;
let x=m.clientX-50;
let y=m.clientY-50;
console.log(x);
console.log(y);
if(x>=200){
x=200;
}
if(x<=0){
x=0;
}
if(y>=200){
y=200;
}
if(y<=0){
y=0;
}
smallDiv.style.left=x+'px';
smallDiv.style.top=y+'px';
bigImg.style.left=-3*x+'px';
bigImg.style.top=-3*y+'px';
}
</script>
</body>
</html>
购物车案例
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>购物车案例</title>
<script src="../../KuangJS/jquery/jquery-3.6.3.js"></script>
<style type="text/css">
body{
margin:0;
padding: 0;
}
table,th,td{
border: 1px solid black;
}
table{
border-collapse: collapse;
margin-top: 30px;
margin-bottom: 30px;
width: 600px;
text-align: center;
}
td,th{
width: 120px;
}
button{
border: 0;
}
</style>
</head>
<body>
<table>
<tr>
<th class="all">全选</th>
<th>商品名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" name="" class="getGoods"></td>
<td>电脑</td>
<td class="price">200</td>
<td>
<button class="jian">-</button>
<span>1</span>
<button class="add">+</button>
</td>
<td class="total">200</td>
<td>删除</td>
</tr>
<tr>
<td><input type="checkbox" name="" class="getGoods"></td>
<td>手机</td>
<td class="price">100</td>
<td>
<button class="jian">-</button>
<span>1</span>
<button class="add">+</button>
</td>
<td class="total">100</td>
<td>删除</td>
</tr>
</table>
<div>
<span>总计：</span>
<span class="sum">0</span>
</div>
<script type="text/javascript">
'user strict';
getSum();
$(".add").click(function(){
//得到数量
let num=parseInt($(this).prev().text());
num++;
//增加数量
$(this).prev().text(num);
//得到单价
let price=parseInt($(this).parent().prev().text());
//设置单品总价
$(this).parent().next().text(price*num);
getSum();
})
$(".jian").click(function(){
let num=parseInt($(this).next().text());
num--;
if(num<1) num=1;
$(this).next().text(num);
let price=parseInt($(this).parent().prev().text());
$(this).parent().next().text(price*num);
getSum();
})
function getSum(){
let sum=0;
for(let i=0;i<$('.total').length;++i){
//判断是否选中
if($('.total').eq(i).parent().find('input').prop('checked')){
sum+=parseInt($('.total').eq(i).text());
}
}
$('.sum').text(sum);
}
$('.all').click(function(){
$('.getGoods').prop('checked',true);
getSum();
});
$('.getGoods').click(function(){
getSum();
});
</script>
</body>
</html>
飞机大战
本案例B站教程未完全实现，目前我也还未完善完成，本案例及剩余案例将在完结篇与大家分享！
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>飞机大战</title>
<style type="text/css">
/* body {
margin: 0;
padding: 0;
} */
#box {
width: 512px;
height: 536px;
border: 1px solid red;
background: url('./imgaes/bg2.jpg') no-repeat 0px -1000px;
position: relative;
}
#plane{
position: absolute;
bottom: 100px;
left: 200px;
}
#bullet {
height: 10px;
width: 10px;
border-radius: 50%;
background-color: white;
position: absolute;
top: 0;
left: 50%;
margin-left: -5px;
display: none;
}
</style>
</head>
<body>
<div id="box">
<div id="plane">
<img src="./imgaes/me.png" alt="" id="img">
<div id="bullet">
</div>
</div>
</div>
<script type="text/javascript">
let box = document.getElementById('box');
let img = document.getElementById('plane');
let bullet=document.getElementById('bullet');
let num = 0;
setInterval(() => {
num++;
if (num >= 1000) num = 0;
box.style.backgroundPosition = '0px ' + (-1000 + num) + 'px';
}, 10)
window.document.onkeydown = function(e) {
var e = e || window.event;
if (e.keyCode == 38) {
let top = img.offsetTop - 10;
if (top <= 20) top = 20;
img.style.top = top + 'px';
}
if (e.keyCode == 40) {
let top = img.offsetTop + 10;
if (top >= 420) top = 420;
img.style.top = top + 'px';
}
if (e.keyCode == 37) {
let left = img.offsetLeft - 10;
if (left <= 20) left = 20;
img.style.left = left + 'px';
}
if (e.keyCode == 39) {
let left = img.offsetLeft + 10;
if (left >= 380) left = 380;
img.style.left = left + 'px';
}
if(e.keyCode==32){
bullet.style.display='block';
}
}
</script>
</body>
</html>