四、day_03计时、关灯游戏

最新推荐文章于 2023-12-24 22:09:54 发布
最新推荐文章于 2023-12-24 22:09:54 发布
阅读量406 收藏
点赞数
文章标签： 游戏 css3 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44627935/article/details/124758422
版权
此博客包含三个部分：一是炫酷的计时器实现，通过JavaScript动态更新时间并用小圆点展示数字；二是关灯游戏，玩家点击一盏灯后，与其相邻的灯会改变状态，目标是全部关闭；三是购物车功能的模拟，包括商品选择、数量增减和总价计算。这些示例展示了HTML、CSS和JavaScript在互动效果和功能实现上的应用。
摘要由CSDN通过智能技术生成

clock：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>炫酷计时</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            width: 1200px;
            height: 500px;
            box-shadow: 3px 3px 5px gray;
            margin: 0 auto;
            display: flex;
            justify-content: center;
        }
        .wrap>div{
            position: relative;
            width: 140px;
            height: 200px;
            /* background-color: pink; */
            margin: 2px;
            margin-top: 40px;
        }
        .wrap>div:nth-of-type(3){
            margin-left: 10px;
        }
        .wrap>div:nth-of-type(4){
            margin-right: 10px;
        }
        .wrap>div .circle{
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: deepskyblue;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div n="-1">
            <!-- <div class="circle"></div> -->
        </div>
        <div n="-1"></div>
        <div n="-1"></div>
        <div n="-1"></div>
        <div n="-1"></div>
        <div n="-1"></div>
    </div>
</body>
<script src="js/number.js"></script>
<script>
    var ds = document.querySelectorAll(".wrap>div");
    var timer = null;

    //开启timer
    timer = setInterval(function() {
        var date = new Date();
        var h = date.getHours();
        var m = date.getMinutes();
        var s = date.getSeconds();
        var arr = [parseInt(h/10), h%10, parseInt(m/10), m%10, parseInt(s/10), s%10];
        setNumbers(arr);
    },1000)

    //arr = [n,n,n,n,n,n]  时间
    function setNumbers(arr){
        for(var i=0; i<ds.length; i++){
            // 先判断内容是否一样
            if(arr[i] === ds[i].getAttribute('n')/1){
                continue;
            }
            ds[i].setAttribute('n',arr[i]);
            // 先把之前的内容清空
            ds[i].innerHTML = '';
            showNumberWithDiv(ds[i], arr[i]);
        }
    }
    setNumbers([0,0,0,0,0,0]);

    // for(var i=0; i<ds.length; i++){
    //     // div 和 数字 相结合
    // }

    // 把数字显示在div中
    function showNumberWithDiv(div, n){
        var arr = nums[n];  //拿到显示数字的数组
        for(var i=0; i<arr.length; i++){
            // i 排数
            var array = arr[i]; 
            for (var j=0; j<array.length; j++){
                var d = document.createElement("div");
                d.className = "circle";
                d.style.left = array[j] * 20 + 'px';
                d.style.top = i*20 + 'px';
                div.appendChild(d);
            }
        }
    }
    // showNumberWithDiv(ds[0], 0);
</script>
</html>

var zero = [
    [2,3,4],
    [1,2,4,5],
    [0,1,5,6],
    [0,1,5,6],
    [0,1,5,6],
    [0,1,5,6],
    [0,1,5,6],
    [0,1,5,6],
    [1,2,4,5],
    [2,3,4]
];

// var one = [
//     [0,0,0,1,1,0,0],
//     [0,1,1,1,1,0,0],
//     [0,0,0,1,1,0,0],
//     [0,0,0,1,1,0,0],
//     [0,0,0,1,1,0,0],
//     [0,0,0,1,1,0,0],
//     [0,0,0,1,1,0,0],
//     [0,0,0,1,1,0,0],
//     [0,0,0,1,1,0,0],
//     [1,1,1,1,1,1,1]
// ];

var one = [
    [      3,4],
    [  1,2,3,4],
    [      3,4],
    [      3,4],
    [      3,4],
    [      3,4],
    [      3,4],
    [      3,4],
    [      3,4],
    [0,1,2,3,4,5,6]
];

var two = [
    [1,2,3,4,5],
    [0,1,5,6],
    [5,6],
    [4,5],
    [3,4],
    [2,3],
    [1,2],
    [0,1],
    [0,1,5,6],
    [0,1,2,3,4,5,6]
];

var three = [
    [0,1,2,3,4,5,6],
    [5,6],
    [4,5],
    [3,4],
    [2,3,4],
    [4,5],
    [5,6],
    [5,6],
    [0,1,5,6],
    [1,2,3,4,5]
];

var four = [
    [        4,5],
    [      3,4,5],
    [    2,3,4,5],
    [  1,2,  4,5],
    [0,1,    4,5],
    [0,1,2,3,4,5,6],
    [        4,5],
    [        4,5],
    [        4,5],
    [      3,4,5,6]
];

var five = [
    [0,1,2,3,4,5,6],
    [0,1],
    [0,1],
    [0,1,2,3,4,5],
    [5,6],
    [5,6],
    [5,6],
    [5,6],
    [0,1,5,6],
    [1,2,3,4,5]
];

var six = [
    [4,5],
    [2,3],
    [1,2],
    [0,1],
    [0,1,2,3,4,5],
    [0,1,5,6],
    [0,1,5,6],
    [0,1,5,6],
    [0,1,5,6],
    [1,2,3,4,5]
];

var seven = [
    [0,1,2,3,4,5,6],
    [0,1,5,6],
    [4,5],
    [4,5],
    [3,4],
    [3,4],
    [2,3],
    [2,3],
    [2,3],
    [2,3]
];

var eight = [
    [1,2,3,4,5],
    [0,1,5,6],
    [0,1,5,6],
    [0,1,5,6],
    [1,2,3,4,5],
    [0,1,5,6],
    [0,1,5,6],
    [0,1,5,6],
    [0,1,5,6],
    [1,2,3,4,5]
];

var nine = [
    [1,2,3,4,5],
    [0,1,5,6],
    [0,1,5,6],
    [0,1,5,6],
    [1,2,3,5,6],
    [5,6],
    [5,6],
    [4,5],
    [3,4],
    [1,2]
];

// nums是一个三维数组
var nums = [zero,one,two,three,four,five,six,seven,eight,nine];

在这里插入图片描述

关灯游戏：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关灯游戏</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            width: 500px;
            height: 500px;
            box-shadow: 0 0 3px #333;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-content: space-around;
        }
        .wrap div{
            width: 80px;
            height: 80px;
            margin: 5px;
            background-image: url(img/close.png);
            background-size: 100% 100%;
        }
        .wrap .open{
            background-image: url(img/open.png);
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
<script>
    // 规则：
    // 核心：需要进行改变的灯放入数组
    // index = 0, arr = [0,1,5]

    // 全局变量
    // 灯
    var ds = $$(".wrap div");
    //关卡
    var level = 1;
    //open的个数
    var count = 0;

    // 点击事件
    for (var i=0; i<ds.length; i++){
        ds[i].index = i;  //为每一盏灯添加一个下标
        ds[i].onclick = function(){
            getIndexs(this.index);
        }
    }

    function getIndexs(index) {
            var arr = []; //存放需要改变状态灯的下标
            if (index === 0){
                arr = [0, 1, 5];
            }  else if(index === 4){
                arr = [4, 3, 9];
            }  else if(index === 20){
                arr = [20, 21, 15];
            }  else if(index === 24){
                arr = [24, 23, 19];
            }  else if(index < 4){
                arr = [index, index+1, index-1, index+5];
            }  else if(index > 20){
                arr = [index, index+1, index-1, index-5];
            }  else if(index % 5 === 0){
                arr = [index, index+1, index-5, index+5];
            }  else if(index % 5 === 4){
                arr = [index, index-1, index-5, index+5];
            }  else {
                arr = [index, index-1, index+1, index+5, index-5];
            }
            changeLight(arr);
        }

    //修改灯的背景图
    function changeLight(arr){
        for (var i=0; i<arr.length; i++){
            var n = arr[i];  //n是灯的下标
            if (ds[n].className === ""){
                //需要开灯
                ds[n].className = "open";
                count ++;
            } else{
                //关灯
                ds[n].className = "";
                count --;
            }
        }
        //判断是否进入下一关卡
        if(count === 0){
            level ++;
            setTimeout(function(){
                alert("恭喜你进入level" + level);
                start();
            },0)
        }
    }
  
    //游戏开始
    function start(){
        //根据关卡  点亮灯
        for (var i=0; i<level; i++){
            var n = rand(0,ds.length);
            getIndexs(n);
        }
    }
    start();

    //随机函数
    function rand(min,max){
        return Math.floor(Math.random() * (max-min) + min);
    }

    // 简化一下query 和 queryall
    function $(str){
        return document.querySelector(str);
    }
    function $$(str){
        return document.querySelectorAll(str);
    }
</script>
</html>

在这里插入图片描述

购物车：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>购物车</title>
     <style>
         *{
             margin: 0;
             padding: 0;
             list-style: none;
             box-sizing: border-box;
         }
         html{
             font-size: 62.5%;
         }
         main{
             height: 100vh;
             padding-bottom: 60px;
             display: flex;
         }
         main aside{
             width: 100px;
             height: 100%;
             overflow: scroll;
         }
         main aside .item{
             box-sizing: content-box;
             font-size: 1.2rem;
             padding: 3rem 0;
             text-align: center;
             background-color: #f5f5f5;
         }
         main .info{
             width: 0;
             height: 100%;
             flex-grow: 1;
             /* background-color: cyan; */
         }
         main .info li{
             height: 105px;
             display: flex;
         }
         main .info li img{
             width: 75px;
             height: 75px;
             /* float: left; */
             margin: 15px;
             margin-right: 0;
         }
         main .info li div{
             width: 0;
             flex-grow: 1;
             height: 95px;
             /* float: left; */
             margin: 5px;
             /* background-color: darkcyan; */
         }
         main .info li div p:nth-of-type(1){
             font-size: 1.6rem;
             line-height: 30px;
         }
         main .info li div p:nth-of-type(2){
             font-size: 1.4rem;
             line-height: 20px;
         }
         main .info li div p:nth-of-type(3){
             font-size: 1.4rem;
             line-height: 20px;
         }
         main .info li div p:nth-of-type(4) .price{
             font-size: 1.8rem;
             line-height: 25px;
             color: #ff544b;
             float: left;
         }
         main .info li div p:nth-of-type(4) .add{
             float: right;
             width: 20px;
             height: 20px;
             line-height: 20px;
             text-align: center;
             background-color: #fdbd4e;
             border-radius: 50%;
         }
         main .info li div p:nth-of-type(4) .num{
             float: right;
             width: 20px;
             height: 20px;
             line-height: 20px;
             text-align: center;
         }
         main .info li div p:nth-of-type(4) .sub{
             float: right;
             width: 20px;
             height: 20px;
             line-height: 20px;
             text-align: center;
             border: 1px solid lightgray;
             border-radius: 50%;
         }
         /*底部导航栏*/
         nav{
             width: 100%;
             height: 60px;
             background-color: #39393a;
             position: fixed;
             bottom: 0;
         }
         nav img{
             float: left;
             width: 50px; 
             margin-left: 20px;
             margin-top: -30px;
         }
         nav .all_money{
             font-size: 2rem;
             line-height: 60px;
             float: left;
             margin-left: 20px;
             color: white;
         }
         nav div{
             width: 80px;
             height: 60px;
             line-height: 60px;
             background-color: #fdbd4e;
             float: right;
             font-size: 1.2rem;
             text-align: center;
         }
     </style>
 </head>
 <body>
     <div class="container">
         <main>
             <aside>
                 <!-- <div class="item">item1</div> -->
                 <!-- div.item{item$}*10 -->
                 <div class="item">item1</div>
                 <div class="item">item2</div>
                 <div class="item">item3</div>
                 <div class="item">item4</div>
                 <div class="item">item5</div>
                 <div class="item">item6</div>
                 <div class="item">item7</div>
                 <div class="item">item8</div>
                 <div class="item">item9</div>
                 <div class="item">item10</div>
             </aside>
             <ul class="info">
                 <li>
                     <img src="img/汉堡1.jpg" alt="">
                     <div>
                         <p>汉堡1</p>
                         <p>汉堡2</p>
                         <p>汉堡3</p>
                         <p>
                             <span class="price" price="22">￥22</span>
                             <span class="add">+</span>
                             <span class="num">0</span>
                             <span class="sub">-</span>
                         </p>
                     </div>
                 </li>
                 <li>
                    <img src="img/汉堡2.jpg" alt="">
                    <div>
                        <p>汉堡1</p>
                        <p>汉堡2</p>
                        <p>汉堡3</p>
                        <p>
                            <span class="price" price="22">￥22</span>
                            <span class="add">+</span>
                            <span class="num">0</span>
                            <span class="sub">-</span>
                        </p>
                    </div>
                </li>
                <li>
                    <img src="img/汉堡3.jpg" alt="">
                    <div>
                        <p>汉堡1</p>
                        <p>汉堡2</p>
                        <p>汉堡3</p>
                        <p>
                            <span class="price" price="22">￥22</span>
                            <span class="add">+</span>
                            <span class="num">0</span>
                            <span class="sub">-</span>
                        </p>
                    </div>
                </li>
             </ul>
         </main>
         <nav>
             <img src="img/外卖1.jpg" alt="">
             <p class="all_money">￥0</p>
             <div>去结算</div>
         </nav>
     </div>
 </body>
 <script>
     var pAllMoney = document.querySelector(".all_money");
     var addButs = document.getElementsByClassName("add");
     var subButs = document.getElementsByClassName("sub");

     var money = 0;  //总价钱

     for(var i=0; i<addButs.length; i++){
         addButs[i].onclick = function(){
            //  1.修改数量
            var n = this.nextElementSibling.innerHTML/1;
            this.nextElementSibling.innerHTML = (n+1);
            //  2.修改总价钱
            var thisPrice = this.previousElementSibling.getAttribute("price")/1;
            money += thisPrice;
            pAllMoney.innerHTML = "￥" + money;
         }
         subButs[i].onclick = function(){
            //  1.修改数量
            var n = this.previousElementSibling.innerHTML/1;
            if(n <= 0){
                return;
            }
            this.previousElementSibling.innerHTML = (n-1);
            // 2.修改总价钱
            var thisPrice = this.previousElementSibling
                                .previousElementSibling
                                .previousElementSibling
                                .getAttribute("price")/1;
            money -= thisPrice;
            pAllMoney.innerHTML = "￥" + money;
         }
     }
 </script>
 </html>

在这里插入图片描述

新年倒计时：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新年倒计时</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        html{
            font-size: 62.5%;
        }
        body{
            height: 100vh;
            background-image: url(img/烟花.jpg);
            background-size: cover;
            background-position: center center;
        }
        .container{
            height: 100%;
            background-color: rgba(0,0,0,.5);
            display: flex;
            justify-content: center;
            align-self: center;
            align-content: center;
            flex-wrap: wrap;
        }
        h1, [id]{
            width: 100%;
            font-size: 3rem;
            color: white;
            text-align: center;
        }
        section{
            display: flex;
            justify-content: center;
        }
        .item{
            margin: 5px;
        }
        .item p:nth-of-type(2){
            font-size: 1.4rem;
            color: white;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>新年倒计时</h1>
        <section>
            <div class="item">
                <p id="day">100</p>
                <p>天数</p>
            </div>
            <div class="item">
                <p id="hour">10</p>
                <p>小时</p>
            </div>
            <div class="item">
                <p id="min">10</p>
                <p>分钟</p>
            </div>
            <div class="item">
                <p id="sec">10</p>
                <p>秒数</p>
            </div>
        </section>
    </div>
</body>
<script>
    // 获取标签
    var dDay = document.getElementById("day");
    var dHour = document.getElementById("hour");
    var dMin = document.getElementById("min");
    var dSec = document.getElementById("sec");

    var timer = null;  //计时器

    timer = setInterval(function() {
        // 获取当前时间
        var date = new Date();  //获取当前时间戳
        // 与预定的时间做差值比较
        var date2 = new Date("2023-1-1 00:00:00");
        var dis = date2.getTime() - date.getTime();  //返回毫秒
        var time = parseInt(dis/1000);  //转成秒数
        // 计算出对应的数值并修改p标签
        var d = parseInt( time / (24 * 60 * 60) );
        dDay.innerHTML = d;
        var h = parseInt(time % (24*60*60) / (60*60));
        dHour.innerHTML = h;
        var m = parseInt(time % (24*60*60) % (60*60)/60);
        dMin.innerHTML = m;
        var s = time % (24*60*60) % (60*60) % 60;
        dSec.innerHTML = s;
    },1000)
</script>
</html>

在这里插入图片描述

[Augenstern]
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
关灯游戏
11-21 6154
例子: 有一个5*6的灯泡构成的矩阵，灯的开关规则是这样：当改变某盏灯的，状态时，这盏灯的上下左右相邻的灯的状态也随之改变。例如： 0 1 1 0 1 0 1 0 0 1 1 1 0 0 1 0 0 1 1 0 0 1 0 1 0 1 1 1 0 0 当按下2行3列的开关时，状态变为： 0 1 0 0 1 0 1 1 1 0 1 1 0 0 0 0 0 1 1 0 0 1 0 1 0 1 ...
关灯 游戏
weixin_53374733的博客
09-22 935
【代码】关灯 游戏。
JavaScript Day_03
03-24
javascript学习第三天笔记
day_03.rar
06-25
本压缩包“day_03.rar”包含了一个关于Spring AOP学习过程中的实例代码，重点展示了如何实现动态代理以及XML和注解方式的AOP配置。 首先，让我们来了解一下Spring AOP的基本概念。AOP是一种编程范式，旨在减少代码...
自学C语言的day_03
09-14
自学C语言的day_03
day_45_bookstore.zip_day_45_bookstore_图书管理
09-15
本项目名为“day_45_bookstore”，是一个使用MVC（Model-View-Controller）框架编写的在线图书管理系统。通过这个系统，用户可以方便地进行图书的增删改查操作，极大地提高了图书管理的效率。 首先，我们来深入理解...
eq_data_30_day_m1.rar
06-21
标题中的"eq_data_30_day_m1.rar"是一个压缩文件，通常用于存储多个相关文件或数据集。根据描述，这个文件与《Python:从入门到实践》这本书的第16章有关，这意味着它可能包含了一个与Python编程、数据分析或者可视化...
关灯游戏(新手)
07-25
本人刚学IOS三天,练手的一个小游戏, 内部还不够完善,但是基本框架已经够用.刚学习的新手可以看看,大神绕行.有建议可以留言
关灯游戏整合版
03-19
NULL 博文链接：https://zwhc.iteye.com/blog/717330
关灯游戏解题程序
02-08
关灯游戏(Lights Out)最强解题程序，包含多彩颜色情况解题，程序可以给出全部解法。
求解关灯游戏的全部解
03-19
NULL 博文链接：https://zwhc.iteye.com/blog/713818
关灯小游戏
weixin_44127337的博客
11-20 337
关灯小游戏： 简单说明： 简单代码实现： import javax.swing.*; import java.util.*; public class Light { public static void main(String[] args) { //初始化棋盘 int[][] games = new int[10][10]; R...
关灯游戏 Lights out (四)(多种颜色，难度升级版)
MHL_1208980380的博客
02-08 1785
传统的关灯游戏，颜色只有亮、灭两种情况，现在将传统的关灯游戏升级，颜色不仅只有两种，而是两种以上。在多种颜色中，其中一种颜色表示灯熄灭。 游戏规则稍稍变动了一下：         初始局面：在一个m×n的阵列里，有若干盏灯亮着(可以全部都亮着或都熄灭；对于全熄灭状态，无任何操作是一种解法，还可能有其他可以将所有灯再度熄灭的解法)         游戏操作：点击任意一盏灯(不管该灯是亮着还是熄
Python实验：关灯游戏
加辣椒了吗?的博客
12-24 2661
这是一个Python实验作业，内容如下：题目要求：请完成《关灯游戏》，并完成以下扩展内容:扩展内容：请设计并实现界面功能，允许玩家选择初始地图的大小，分别为:小(5x5)，中(8x8)，大(12x10)，玩家选择之后立即刷新窗口界面并重设地图请设计并实现界面功能，允许玩家选择游戏难度，分别为：容易：一开始有20%的格子状态为翻转状态中等：一开始有40%的格子状态为翻转状态困难：一开始有60%的格子状态为翻转状态游戏开始之前，提示玩家输入唯一的用户名，用于保留该玩家的闯关记录。
JavaScript 关灯游戏
24K丿丑男的博客
09-23 994
游戏简介：这是一个纯js写的小游戏，游戏开始时会有一些灯点亮，我们需要关掉所有亮着灯进入下一关卡，在点击关灯时会对它四周的灯产生影响，如果灯是亮的就会关掉，否则就会打开。
DAY_OF_WEEK,
最新发布
03-28
DAY_OF_WEEK是一个常见的日期操作，用于获取给定日期的星期几。在不同的编程语言和日期库中，DAY_OF_WEEK的实现方式可能会有所不同，但基本原理是一致的。 在大多数编程语言中，日期通常以特定的格式表示，例如年、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值