一、赛马游戏
<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;
document.getElementById("btn").onclick = function(){
if(document.getElementById("btn").innerText =="开始比赛"){
document.getElementById("btn").innerText ="暂停比赛";
dsq = setInterval(saima,10);
}else{
document.getElementById("btn").innerText ="开始比赛";
clearInterval(dsq);
}
}
function saima(){
let sjs0 = Math.floor(Math.random()*10);
let sjs1 = Math.floor(Math.random()*10);
let sjs2 = Math.floor(Math.random()*10);
let sjs3 = Math.floor(Math.random()*10);
left_index0 = left_index0 + sjs0;
left_index1 = left_index1 + sjs1;
left_index2 = left_index2 + sjs2;
left_index3 = left_index3 + sjs3;
img0.style.marginLeft = left_index0 + "px";
img1.style.marginLeft = left_index1 + "px";
img2.style.marginLeft = left_index2 + "px";
img3.style.marginLeft = left_index3 + "px";
if (left_index0>=1000) {
alert("第1匹马赢了");
clearInterval(dsq);
location.reload();
}
if (left_index1>=1000) {
alert("第2匹马赢了");
clearInterval(dsq);
location.reload();
}
if (left_index2>=1000) {
alert("第3匹马赢了");
clearInterval(dsq);
location.reload();
}
if (left_index3>=1000) {
alert("第4匹马赢了");
clearInterval(dsq);
location.reload();
}
}
</script>
</body>
</html>
二、顺时针移动广告牌
<html>
<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>
</html>
三、翻牌游戏
<html>
<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>
</html>
四、演示下载功能
<html>
<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>
</html>
五、数组的排序算法
<html>
<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>
</html>
六、如何去除事件
<html>
<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>
</html>
2699
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
