程序员经验分享-hwhale

前端小游戏2048（一步步详解附带源代码，源码上传到csdn,可以免费下载）

2023-10-27

2048小游戏

2048是前端开发必经的一个小游戏，2048小游戏包含了HTML，CSS和JavaScript。

简介

《2048》，是一款益智小游戏，这款游戏是由年仅19岁的意大利程序员加布里勒希鲁尼（Gabriele Cirulli）开发出来的，官方版本只能在网页上或通过其移动网站运行。 2048游戏共有16个格子，初始时会有两个格子上安放了两个数字2，每次可以选择上下左右其中一个方向去滑动，每滑动一次，所有的数字方块都会往滑动的方向靠拢外，系统也会在空白的地方随即出现一个数字方块，相同数字的方块在靠拢、相撞时会相加。系统给予的数字方块不是2就是4，玩家要想办法在这小小的16格范围中凑出“2048”这个数字方块。

效果图

2048
游戏结束弹出遮罩层显示
游戏结束

代码部分

首先是html部分

<p class="grade">分数：<span id="score01">999999999</span> </p>
    <div class="all">
        <div class="cell n2" id="c00">2</div>
        <div class="cell n4" id="c01">4</div>
        <div class="cell n8" id="c02">8</div>
        <div class="cell n16" id="c03">16</div>
        <div class="cell n32" id="c10">32</div>
        <div class="cell n64" id="c11">64</div>
        <div class="cell n128" id="c12">128</div>
        <div class="cell n256" id="c13">256</div>
        <div class="cell n512" id="c20">512</div>
        <div class="cell n1024" id="c21">1024</div>
        <div class="cell n2048" id="c22">2048</div>
        <div class="cell n4096" id="c23">4096</div>
        <div class="cell n8192" id="c30">8192</div>
        <div class="cell" id="c31"></div>
        <div class="cell" id="c32"></div>
        <div class="cell" id="c33"></div>

    </div>
    <div class="gameover">
        <p>
            游戏结束！<br> 分数：<span id="score02">999999999</span> <br>
            <a href="">再来一次</a>
        </p>
    </div>

html样式部分代码

* {
    padding: 0;
    margin: 0;
    font-family: Arial;
    text-decoration: none;
}

body {
    background-color: #FAF8EF;
}

.grade {
    width: 500px;
    margin: 0 auto;
    margin-top: 50px;
    font-size: 40px;
    text-align: center;
    font-weight: bold;
    color: #776E65;
}

.all {
    width: 500px;
    height: 500px;
    margin: auto;
    background-color: #BBADA0;
    border-radius: 10px;
}

.cell {
    width: 100px;
    height: 100px;
    margin-top: 20px;
    margin-left: 20px;
    background-color: #ccc0b3;
    float: left;
    border-radius: 5px;
    font-size: 24px;
    font-weight: bold;
    color: #776E65;
    line-height: 100px;
    text-align: center;
}

.n2 {
    background-color: #eee3da;
}

.n4 {
    background-color: #ede0c8;
}

.n8 {
    background-color: #f2b179;
}

.n16 {
    background-color: #f59563;
}

.n32 {
    background-color: #f67c5f;
}

.n64 {
    background-color: #f65e3b;
}

.n128 {
    background-color: #edcf72;
}

.n256 {
    background-color: #edcc61;
}

.n512 {
    background-color: #9c0;
}

.n1024 {
    background-color: #33b5e5;
}

.n2048 {
    background-color: #09c;
}

.n4096 {
    background-color: #a6c;
}

.n8192 {
    background-color: #93c;
}

.gameover {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.3);
}

.gameover p {
    width: 400px;
    height: 300px;
    background-color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -200px;
    border: solid 1px black;
    border-radius: 10px;
    font-size: 40px;
    line-height: 100px;
    text-align: center;
}

.gameover p a {
    background-color: #8F7A66;
    border-radius: 5px;
    padding: 15px;
    color: white;
}

下面是2048核心js代码了

var game = {
    data: [], //存放数据
    score: 0, //分数
    status: 0, //当前状态，时刻的监听，时刻的需要改变      游戏运行中的状态，结束的状态
    gameover: 0,
    gamerunning: 1,
    start: function() {}
    randomNum: function() {}
    dataView: function() {}
    isgameover: function() {}
    moveLeft: function() {}
    moveLeftInRow: function(r) {} //单独处理每一行的逻辑
    getNextInRow: function(r, c) {}
    moveRight: function() {}
    moveRightInRow: function(r) { }//单独处理每一行的逻辑
    getNextInRowa: function(r, c) {}
    moveTop: function() {}
    moveTopInRow: function(c) {}
    getNextInRowaa: function(r, c) {}
    moveButtom: function() {}
    moveButtomInRow: function(c) {}
    getNextInRowaaa: function(r, c) {}
    }

开始写各个函数

开始游戏的方法

start: function() {
        this.score = 0;
        this.data = [
            [0, 0, 0, 0],
            [0, 0, 0, 0],
            [0, 0, 0, 0],
            [0, 0, 0, 0]
        ]
        this.status = this.gamerunning;
        this.randomNum()
        this.randomNum()
        this.dataView()
    }

随机数的方法，随机生成数字

randomNum: function() {
        for (;;) {
            var r = Math.floor(Math.random() * 4);
            var c = Math.floor(Math.random() * 4);
            if (this.data[r][c] == 0) {
                var num = Math.random() > 0.2 ? 2 : 4;
                this.data[r][c] = num;
                break;
            }
        }
    }

实时更新的视图

dataView: function() {
        for (var r = 0; r < 4; r++) {
            for (var c = 0; c < 4; c++) {
                var div = document.getElementById('c' + r + c);
                if (this.data[r][c] != 0) {
                    div.innerHTML = this.data[r][c];
                    div.className = 'cell n' + this.data[r][c]
                } else {
                    div.innerHTML = ''
                    div.className = 'cell'
                }
            }
        }
        document.getElementById('score01').innerHTML = this.score; //设置游戏分数

        // 监测游戏状态
        if (this.status == this.gameover) {
            document.getElementById('score02').innerHTML = this.score;
            document.getElementsByClassName('gameover')[0].style.display = 'block'
        } else {
            document.getElementsByClassName('gameover')[0].style.display = 'none'
        }
    }

判断游戏是否结束的方法 游戏没结束返回false 结束返回true

isgameover: function() {
        for (var r = 0; r < 4; r++) {
            for (var c = 0; c < 4; c++) {
                // 没有结束，三种情况：：1.数组中还有0 2.左右相邻的有相同的  3.上下相邻有相同的
                if (this.data[r][c] == 0) {
                    return false
                }
                if (c < 3) {
                    if (this.data[r][c] == this.data[r][c + 1]) {
                        return false
                    }
                }
                if (r < 3) {
                    if (this.data[r][c] == this.data[r + 1][c]) {
                        return false
                    }
                }
            }
        }
        return true; //表示游戏已经结束
    }

左移动

moveLeft: function() {
        var before = String(this.data) //移动之前
            //处理移动的逻辑

        for (var r = 0; r < 4; r++) {
            this.moveLeftInRow(r);
        }

        var after = String(this.data) //移动之后
        if (before != after) {
            this.randomNum()
            if (this.isgameover()) {
                this.status = this.gameover;
            }
            this.dataView()
        }
    },
    moveLeftInRow: function(r) { //单独处理每一行的逻辑
        for (var c = 0; c < 3; c++) {
            var nextc = this.getNextInRow(r, c);
            if (nextc != -1) {
                if (this.data[r][c] == 0) {
                    this.data[r][c] = this.data[r][nextc];
                    this.data[r][nextc] = 0;
                    c--;
                } else if (this.data[r][c] == this.data[r][nextc]) {
                    this.data[r][c] *= 2;
                    this.score += this.data[r][c]
                    this.data[r][nextc] = 0
                }
            } else {
                break;
            }
        }
    },
    getNextInRow: function(r, c) {
        for (var i = c + 1; i < 4; i++) {
            if (this.data[r][i] != 0) {
                return i
            }
        }
        return -1;
    }

右移动，上移动，下移动和左移动的代码相似

// 右移动
    moveRight: function() {
        var before = String(this.data) //移动之前
        for (var r = 3; r >= 0; r--) {
            this.moveRightInRow(r);
        }
        var after = String(this.data) //移动之后
        if (before != after) {
            this.randomNum()
            if (this.isgameover()) {
                this.status = this.gameover;

            }
            this.dataView()
        }
    },
    moveRightInRow: function(r) { //单独处理每一行的逻辑
        for (var c = 3; c >= 0; c--) {
            var nextc = this.getNextInRowa(r, c);
            if (nextc != -1) {
                if (this.data[r][c] == 0) {
                    this.data[r][c] = this.data[r][nextc];
                    this.data[r][nextc] = 0;
                    c++;
                } else if (this.data[r][c] == this.data[r][nextc]) {
                    this.data[r][c] *= 2;
                    this.score += this.data[r][c]
                    this.data[r][nextc] = 0
                }
            } else {
                break;
            }
        }
    },
    getNextInRowa: function(r, c) {
        for (var i = c - 1; i >= 0; i--) {
            if (this.data[r][i] != 0) {
                return i
            }
        }
        return -1;
    },
    // 上移动
    moveTop: function() {
        var before = String(this.data) //移动之前
        for (var c = 0; c < 4; c++) {
            this.moveTopInRow(c);
        }
        var after = String(this.data) //移动之后
        if (before != after) {
            this.randomNum()
            if (this.isgameover()) {
                this.status = this.gameover;

            }
            this.dataView()
        }
    },
    moveTopInRow: function(c) { //单独处理每一列的逻辑
        for (var r = 0; r < 3; r++) {
            var nextr = this.getNextInRowaa(r, c);
            if (nextr != -1) {
                if (this.data[r][c] == 0) {
                    this.data[r][c] = this.data[nextr][c];
                    this.data[nextr][c] = 0;
                    r--;
                } else if (this.data[r][c] == this.data[nextr][c]) {
                    this.data[r][c] *= 2;
                    this.score += this.data[r][c]
                    this.data[nextr][c] = 0
                }
            } else {
                break;
            }
        }
    },
    getNextInRowaa: function(r, c) {
        for (var i = r + 1; i < 4; i++) {
            if (this.data[i][c] != 0) {
                return i
            }
        }
        return -1;
    },
    // 下移动
    moveButtom: function() {
        var before = String(this.data) //移动之前
        for (var c = 3; c >= 0; c--) {
            this.moveButtomInRow(c);
        }
        var after = String(this.data) //移动之后
        if (before != after) {
            this.randomNum()
            if (this.isgameover()) {
                this.status = this.gameover;

            }
            this.dataView()
        }
    },
    moveButtomInRow: function(c) { //单独处理每一列的逻辑
        for (var r = 3; r >= 0; r--) {
            var nextr = this.getNextInRowaaa(r, c);
            if (nextr != -1) {
                if (this.data[r][c] == 0) {
                    this.data[r][c] = this.data[nextr][c];
                    this.data[nextr][c] = 0;
                    r++;
                } else if (this.data[r][c] == this.data[nextr][c]) {
                    this.data[r][c] *= 2;
                    this.score += this.data[r][c]
                    this.data[nextr][c] = 0
                }
            } else {
                break;
            }
        }
    },
    getNextInRowaaa: function(r, c) {
        for (var i = r - 1; i >= 0; i--) {
            if (this.data[i][c] != 0) {
                return i
            }
        }
        return -1;
    },

}

调用开始函数

game.start()

绑定键盘上下左右事件（37，38，39，40分别对应键盘左上右下键）

document.onkeydown = function(e) {
    if (e.keyCode == 37) { 
        game.moveLeft()
    }
    if (e.keyCode == 39) {
        game.moveRight()
    }
    if (e.keyCode == 38) {
        game.moveTop()
    }
    if (e.keyCode == 40) {
        game.moveButtom()
    }
}

最后，给再来一次绑定事件

zai = function() {
    game.start()

}

以上就是2048小游戏的全部代码。希望大家也可以动手做出这个小游戏玩玩。

整体代码

html–index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/index.css">//引用代码的时候注意路径准确性
    <link rel="shortcut icon" href="https://www.2048.org/favicon.ico">//添加一个2048小图标
    <title>2048</title>
</head>

<body>
    <p class="grade">分数：<span id="score01">000</span> </p>
    <div class="all">
        <div class="cell n2" id="c00">2</div>
        <div class="cell n4" id="c01">4</div>
        <div class="cell n8" id="c02">8</div>
        <div class="cell n16" id="c03">16</div>
        <div class="cell n32" id="c10">32</div>
        <div class="cell n64" id="c11">64</div>
        <div class="cell n128" id="c12">128</div>
        <div class="cell n256" id="c13">256</div>
        <div class="cell n512" id="c20">512</div>
        <div class="cell n1024" id="c21">1024</div>
        <div class="cell n2048" id="c22">2048</div>
        <div class="cell n4096" id="c23">4096</div>
        <div class="cell n8192" id="c30">8192</div>
        <div class="cell" id="c31"></div>
        <div class="cell" id="c32"></div>
        <div class="cell" id="c33"></div>

    </div>
    <div class="gameover">
        <p>
            游戏结束！<br> 分数：<span id="score02">999999999</span> <br>
            <a href="">再来一次</a>
        </p>
    </div>
    <script src="./js/index.js"></script>//引用代码的时候注意路径准确性
</body>

</html>

css–index.css

* {
    padding: 0;
    margin: 0;
    font-family: Arial;
    text-decoration: none;
}

body {
    background-color: #FAF8EF;
}

.grade {
    width: 500px;
    margin: 0 auto;
    margin-top: 50px;
    font-size: 40px;
    text-align: center;
    font-weight: bold;
    color: #776E65;
}

.all {
    width: 500px;
    height: 500px;
    margin: auto;
    background-color: #BBADA0;
    border-radius: 10px;
}

.cell {
    width: 100px;
    height: 100px;
    margin-top: 20px;
    margin-left: 20px;
    background-color: #ccc0b3;
    float: left;
    border-radius: 5px;
    font-size: 24px;
    font-weight: bold;
    color: #776E65;
    line-height: 100px;
    text-align: center;
}

.n2 {
    background-color: #eee3da;
}

.n4 {
    background-color: #ede0c8;
}

.n8 {
    background-color: #f2b179;
}

.n16 {
    background-color: #f59563;
}

.n32 {
    background-color: #f67c5f;
}

.n64 {
    background-color: #f65e3b;
}

.n128 {
    background-color: #edcf72;
}

.n256 {
    background-color: #edcc61;
}

.n512 {
    background-color: #9c0;
}

.n1024 {
    background-color: #33b5e5;
}

.n2048 {
    background-color: #09c;
}

.n4096 {
    background-color: #a6c;
}

.n8192 {
    background-color: #93c;
}

.gameover {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.3);
}

.gameover p {
    width: 400px;
    height: 300px;
    background-color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -200px;
    border: solid 1px black;
    border-radius: 10px;
    font-size: 40px;
    line-height: 100px;
    text-align: center;
}

.gameover p a {
    background-color: #8F7A66;
    border-radius: 5px;
    padding: 15px;
    color: white;
}

js–index.js

var game = {
    data: [], //存放数据
    score: 0, //分数
    status: 0, //当前状态，时刻的监听，时刻的需要改变      游戏运行中的状态，结束的状态
    gameover: 0,
    gamerunning: 1,


    // 开始游戏的方法
    start: function() {
        this.score = 0;
        this.data = [
            [0, 0, 0, 0],
            [0, 0, 0, 0],
            [0, 0, 0, 0],
            [0, 0, 0, 0]
        ]
        this.status = this.gamerunning;
        this.randomNum()
        this.randomNum()
        this.dataView()
    },
    // 随机数的方法
    randomNum: function() {
        for (;;) {
            var r = Math.floor(Math.random() * 4);
            var c = Math.floor(Math.random() * 4);
            if (this.data[r][c] == 0) {
                var num = Math.random() > 0.2 ? 2 : 4;
                this.data[r][c] = num;
                break;
            }
        }
    },
    // 更新的视图
    dataView: function() {
        for (var r = 0; r < 4; r++) {
            for (var c = 0; c < 4; c++) {
                var div = document.getElementById('c' + r + c);
                if (this.data[r][c] != 0) {
                    div.innerHTML = this.data[r][c];
                    div.className = 'cell n' + this.data[r][c]
                } else {
                    div.innerHTML = ''
                    div.className = 'cell'
                }
            }
        }
        document.getElementById('score01').innerHTML = this.score; //设置游戏分数

        // 监测游戏状态
        if (this.status == this.gameover) {
            document.getElementById('score02').innerHTML = this.score;
            document.getElementsByClassName('gameover')[0].style.display = 'block'
        } else {
            document.getElementsByClassName('gameover')[0].style.display = 'none'
        }
    },
    // 判断游戏是否结束的方法   游戏没结束返回false 结束返回true
    isgameover: function() {
        for (var r = 0; r < 4; r++) {
            for (var c = 0; c < 4; c++) {
                // 没有结束，三种情况：：1.数组中还有0 2.左右相邻的有相同的  3.上下相邻有相同的
                if (this.data[r][c] == 0) {
                    return false
                }
                if (c < 3) {
                    if (this.data[r][c] == this.data[r][c + 1]) {
                        return false
                    }
                }
                if (r < 3) {
                    if (this.data[r][c] == this.data[r + 1][c]) {
                        return false
                    }
                }
            }
        }
        return true; //表示游戏已经结束
    },
    // 左移动
    moveLeft: function() {
        var before = String(this.data) //移动之前
            //处理移动的逻辑

        for (var r = 0; r < 4; r++) {
            this.moveLeftInRow(r);
        }

        var after = String(this.data) //移动之后
        if (before != after) {
            this.randomNum()
            if (this.isgameover()) {
                this.status = this.gameover;
            }
            this.dataView()
        }
    },
    moveLeftInRow: function(r) { //单独处理每一行的逻辑
        // 0200   2000
        // 0220   4000
        // 2202   4200
        // 2222   4022  4202  4220   4400
        for (var c = 0; c < 3; c++) {
            var nextc = this.getNextInRow(r, c);
            if (nextc != -1) {
                if (this.data[r][c] == 0) {
                    this.data[r][c] = this.data[r][nextc];
                    this.data[r][nextc] = 0;
                    c--;
                } else if (this.data[r][c] == this.data[r][nextc]) {
                    this.data[r][c] *= 2;
                    this.score += this.data[r][c]
                    this.data[r][nextc] = 0
                }
            } else {
                break;
            }
        }
    },
    getNextInRow: function(r, c) {
        for (var i = c + 1; i < 4; i++) {
            if (this.data[r][i] != 0) {
                return i
            }
        }
        return -1;
    },

    // 右移动
    moveRight: function() {
        var before = String(this.data) //移动之前
        for (var r = 3; r >= 0; r--) {
            this.moveRightInRow(r);
        }
        var after = String(this.data) //移动之后
        if (before != after) {
            this.randomNum()
            if (this.isgameover()) {
                this.status = this.gameover;

            }
            this.dataView()
        }
    },
    moveRightInRow: function(r) { //单独处理每一行的逻辑
        for (var c = 3; c >= 0; c--) {
            var nextc = this.getNextInRowa(r, c);
            if (nextc != -1) {
                if (this.data[r][c] == 0) {
                    this.data[r][c] = this.data[r][nextc];
                    this.data[r][nextc] = 0;
                    c++;
                } else if (this.data[r][c] == this.data[r][nextc]) {
                    this.data[r][c] *= 2;
                    this.score += this.data[r][c]
                    this.data[r][nextc] = 0
                }
            } else {
                break;
            }
        }
    },
    getNextInRowa: function(r, c) {
        for (var i = c - 1; i >= 0; i--) {
            if (this.data[r][i] != 0) {
                return i
            }
        }
        return -1;
    },
    // 上移动
    moveTop: function() {
        var before = String(this.data) //移动之前
        for (var c = 0; c < 4; c++) {
            this.moveTopInRow(c);
        }
        var after = String(this.data) //移动之后
        if (before != after) {
            this.randomNum()
            if (this.isgameover()) {
                this.status = this.gameover;

            }
            this.dataView()
        }
    },
    moveTopInRow: function(c) { //单独处理每一列的逻辑
        for (var r = 0; r < 3; r++) {
            var nextr = this.getNextInRowaa(r, c);
            if (nextr != -1) {
                if (this.data[r][c] == 0) {
                    this.data[r][c] = this.data[nextr][c];
                    this.data[nextr][c] = 0;
                    r--;
                } else if (this.data[r][c] == this.data[nextr][c]) {
                    this.data[r][c] *= 2;
                    this.score += this.data[r][c]
                    this.data[nextr][c] = 0
                }
            } else {
                break;
            }
        }
    },
    getNextInRowaa: function(r, c) {
        for (var i = r + 1; i < 4; i++) {
            if (this.data[i][c] != 0) {
                return i
            }
        }
        return -1;
    },
    // 下移动
    moveButtom: function() {
        var before = String(this.data) //移动之前
        for (var c = 3; c >= 0; c--) {
            this.moveButtomInRow(c);
        }
        var after = String(this.data) //移动之后
        if (before != after) {
            this.randomNum()
            if (this.isgameover()) {
                this.status = this.gameover;

            }
            this.dataView()
        }
    },
    moveButtomInRow: function(c) { //单独处理每一列的逻辑
        for (var r = 3; r >= 0; r--) {
            var nextr = this.getNextInRowaaa(r, c);
            if (nextr != -1) {
                if (this.data[r][c] == 0) {
                    this.data[r][c] = this.data[nextr][c];
                    this.data[nextr][c] = 0;
                    r++;
                } else if (this.data[r][c] == this.data[nextr][c]) {
                    this.data[r][c] *= 2;
                    this.score += this.data[r][c]
                    this.data[nextr][c] = 0
                }
            } else {
                break;
            }
        }
    },
    getNextInRowaaa: function(r, c) {
        for (var i = r - 1; i >= 0; i--) {
            if (this.data[i][c] != 0) {
                return i
            }
        }
        return -1;
    },

}


game.start()



document.onkeydown = function(e) {
    if (e.keyCode == 37) {
        game.moveLeft()
    }
    if (e.keyCode == 39) {
        game.moveRight()
    }
    if (e.keyCode == 38) {
        game.moveTop()
    }
    if (e.keyCode == 40) {
        game.moveButtom()
    }
}
zai = function() {
    game.start()

}

本次2048小游戏的所有代码就放在这里了,2048的源码我也上传到csdn了,有需要的朋友可以免费下载,如果找不到,可以在评论区留言,我也可以直接发给大家!谢谢！如果代码有什么不足的希望大家及时交流，补充，谢谢大家！

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

前端开发小游戏

javascript

css

html

CSS3

前端小游戏2048（一步步详解附带源代码，源码上传到csdn,可以免费下载） 的相关文章

  • jquery window.open 在 ajax 成功中被阻止

    尝试在我的 ajax 成功调用中打开一个新的浏览器窗口 但是 它被阻止为弹出窗口 我做了一些搜索 发现用户事件需要绑定到 window open 才能避免这种情况发生 我还找到了这个解决方案 您可以在 ajax 之前打开一个空白窗口 然后在

  • 防止用户在下拉菜单中选择默认值

    我试图阻止用户选择默认的下拉菜单选项 有没有办法在下拉菜单选项中添加文本而不是值 我的代码

  • 如何更改 Bootstrap 3 div 列顺序

    正在做我的第一个响应式设计 在 Bootstrap 3 中可能会出现类似的情况 在 lg 上更改此设置 a b c sm 上的这个 a c b 您可以使用两个 div 一个用于第一类型的布置 另一个用于第二类型的布置 第一个仅在 lg 中显

  • 如何使用 JavaScript 获取没有 HTML 元素的纯文本？

    我的 HTML 中有 1 按钮和一些文本 如下所示 function get content I don t know how to do in here

  • 在闪亮的数据表中为每个单元格显示工具提示或弹出窗口？

    有没有什么方法可以为 r闪亮数据表中的每个单元格获取工具提示 有很多方法可以获取悬停行或列 但我找不到一种方法来获取行和列索引并为每个单元格显示不同的悬停工具提示 任何人都可以修改以下代码吗 library shiny library DT

  • Jquery 中的动态滚动位置

    请帮助我解决以下情况 我有 3 个页面 当滚动到达第二页时 用户滚动页面 它必须找到特定的 ID 然后触发一个函数 一旦第三页开始 另一个函数就会触发 根据要求我不应该使用任何插件

  • 如果链接包含特定文本，jQuery 将类添加到 href

    我的网站上的列表中有一些动态填充的链接 这些链接链接到文件 是否可以使用 jQuery 查看文件名是否以 pdf 结尾 并在 href 或类似的链接文本以 mp3 结尾时添加一个类 例如 我的列表中有以下链接 文件1 pdf 歌曲1 mp3

  • Google Chrome 106 可拖动导致元素消失

    使用拖放元素时 绝对定位元素中包含的大多数其他元素都会从屏幕上消失 如果我调整窗口大小 这些元素会出现 但在开始拖动时会再次消失 我在最新版本的 Google Chrome 106 和 Beta 版本 107 0 5304 18 以及现在的

  • 在d3.js中将2D形状转换为3D，并根据ANGULAR中的值调整高度

    我正在使用 d3 js v6 创建以下 2D 图表表示的 3D 图表 这个圆圈中有多个正方形 每个正方形都根据值分配了一种颜色 值越大 正方形越暗 现在我想将其转换为 3D 形状 其中当值变高时 只有特定正方形的高度会增加 因此结果在某种程

  • Typeahead.js substringMatcher 函数说明

    我只是在做一些研究Typeahead js这是一个非常酷的图书馆 感谢文档 我已经成功地获得了一个基本的示例 该文档也非常好 但是我试图弄清楚以下代码块实际上在做什么 var substringMatcher function strs r

  • JS用正则表达式替换数字

    我有元素的标识符 如下所示 form book 1 2 3 我想要的是用其他值替换该标识符中的第二个数字 我将函数 match 与以下正则表达式一起使用 var regexp d d d 但它返回我包含的数组 1 2 3 2 因此 当我尝试

  • IE11不监听MSFullscreenChange事件

    我正在尝试使用 Bigscreen js 在 IE11 中使用全屏 但 IE11 不监听 MS FullscreenChange 事件 document addEventListener MSFullscreenChange functio

  • 单击关闭按钮后不显示 Google 一键登录 UI

    我正在尝试按照本指南使新的谷歌一键登录工作 https developers google com identity one tap web https developers google com identity one tap web

  • 类型“typeof import("/home/kartik/Desktop/Ecommerce/ecommerce/node_modules/firebase/index")”上不存在属性“auth”。 TS(2339)

    我是 FireBase 的初学者 我正在尝试使用 Angular 通过 FireBase 实现 Google 登录 我在 auth 时收到上述错误 我特此附上login component ts和package json package l

  • 为什么“tbody”不设置表格的背景颜色？

    我在用 tbody 作为 CSS 选择器来设置background color在一个表中 我这样做是因为我有多个 tbody 表内的部分 它们具有不同的背景颜色 我的问题是 当使用border radius在细胞上 细胞不尊重backgro

  • 悬停时为 SVG 制作动画

    我正在尝试在悬停时为 SVG 文件设置动画 默认情况下 它可以使用 svg 函数实现出色的动画效果 例如

  • 查询为空 Node Js Sequelize

    我正在尝试更新 Node js 应用程序中的数据 我和邮递员测试过 我的开发步骤是 从数据库 MySQL 获取ID为10的数据进行更新 gt gt 未处理的拒绝SequelizeDatabaseError 查询为空 我认识到 我使用了错误的

  • 当用户单击链接时，如何记录 MixPanel 事件？

    当用户单击某种类型的链接时 我试图在 MixPanel 中记录一个事件 我正在使用 JQuery 不引人注意地完成此操作 据我所知 我需要添加一个回调函数 以便在记录事件后将用户带到 URL 这是我正在使用的代码 不幸的是

  • 数据表日期范围过滤器

    如何添加日期范围过滤器 like From To 我开始进行常规搜索和分页等工作 但我不知道如何制作日期范围过滤器 我正在使用数据表 1 10 11 版本 My code var oTable function callFilesTable

  • 为范围旋钮 ionic-range 添加边框颜色

    我正在使用离子范围添加范围滑块 并想向范围旋钮添加边框 由于它的 ionic4 和范围旋钮是 Shadow dom 的一部分 我无法使用范围旋钮的 border 属性直接更改边框 我已附上我想要实现的图像 范围旋钮周围有白色边框 现有属性只

随机推荐

  • STM32入门：Systick（嘀嗒定时器）学习

    Systick 系统嘀嗒定时器 学习 一 Systick 介绍 Systick 是 STM32 的一个系统定时器 又名系统嘀嗒定时器 是一个 24 位的倒计数定时器 当计数到 0 时 将从 RELOAD 寄存器中自动重装载定时初值 开始新一

  • Flutter 状态管理之provide

    什么是状态管理 通俗点来讲就是 对一个数据源的统一管理 比如 列表和详情都有收藏按钮 在详情收藏之后 列表也要同步收藏状态 类似的还有签到 领红包 已读等多种业务场景 在项目小 业务简单的时候可能还不需要或者比较好管理 当项目逐渐庞大 业务

  • PGSQL获取过去30天，7天，昨天，今天的数据

    select count as allBookCount count filter where createtime between SELECT current date interval 30 day and current date

  • com.mysql.cj.jdbc.Driver和com.mysql.jdbc.Driver的区别

    一 驱动报错 driverClassName com mysql jdbc Driver url jdbc mysql db1 useUnicode true characterEncoding utf8 useSSL false user

  • ChatGPT fine tune微调+prompt介绍

    目录 1 如何使用ChatGPT 1 1 图片生成 image generation 1 2 对话 chat 1 3 中文纠错 Chinese Spelling Correct 1 4 关键词提取 keyword extract 1 5 抽

  • Blender的一些使用小结,在辣椒酱基础上加了点,会持续更新

    Blender的一些使用小结 在辣椒酱基础上加了点 会持续更新 操作 快捷键 边线折痕 编辑模式 SHIFT E 点倒角 编辑模式 Ctrl Shift B 按P选择内外 加选 编辑模式 Ctrl 减选 编辑模式 Ctrl 分块选择 编辑模

  • 机器学习如何提高训练模型结果的准确度

    提高输出结果的准确度可以从以下几个方面入手 1 调整超参数 可以尝试调整模型的超参数 比如学习率 迭代次数 隐层维度 卷积核大小等 找到最优的超参数组合来提高准确度 2 增加训练数据 增加训练数据可以让模型更好地学习到数据的特征 从而提高准

  • sql分别从两个表取出_SQL--多表查询

    前几篇文章中 我们查询的数据都是在一张表中进行操作的 而在实际工作中 我们经常需要在不同的表中查询数据 今天我们来学习从多张表中获取数据的方法 多表查询 表的加法 表的联结 用SQL联结解决业务问题 case 表达式 1 表的加法 unio

  • 机器学习三-xmeans

    能力有限 只是表面上理解了公式和图所表达的内容 论文参见 点击打开链接 已有文章分析参见 点击打开链接 具体java代码实现 点击打开链接 核心应该是 分割前BIC分数 gt 分割后BIC分数 结论是 原簇可分割为两个新簇 图示如下 公式如

  • 模板观念和函数模板

    模板 模板是C 的一种特性 允许函数或类 对象 通过泛型的形式表现或运行 模板可以使函数或类在对应不同的型别的时候正常工作 无需为每一个型别都写一份代码 两种模板 类模板 使用泛型参数的类 函数模板 使用泛型参数的函数 模板实例化 模板的声

  • AcWing.102. 最佳牛围栏（二分&&双指针&&前缀和）

    输入样例 10 6 6 4 2 10 3 8 5 9 4 1 输出样例 6500 解析 1 由题意可知答案位于 1 2000以内 所以可以二分这个区间 2 对于每个mid 我们要看是否存在一个区间 这个区间的平均值大于mid 如果存在返回t

  • 使用Spring StateMachine框架实现状态机

    Spring StateMachine框架可能对于大部分使用Spring的开发者来说还比较生僻 该框架目前差不多也才刚满一岁多 它的主要功能是帮助开发者简化状态机的开发过程 让状态机结构更加层次化 前几天刚刚发布了它的第三个Release版

  • 程序媛怎样规划自己的人生

    上个月我跟一个很优秀的程序媛聊天 她感到职业上有些迷茫 希望向我寻求答案 我让她先自己想一想 说这个月专门写一篇文章来讲一讲 其实我在等一个我自己的答案 但是这个月还是没等到 但是说过的话要算数 我还是写一篇来聊聊这个问题 我不能回答其他任

  • 自定义QDockWidget的标题栏

    左侧为自定义 右侧为原始 通过QDockWidget setTitleBarWidget 实现标题栏自定义 MDockWidget cpp include MDockWidget h include

  • Elasticsearch 安装配置 外网访问 及 后台启动

    本文转自http www jianshu com p 658961f707d8 作者 咪博士 感谢咪博士分享 Elasticsearch的安装总体来说还是相当简单的 当然中间也会有些小坑 不过大家也不必太过担心 咪博士将给大家详细演示如何在

  • qq批量登录软件_QQ账号永久冻结

    昨天上午我的QQ被永久冻结了 理由是批量加好友批量登录啥的 这个理由看的我也是一脸懵逼 我一个学生QQ的好友也就一百多个 我的QQ主要也就是打打游戏跟朋友养个花火聊天 怎么就批量加好友了呢 封号前一天我还跟朋友打游戏打到后半夜 第二天直接给

  • Python--爬取天气网站天气数据并进行数据分析

    目的 从天气网站中爬取数据 生成excel表格 里面存储南昌市近十一年的天气情况 并对爬取产生的数据进行数据分析 第一步 编写代码进行数据爬取 首先 导入 requests 模块 并调用函数 requests get 从天气的网站上面获 取

  • 【满分】【华为OD机试真题2023 JS】获得完美走位

    华为OD机试真题 2023年度机试题库全覆盖 刷题指南点这里 获得完美走位 时间限制 1s 空间限制 256MB 限定语言 不限 题目描述 在第一人称射击游戏中 玩家通过键盘的A S D W四个按键控制游戏人物分别向左 向后 向右 向前进行

  • xpath解析页面中文乱码

    res requests get url headers headers html etree HTML res text 这样写后面进行处理时得到的内容乱码了 改为以下形式 可以正常显示中文 html etree HTML res con

  • 前端小游戏2048（一步步详解附带源代码，源码上传到csdn,可以免费下载）

    2048小游戏 2048是前端开发必经的一个小游戏 2048小游戏包含了HTML CSS和JavaScript 简介 2048 是一款益智小游戏 这款游戏是由年仅19岁的意大利程序员加布里勒希鲁尼 Gabriele Cirulli 开发出来

热门标签