Js 第七章

最新推荐文章于 2024-11-08 17:24:22 发布

岳职软件22-01-40

最新推荐文章于 2024-11-08 17:24:22 发布

阅读量358

点赞数 10

文章标签： javascript

本文链接：https://blog.csdn.net/2301_79613063/article/details/134633487

版权

一.赛马游戏
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
table{
width: 1200px;
height: 400px;
}

img{
width: 100px;
}

.begin{
width: 100px;
}
</style>
</head>
<body>
<div align="center">
<h3>游戏规则：2分一次。赢了+5分。中途主持人会随机暂停。选手可以换马。如果换马额外支付1分。</h3>

<table style="border: 1px solid black;" cellpadding="0" cellspacing="0" border="1px">
<tr>
<td class="begin"><img src="img/1.gif" /> </td>
<td>赛道~</td>
</tr>
<tr>
<td class="begin"><img src="img/1.gif" /> </td>
<td>赛道~</td>
</tr>
<tr>
<td class="begin"><img src="img/1.gif" /> </td>
<td>赛道~</td>
</tr>
<tr>
<td class="begin"><img src="img/1.gif" /> </td>
<td>赛道~</td>
</tr>
</table>

<button id="btn">开始比赛</button>

</div>

<script>
var dsq ;
//让图片由左边往右开始运动
var img0 = document.getElementsByTagName("img")[0];
var img1 = document.getElementsByTagName("img")[1];
var img2 = document.getElementsByTagName("img")[2];
var img3 = document.getElementsByTagName("img")[3];

var left_index0 = 0;
var left_index1 = 0;
var left_index2 = 0;
var left_index3 = 0;

二.图片的移动
<head>
<meta charset="utf-8">
<title></title>
<style>
img{
/* margin-left: 300px; */
}
</style>

</head>
<body>
<img src="img/1.gif" />

<script>
var img = document.getElementsByTagName("img")[0];
var left_index = 0;
setInterval(function(){
left_index++;
img.style.marginLeft = left_index + "px";
},10);
</script>
</body>

三.广告牌的运动
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 去除浏览器自带的边距，否则影响广告牌移动的距离的误差 */
*{
margin: 0;
}

img{
border: 1px solid red;
margin-top: 200px;
height: 100px;
}

</style>


</head>
<body>
<a href="https://baidu.com/"><img src="img/广告.jpg"/></a>

四.广告牌的运动改进版
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 去除浏览器自带的边距，否则影响广告牌移动的距离的误差 */
*{
margin: 0;
}

img{
border: 1px solid red;
margin-top: 200px;
height: 100px;
}

</style>


</head>
<body>
<a href="https://baidu.com/"><img src="img/广告.jpg"/></a>

五.顺时针移动广告牌
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 去除浏览器自带的边距，否则影响广告牌移动的距离的误差 */
*{
margin: 0;
}

img{
border: 1px solid red;
margin-top: 0px;
height: 100px;
width: 100px;
}

</style>

</head>
<body>
<a href="https://baidu.com/"><img id="a" src="img/广告.jpg"/></a>

<script>

var maxHight = window.innerHeight - 100;//获取浏览器的宽度高度还要减去图片自身的高度
var maxWidth = window.innerWidth - 100; //获取浏览器的宽度高度还要减去图片自身的高度

var img = document.getElementById("a");
var zzb = 0;//纵坐标
var hzb = 0;//横坐标

var fx = 1;//1表示向下 2表示向右 3表示向上 4表示向左

setInterval(function(){

switch(fx){
case 1:
zzb++;
break;

case 2:
hzb++;
break;

case 3:
zzb--;
break;

case 4:
hzb--;
break;

}

if(zzb==maxHight && hzb==0){
fx = 2;
}

if(hzb==maxWidth && zzb==maxHight ){
fx = 3;
}

if(hzb==maxWidth && zzb == 0){
fx = 4;
}

if(hzb==0 && zzb == 0){
fx = 1;
}

img.style.marginTop = zzb + "px";
img.style.marginLeft = hzb + "px";

},1)
</script>
</body>

六.翻牌游戏
<head>
<meta charset="utf-8">
<title></title>
<style>
img{
width: 100px;
height: 100px;
}
td{
border: 1px solid red;
}

</style>
</head>
<body>
<div align="center">

<table>
<tr>
<td><img src="img/0.png" /> </td>
<td><img src="img/0.png" /> </td>
<td><img src="img/0.png" /> </td>
<td><img src="img/0.png" /> </td>
</tr>
<tr>
<td><img src="img/0.png" /> </td>
<td><img src="img/0.png" /> </td>
<td><img src="img/0.png" /> </td>
<td><img src="img/0.png" /> </td>
</tr>
<tr>
<td><img src="img/0.png" /> </td>
<td><img src="img/0.png" /> </td>
<td><img src="img/0.png" /> </td>
<td><img src="img/0.png" /> </td>
</tr>
<tr>
<td><img src="img/0.png" /> </td>
<td><img src="img/0.png" /> </td>
<td><img src="img/0.png" /> </td>
<td><img src="img/0.png" /> </td>
</tr>
</table>
<button id="btn">开始游戏</button>

</div>
<script>

var img = document.getElementsByTagName("img");

var firstImg ; //表示第一次翻开的的图片路径
var secondImg ; //表示第二次翻开的的图片路径
var img1 ;
var img2 ;
var index = 0 ;//表示当前是第几次点击

var isA = false;//是否快速点击

//一定要将自己的思路清晰地描述出来.
//将前台页面绘制出来. 4行4列的表格

//利用数组将16张图片的路径进行保存
var imgs = ["1.jpg","1.jpg","2.jpg","2.jpg","3.jpg","3.jpg","4.jpg","4.jpg","5.jpg","5.jpg","6.jpg","6.jpg","7.jpg","7.jpg","8.jpg","8.jpg"];

//将原来的数组进行随机的打乱
imgs.sort(function(){
return Math.random() - 0.5;
})

for(let i = 0 ; i<img.length ;i++){

img[i].onclick = function(){

index ++;

img[i].setAttribute("src" , "img/" + imgs[i] );

if(index==1){
firstImg = img[i].getAttribute("src");
img1 = i;
}else if(index==2){
secondImg = img[i].getAttribute("src");
img2 = i;
}

if(firstImg != secondImg && index==2 ){
index = 0;
//延迟1秒再翻回去
setTimeout(function(){
img[img1].setAttribute("src" , "img/0.png" );
img[img2].setAttribute("src" , "img/0.png" );

},1000)
}

}

}
</script>
</body>

七.演示下载功能
<head>
<meta charset="utf-8">
<title></title>
<link href="css/bootstrap.css" rel="stylesheet" />

<script src="js/bootstrap.js"></script>
</head>
<body>

<div class="progress" role="progressbar" aria-label="Example with label" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<div id="a" class="progress-bar" style="width: 0%">0%</div>
</div>

<script>
var i = 0;

var div = document.getElementById("a");

var aaa = setInterval(function(){
i++;
div.style.width = i + "%";
div.innerText = i +"%";

if (i==100) {
clearInterval(aaa);
}
},10000);
</script>
</body>

八.数组的排序算法
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>

var a = [1,432,6,234,65,76,876,987];

a.sort(function(a,b){
return b-a; //倒序
})
console.log(a);
a.sort(function(a,b){
return a-b; //正序
})
console.log(a);
a.sort(function(){
return Math.random() - 0.5; //随机排列
})

console.log(a);
</script>
</body>

九.如何去除事件
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button>按钮</button>
<button>取消按钮</button>
<script>
document.getElementsByTagName("button")[0].onclick = function(){
alert(123);
}

document.getElementsByTagName("button")[1].onclick = function(){

document.getElementsByTagName("button")[0].onclick = null;

}

</script>
</body>