结合html，css，js制作简易老虎机

最新推荐文章于 2023-04-08 14:37:00 发布

小苏(º﹃º )

最新推荐文章于 2023-04-08 14:37:00 发布

阅读量1.2k

点赞数

分类专栏： Java 文章标签： js css html web

本文链接：https://blog.csdn.net/qq_45850095/article/details/112707176

版权

Java 专栏收录该内容

39 篇文章 3 订阅

订阅专栏

1.在制作时，首先要理清思路，先将模型想好，再写代码。

2.先写html部分，给它一个大概的框架。再写css部分，对它进行修饰（上色，排序）。最后写js代码，完成相应的功能。

话不多说，先上代码：

第一种方式，通过覆盖相应的位置实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .out{
            width: 100px;
            height: 300px;
            float: left;
        }
        div{
            width: 100px;
            height: 100px;
        }
        #div1{
            width: 100px;
            height: 100px;
            background: #ff1c1c;
            z-index: 1000;
            position: relative;
            /*left: 0px;
            top: 0px;*/
        }
        #one :nth-child(1){
            background-color: #a3ff6f;
        }
        #one :nth-child(2){
            background-color: cyan;
        }
        #one :nth-child(3){
            background-color: coral;
        }
        #two :nth-child(1){
            background-color: cornflowerblue;
        }
        #two :nth-child(2){
            text-align: center;
            valign: middle
        }
        #two :nth-child(3){
            background-color: #ffa2f1;
        }
        #three :nth-child(1){
            background-color: #ffcb56;
        }
        #three :nth-child(2){
            background-color: #b9ffd2;
        }
        #three :nth-child(3){
            background-color: #8768ff;
        }
    </style>
</head>
<body>
<input type="button" value="开始" id="bt1" onclick="f1()">
<input type="button" value="关闭" id="bt2" onclick="f2()">
<hr>
<div id="one" class="out" align="center">
    <div id="d1">1</div>
    <div id="d2">2</div>
    <div id="d3">3</div>
</div>
<div id="two" class="out" align="center">
    <div >1</div>
    <div ></div>
    <div >3</div>
</div>
<div id="three" class="out" align="center">
    <div >1</div>
    <div >2</div>
    <div >3</div>
</div>
<div id="div1"></div>
</body>
<script>
    let div1 = document.getElementById("div1");
    let left1=0;
    let top1=0;
    let maxleft1=200;
    let maxtop1=200;
    function f() {
        if (top1<200){
            div1.style='top:'+(top1+=100)+'px;'
        }else if (left1<200){
            div1.style='top:200px;'+'left:'+(left1+=100)+'px;'
        }else if (maxtop1>0){
            div1.style='top:'+(maxtop1-=100)+'px;'+'left:200px;'
        }else if (maxleft1>0){
            div1.style='top:0px;'+'left:'+(maxleft1-=100)+'px;'
                if (top1==200&&left1==200&&maxleft1==0&&maxtop1==0){
                    left1=0;
                    top1=0;
                    maxleft1=200;
                    maxtop1=200;
                }
        }
    }
    function f1() {
         s = setInterval(f,200);
    }
    function f2() {
        clearInterval(s)
    }

</script>
</html>

运行结果：
点击开始，红色的小方块会逆时针依次覆盖相应小方块。
在这里插入图片描述

第二种方式，获取所有位置的id，对它进行相应的修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .out{
            width: 100px;
            height: 300px;
            float: left;
        }
        div{
            width: 100px;
            height: 100px;
        }
        #div1{
            width: 100px;
            height: 100px;
            background: #ff1c1c;
            z-index: 1000;
            position: relative;
            /*left: 0px;
            top: 0px;*/
        }
        #one :nth-child(1){
            background-color: #a3ff6f;
        }
        #one :nth-child(2){
            background-color: cyan;
        }
        #one :nth-child(3){
            background-color: coral;
        }
        #two :nth-child(1){
            background-color: cornflowerblue;
        }
        #two :nth-child(2){
            text-align: center;
            valign: middle
        }
        #two :nth-child(3){
            background-color: #ffa2f1;
        }
        #three :nth-child(1){
            background-color: #ffcb56;
        }
        #three :nth-child(2){
            background-color: #b9ffd2;
        }
        #three :nth-child(3){
            background-color: #8768ff;
        }
    </style>
</head>
<body>
<input type="button" value="开始" id="bt1" onclick="f1()">
<input type="button" value="关闭" id="bt2" onclick="f2()">
<hr>
<div id="one" class="out">
    <div id="d1">1</div>
    <div id="d2">2</div>
    <div id="d3">3</div>
</div>
<div id="two" class="out" align="center">
    <div id="d4">4</div>
    <div ><input type="button" value="开始"></div>
    <div id="d5">5</div>
</div>
<div id="three" class="out">
    <div id="d6">6</div>
    <div id="d7">7</div>
    <div id="d8">8</div>
</div>

</body>
<script>
    let d1 = document.getElementById("d1");
    let d2 = document.getElementById("d2");
    let d3 = document.getElementById("d3");
    let d4 = document.getElementById("d4");
    let d5 = document.getElementById("d5");
    let d6 = document.getElementById("d6");
    let d7 = document.getElementById("d7");
    let d8 = document.getElementById("d8");
    let arr=[d1,d2,d3,d5,d8,d7,d6,d4];
    let num=0;
    function f() {
        arr[num].style = "border: #ff1c1c solid 2px;";//加实线边框
        if (num==0){
            arr[7].style = "border: #ff1c1c solid 0px";
        }else {
            arr[num-1].style = "border: #ff1c1c solid 0px";
            /*arr[num-1].style = "border: #ffec40 dashed 0px";*/
        }
        if (num==7){
            num=-1;
        }
        num++;
    }
    function f1() {
        s = setInterval(f,500);
    }
    function f2() {
        clearInterval(s)
    }

</script>
</html>

运行结果：
点击开始，会逆时针依次给小方块加上红色边框
在这里插入图片描述

小苏(º﹃º )

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
结合html，css，js制作简易老虎机

1.在制作时，首先要理清思路，先将模型想好，再写代码。2.先写html部分，给它一个大概的框架。再写css部分，对它进行修饰（上色，排序）。最后写js代码，完成相应的功能。话不多说，先上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .out
复制链接

扫一扫