一纸情深
一纸情深

js实现2048小游戏

2048 小游戏

2048小游戏效果图

js实现2048小游戏_第1张图片

1. 2048游戏基本布局的搭建


<html>
    <head>
        <meta charset="utf-8" />
        <title>2048小游戏title>
        //引入css样式
        <link rel="stylesheet" type="text/css"  href="css/2048.css" />
    head>
    <body>
         //2048小游戏计分
        <p class="score">SCORE:<span id="score">0span>p>
        <div class="gamebox">
             //2048小游戏第一行
            <div class="cell" id="c00">div>
            <div class="cell" id="c01">div>
            <div class="cell" id="c02">div>
            <div class="cell" id="c03">div>
             //2048小游戏第二行
            <div class="cell" id="c10">div>
            <div class="cell" id="c11">div>
            <div class="cell" id="c12">div>
            <div class="cell" id="c13">div>
             //2048小游戏第三行
            <div class="cell" id="c20">div>
            <div class="cell" id="c21">div>
            <div class="cell" id="c22">div>
            <div class="cell" id="c23">div>
             //2048小游戏第四行
            <div class="cell" id="c30">div>
            <div class="cell" id="c31">div>
            <div class="cell" id="c32">div>
            <div class="cell" id="c33">div>
        div>
        //2048小游戏游戏结束的画面
        <div class="gameover" id="gameover">
            <p>
                GAME OVER!!!<br/>
                SCORE:<span id="scoreend">span><br/>
                <a id="try">try again!a>
            p>
        div>
        //引入js脚本
        <script  type="text/javascript"  src="js/2048.js" >script>        
    body>
html>

2. 2048游戏游戏界面样式的设计（2048.css）

//初始化界面，设置字体的样式
*{
    margin:0;
    padding:0;
    font-family:arial;
}

 //设置2048计分界面的宽度、居中显示和其中的字体样式
 .score{
    width:480px;
    margin:100px auto 0;
    font-size:50px;
    font-weight:bold;
 }
 //设置2048的计分界面分数的颜色为红色
 .score>span{
    color:red;
 }

 .gamebox{
    width:480px;
    height:480px;
    background:#fbd5d5;
    margin:0 auto;
    border-radius:10px;
 }
 //设置2048小游戏单元格的样式
 .cell{
    width:100px;
    height:100px;
    background-color:#fbf8cd;
    float:left;
    border-radius:5px;
    margin:16px 0 0 16px;
    font-size:50px;
    font-weight:bold;
    text-align:center;
    line-height:100px;
    color:white;
 }

 //设置单元格代码数字分别是2、4、8、16、32等等的样式
 .n2{
    background-color:#eee3da;color:#776e65}
 .n4{background-color:#ede0c8;color:#776e65}
 .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;font-size:40px}
 .n2048{background-color:#09c;font-size:40px}
 .n4096{background-color:#a6c;font-size:40px}
 .n8192{background-color:#93c;font-size:40px}

//设置2048游戏结束的样式
 .gameover{
     position:absolute;
     left:0;
     top:0;
     bottom:0;
     right:0;
     background-color: rgba(66,66,66,.2);
     display:none;
}

.gameover>p{
    width:400px;
    height:200px;
    background:#fff;
    border:1px solid #000;
    font-size:36px;
    font-weight:bold;
    border-radius:10px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-200px;
    margin-top:-100px;

    text-align:center;
    line-height:66px;
    font-weight:bold;
}

.gameover a{
    background-color:#9F8d77;
    padding:10px;
    border-radius:5px;
    color:white;
    text-align: none;
}

3. 2048游戏功能的实现（js实现）

//创建一个对象，这个对象记录了游戏里面所有的属性和方法
var game = {
        data: [],//创建了一个存放游戏数据的数组
        score: 0, //定义游戏的分数
        status: 1, //自己定义一个状态，时刻的去跟游戏的状态进行比较，判断游戏是否结束
        gamerunning: 1,  //游戏如果处于运行中，给个标识
        gameover: 0,//游戏如果结束，给个标识

         //开始的时候需要初始化游戏的数据
        start: function() {
     
            for(var r = 0; r < 4; r++) {
                game.data[r] = [];
                for(var c = 0; c < 4; c++) {
                    game.data[r][c] = 0;
                }
            }
            //开始的时候需要初始化游戏的分数
            game.scroe = 0;
             //开始的时候需要初始化游戏的状态
            game.status = game.gamerunning;

            //游戏开始的时候有两个随机数，就调用两次
            game.randomNum();
            game.randomNum();

            game.dataView();
        },

         //生成随机数的方法。生成随机数，在2或者4。想办法放到数组中去，并且只能在0的位置替换
        randomNum: function() {
     
            for(;;) {
    //无限循环，直到找到为0的位置为止
                var r = Math.floor(Math.random() * 4); //随机生成了一个行
                var c = Math.floor(Math.random() * 4); //随机生成了一个列
                if(game.data[r][c] == 0) {
    //只有当位置为0的时候才能生成
                    var num = Math.random() > 0.5 ? 2 : 4;//生成2或者4
                    game.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(game.data[r][c] != 0) {
                        div.innerHTML = game.data[r][c];
                        div.className = "cell n" + game.data[r][c];
                    } else {
                        div.innerHTML = "";
                        div.className = "cell";
                    }
                }
            }
            //找到分数的id进行赋值
            document.getElementById("score").innerHTML = game.score;
            if(game.status == game.gameover) {
                document.getElementById("scoreend").innerHTML = game.score;
                document.getElementById("gameover").style.display = "block";
            } else {
                document.getElementById("gameover").style.display = "none";
            }
        },
        //游戏结束判断
        isGameOver: function() {
     
            for(var r = 0; r < 4; r++) {
                for(var c = 0; c < 4; c++) {
                    if(game.data[r][c] == 0) {
                        return false; //表示游戏没有结束
                    }
                    if(c < 3) {
    //不需要比较最后一个
                        if(game.data[r][c] == game.data[r][c + 1]) {
                            return false;
                        }
                    }
                    if(r < 3) {
                        if(game.data[r][c] == game.data[r + 1][c]) {
                            return false;
                        }
                    }
                }
            }
            return true;
        },
  }

        //向左移动
        moveLeft: function() {
     
            // 移动之前
            var before = game.data.toString();
            // 处理移动的逻辑
            for(var r = 0; r < 4; r++) {
                game.moveLeftInRow(r); // 只处理第r行
            }
            // 移动之后
            var after = game.data.toString();
            if(before != after) {
                game.randomNum();
                if(game.isGameOver()) {
                    game.status = game.gameover;
                }
                game.dataView();
            }
        },

        moveLeftInRow: function(r) {
     
            for(var c = 0; c < 3; c++) {
                var nextc = game.getNextInRow(r, c);
                if(nextc != -1) {
                    if(game.data[r][c] == 0) {
                        game.data[r][c] = game.data[r][nextc];  //用找到的位置进行替换
                        game.data[r][nextc] = 0;//把找到的位置改变成0
                        c--; //让索引值继续留在原地
                    } else if(game.data[r][c] == game.data[r][nextc]) {
                        game.data[r][c] *= 2;
                        game.score += game.data[r][c];
                        game.data[r][nextc] = 0;
                    }
                } else {
                    break;
                }
            }
        },
        getNextInRow: function(r, c) {
     
            for(var i = c + 1; i < 4; i++) {
                if(game.data[r][i] != 0) {
                    return i;//如果在后面找到了,直接返回索引
                }
            }
            return -1;//如果没有找到，就返回一个标识符
        },
        //向右移动 
        moveRight: function() {
     
            var before = game.data.toString();
            for(var r = 0; r <4; r++) {
                game.moveRightInRow(r);
            }
            var after = game.data.toString();
            if(before != after) {
                game.randomNum();
                if(game.isGameOver()) {
                    game.status = game.gameover;
                }
                game.dataView();
            }
        },

        moveRightInRow: function(r) {
     
            for(var c = 3; c > 0; c--) {
                var after = game.getNextrInRow(r, c);
                if(after != -1) {
                    if(game.data[r][c] == 0) {
                        game.data[r][c] = game.data[r][after];
                        game.data[r][after] = 0;
                        c++; //让索引值继续留在原地
                    } else if(game.data[r][c] == game.data[r][after]) {
                        game.data[r][c] *= 2;
                        game.score += game.data[r][c];
                        game.data[r][after] = 0;
                    }

                } else {
                    break;
                }
            }
        },
        getNextrInRow: function(r, c) {
     
            for(var i = c - 1; i >= 0; i--) {
                if(game.data[r][i] != 0) {
                    return i; //如果在后面找到了,直接返回索引
                }
            }
            return -1;
        },
//向上移动
moveTop: function() {
     
            var before = game.data.toString();
            for(var c = 0; c < 4; c++) {
                game.moveTopInRow(c);
            }
            var after = game.data.toString();
            if(before != after) {
                game.randomNum();
                if(game.isGameOver()) {
                    game.status = game.gameover;
                }
                game.dataView();
            }
        },

        moveTopInRow: function(c) {
     
            for(var r = 0; r < 4; r++) {
                var top = game.getNextInCol(r, c);
                if(top != -1) {
                    if(game.data[r][c] == 0) {
                        game.data[r][c] = game.data[top][c];
                        game.data[top][c] = 0;
                        r--;
                    } else if(game.data[r][c] == game.data[top][c]) {
                        game.data[r][c] *= 2;
                        game.score += game.data[r][c];
                        game.data[top][c] = 0;
                    }
                } else {
                    break;
                }
            }
        },

        //判断在某一列的数组中的元素是否有不为0的，如果有，返回该行的下标，如果没有，返回-1.
        getNextInCol: function(r, c) {
     
            for(var i = r + 1; i < 4; i++) {
                if(game.data[i][c] != 0) {
                    return i;//如果在后面找到了,直接返回索引
                }
            }
            return -1;
        },

        //向下移动
        moveBottom: function() {
     
            var before = game.data.toString();
            for(var c = 0; c < 4; c++) {
                game.moveBottomInRow(c);
            }
            var after = game.data.toString();
            if(before != after) {
                game.randomNum();
                if(game.isGameOver()) {
                    game.status = game.gameover;
                }
                game.dataView();
            }
        },

        moveBottomInRow: function(c) {
     
            for(var r = 3; r >= 1; r--) {
                var bottom = game.getNextsInCol(r, c);
                if(bottom != -1) {
                    if(game.data[r][c] == 0) {
                        game.data[r][c] = game.data[bottom][c];
                        game.data[bottom][c] = 0;
                        r++;
                    } else if(game.data[r][c] == game.data[bottom][c]) {
                        game.data[r][c] *= 2;
                        game.score += game.data[r][c];
                        game.data[bottom][c] = 0;
                    }
                } else {
                    break;
                }
            }
        },
        //判断在某一列的数组中的元素是否有不为0的，如果有，返回该行的下标，如果没有，返回-1.
        getNextsInCol: function(r, c) {
     
            for(var i = r - 1; i >= 0; i--) {
                if(game.data[i][c] != 0) {
                    return i;//如果在后面找到了,直接返回索引
                }
            }
            return -1;
        },
        //如果游戏重新开始，把分数重置为0，再开始进行游戏
        demo:function(){
     
            if(game.status==game.gameover)
            {
                game.score=0;
                game.start();
            }
        }

//开始游戏
game.start();
//鼠标按下上、下、左、右键，2048小游戏中的单元格里面的方块分别向上、下、左、右移动。
document.onkeydown=function(event){
    var  event=event||window.event;
      if(event.keyCode==37){
        game.moveLeft();
      }
      if(event.keyCode==39){
        game.moveRight();
      }
      if(event.keyCode==38){
        game.moveTop();
      }
      if(event.keyCode==40){
        game.moveBottom();
      }
}
//如果按下再试一次的按钮，游戏重新开始
var try1=document.getElementById("try");
try1.onclick=function(){
    game.demo(); 
}

你可能感兴趣的:(js实现2048小游戏)

  • Python——登录后获取cookie访问页面 尖叫的太阳
    importrequestsurl="https://kyfw.12306.cn/otn/view/index.html"#网址首页https://kyfw.12306.cn/otn/view/index.html的cookieheaders={'User-Agent':'Mozilla/5.0(WindowsNT6.1;Win64;x64)','Cookie':'JSESSIONID=3330D
  • 众小二微易购平台真的能赚钱吗？最全攻略来了！ 浮沉导师
    在当今数字化和平台化主导的经济潮流中，内容电商已深度融入各行各业，成为推动社会民生发展的强大力量。三只羊集团，作为优质内容的创造者，始终坚守“有家的地方有工作”的使命，其精心打造的众小二-微易购小程序，正为众多渴望改变的人们提供绝佳机遇。微易购小程序不仅是一个购物平台，更是一个实现梦想的舞台。在这里，您能以小二郎的身份，通过自用省钱和分享赚钱的方式，轻松增加收入。申请成为小二郎后，自购享受立减优惠
  • Systemd：现代 Linux 系统服务管理的核心 嵌入式Jerry Linux+内核应用程序linux物联网系统架构服务器网络git
    Systemd：现代Linux系统服务管理的核心引言Systemd是一种现代的系统和服务管理器，用于在Linux系统启动时初始化用户空间，并通过服务管理和资源控制实现系统的自动化管理。自发布以来，Systemd已逐渐取代传统的SysVinit和Upstart，成为主流Linux发行版的默认初始化系统。它通过并行化启动、服务依赖管理、事件驱动的服务监控、日志管理等功能，为Linux系统带来了更高效和
  • 学习游戏制作记录（敌人的状态机，敌人和玩家的共同继承以及实现敌人的移动和待机）7.20 ★YUI★ 学习游戏unityc#
    1.敌人的状态机敌人的状态与玩家类似，同样需要敌人，敌人状态和管理状态的状态机，让我们创建三个脚本：Enemy，EnemyState，EnemyStateMachine。EnemyState脚本：publicclassEnemyState//不需要继承，因为它将作为父类{protectedEnemyStateMachineenemyStateMachine;//状态机protectedEnemye
  • 借助零信任网格重塑分布式MCP与LLM访问：安全、灵活的下一代架构实践 码力金矿 机器学习深度学习人工智能人工智能自动化运维数据库mysqlpythonjava
    在数字化转型的浪潮中，AI应用与分布式系统正在加速融合。传统架构中，MCP（模型上下文协议）服务与LLM（大语言模型）工具的部署常面临安全暴露、网络复杂性、跨防火墙通信等挑战。本文将结合零信任网格（ZTM,ZeroTrustMesh）与Flomesh技术，探索一种更安全、灵活的分布式架构方案，让MCP服务无需VPN或静态IP即可实现全球可访问，同时为LLM应用提供统一的安全层。一、传统分布式架构的
  • Python一次性批量下载网页内所有链接 Zhy_Tech python前端开发语言
    需要下载一个数据集，该数据集每一张图对应网页内一条链接，如下图所示。一开始尝试使用迅雷，但是迅雷一次性只能下载30条链接。采用Python成功实现一次性批量下载。importosimportrequestsfrombs4importBeautifulSoup#目标网页的URLurl="https://"#请将此处替换为实际的网页URL#指定下载文件的文件夹路径#使用原始字符串download_fo
  • 用 K-means 算法实现水果分堆 wh_xia_jun AI+医疗算法kmeans机器学习
    先看运行效果：importnumpyasnpimportmatplotlib.pyplotaspltfromsklearn.clusterimportKMeans#生成模拟数据（两个高斯分布的混合点集）np.random.seed(42)X1=np.random.randn(100,2)+np.array([2,2])#第一簇数据，中心在(2,2)X2=np.random.randn(100,2)
  • USB串口通信、握手协议、深度学习等技术要点 深度学习教程, 深度学习人工智能网络协议
    基于OpenMV的智能车牌识别系统：从硬件到算法的完整实现前言本文将详细介绍一个基于OpenMV微控制器的智能车牌识别系统的设计与实现。该系统集成了嵌入式视觉处理、串口通信协议、深度学习OCR识别等多种技术，实现了从图像采集到车牌识别的完整流程。系统架构概述整体设计思路该车牌识别系统采用分布式架构设计，将计算密集型任务与嵌入式控制分离：┌─────────────┐USB串口通信┌────────
  • 动漫博人传：迪鲁达转而对付小葵，没川木挡着，鸣人能护住她吗？ 颚之巨人马赛尔
    在动漫中，迪鲁达不止把矛头对准一个人，为了实现目的，她可以对付在场所有人。文/颚之巨人马赛尔不少人认为，以鸣人的实力对付迪鲁达就跟玩儿似的，先前的狼狈只是假装，为的就是套话。这话说得没错，鸣人就是想要得到足够的情报，才跟迪鲁达虚与委蛇。然而，当迪鲁达突然变脸的时候，他没有足够的能力控场，而是落于被动。迪鲁达转而对付小葵，没有川木挡着，鸣人能护住她吗？1.jpg1****、从川木的手臂来看，迪鲁达的
  • Shell 脚本加密操作：让用户可执行，不可查看脚本源码 —— shc 实战避坑指南
    在日常运维和开发中，Shell脚本常包含敏感信息（如数据库密码、API密钥、服务器IP等）。若直接分发脚本，源码暴露风险极高。此时，加密脚本（可执行但不可读）成为刚需。常见的shc工具可将脚本编译为二进制文件，实现“能执行但不可看”的效果。一、shc加密脚本的使用方法安装shc包管理器安装（推荐）：#Ubuntu/Debiansudoaptinstallshc#CentOS/RHELsudoyum
  • 法律 AcheflourLiu
    法的概念1.法是一种行为规范【法规定了应为可为模式。】*考法:（1）法调整思想吗？（2）法是调整行为的唯一规范？2.法是由特定物质生活条件（经济基础）决定的。*考法:单选题（1）法由谁决定的？【经济基础】（2）法的最终决定因素是什么？【物质制约性】3.法是统治阶级意志的体现。理解:法是统治阶级实现统治的工具。*考法:单选题，会判断选项的说法是对还是错*（1）法体现（统治阶级）的意志。统治阶级是指（
  • 深入浅出理解 IOC（控制反转）与 DI（依赖注入） snowfoootball 前后端java开发语言spring
    深入浅出理解IOC（控制反转）与DI（依赖注入）深入理解Spring框架中的IoC与DI在学习Spring框架时，控制反转（IoC）和依赖注入（DI）是不可回避的核心概念。它们不仅是设计模式的体现，更是实现高内聚、低耦合架构的关键。本文将从“为何需要”与“如何实现”两个维度，深入剖析这两个概念。一、为何需要IoC与DI：面向对象设计的挑战考虑以下传统的Java代码示例：publicclassOrd
  • 初探贪心算法 -- 使用最少纸币组成指定金额 是小V呀 C++贪心算法算法c++python
    python实现：#对于任意钱数，求最少张数n=int(input("money:"))#输入钱数bills=[100,50,20,10,5,2,1]#纸币面额种类total=0forbinbills:count=n//b#整除面额求用的纸币张数ifcount>0:print(f"{b}纸币张数{count}")n-=count*b#更新剩余金额total+=count#累加纸币数量print(f
  • 数据结构与算法-09贪心算法&动态规划 阿诚学java 数据结构与算法学习记录贪心算法动态规划ios
    贪心算法&动态规划1贪心算法介绍贪心算法（GreedyAlgorithm）是一种在每一步选择中都采取在当前状态下最好或最优（即最有利）的选择，从而希望导致结果是全局最好或最优的算法。贪心算法通常用于解决优化问题，如最小化成本、最大化收益等。然而，贪心算法并不总是能够得到全局最优解，但它具有直观、高效、易于实现等优点，因此在许多实际问题中得到了广泛应用。基本思想贪心算法总是从问题的某一个初始解出发。
  • 7、开启C与Unity 3D的编程之旅 珊珊333333 UnityC#Unity3D编程基础
    开启C#与Unity3D的编程之旅1.前期准备在进行每一个教程之前，都有一个名为Scene的场景文件。在整个学习过程中，教程通常从下载项目中的Scene文件开始。打开场景的方法有两种：-直接在项目面板的Assets目录下双击场景图标。-选择File→OpenScene来打开项目中的任何场景。2.学习回顾与要点创建并将新的C#文件分配给对象并不复杂，在Unity3D编辑器中有多种方法可以实现。添加代
  • Jenkins 不同节点间文件传递：跨 Job 与 同 Job 的实现方法
    在日常的DevOps运维实践中，Jenkins通常被用于串联多个自动化流程，而这些流程往往需要在不同的构建节点（agent）上执行。例如，在以下场景中：场景需求描述（实际问题）最近在一次部署任务中，我遇到这样一个需求：Jenkins的a节点执行某些命令或脚本，生成一个临时文件或构建产物；然后需要b节点获取这个文件，并继续执行后续处理（如压缩、上传、部署等）；a节点与b节点不直接通信，它们都只能与J
  • Jenkins流水线中的核心概念 William一直在路上 职业重启计划工作心得jenkins运维
    Jenkins流水线（Pipeline）是Jenkins提供的一套插件，用于实现持续集成和持续交付（CI/CD）工作流的自动化。其核心是通过代码定义整个构建、测试和部署流程，使CI/CD流程更加透明、可维护和可重复。Jenkins流水线主要包含以下核心概念：1.Pipeline（流水线）定义：Pipeline是Jenkins流水线的核心概念，代表整个CI/CD流程，通常通过Jenkinsfile定
  • 力扣第 73 题 矩阵置零
    题目描述给定一个mxn的矩阵matrix，其中每个元素不是0就是非零整数。如果一个元素是0，则将它所在的整行和整列都置为0。请你实现这个操作，要求空间复杂度O(1)。示例示例1：输入：matrix=[[1,1,1],[1,0,1],[1,1,1]]输出：[[1,0,1],[0,0,0],[1,0,1]]示例2：输入：matrix=[[0,1,2,0],[3,4,5,2],[1,3,1,5]]输出：
  • JSON 对象
    JSON对象概述JSON（JavaScriptObjectNotation）对象是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。JSON对象是JSON数据的一种基本结构，类似于JavaScript中的对象（Object）。在本文中，我们将详细介绍JSON对象的概念、语法、创建方法以及在实际应用中的使用。JSON对象的语法JSON对象使用大括号{}表示，其中包含一系列键值对。
  • 解决Error: Not Found：Page[5][-1,81] at view.umd.min.js 二七狂人 uniapp前端javascriptuniappvue
    场景说明：uniapp使用组件，在APP环境出现，在H5环境正常。单页面上多处使用该组件，使用同名参数设置数据，应用切换效果时，触发请求不同接口，返回数据格式不同。使用v-if时出现，使用v-show时正常。原因分析：尚不明确。解决方案1：将组件注册多个不同名称来使用，对应不同的返回数据。importvTabsfrom"@/components/v-tabs.vue"importvTabs1fro
  • Linux利用多线程和线程同步实现一个简单的聊天服务器
    1.概述本文实现一个基于TCP/IP的简单多人聊天室程序。它包含一个服务器端和一个客户端：服务器能够接收多个客户端的连接，并将任何一个客户端发来的消息广播给所有其他连接的客户端；客户端则可以连接到服务器，发送消息并接收来自其他人的消息。该Demo运用了网络编程（SocketAPI）、多线程（Pthreads）以及线程同步（互斥锁）技术，以实现并发处理和数据共享安全。2.核心技术网络编程(Socke
  • uniapp打开导航软件并定位到目标位置的实现 界面架构师 uniappuni-app导航前端vue
    /***打开导航*@paramlocation经纬度(例如："117.214713,39.116884")*@paramaddress地址*/exportfunctionmapNavigation(location,address){constlocationArr=location.split(',')constlongitude=locationArr[0]constlatitude=loca
  • 第二批主题教育要“照镜子、脱靴子、 钉钉子、出点子” wyzzb123
    学习贯彻习近平新时代中国特色社会主义思想主题教育开展以来，全党各级党组织积极贯彻落实党中央部署，坚持理论联系实际，大兴调研之风，取得了很多成效。但各党组织不能就此满足，广大党员干部要牢记学习没有“休止符”、只有“进行时”，要全面贯彻落实党的二十大精神，在第二批主题教育中“照镜子、脱靴子、揪辫子、想法子”，实现更多新成效。“照照镜子”，关注“找差纠错”，“回头看去”促前进。习近平总书记曾指出：“让正
  • vue怎么在style中使用data中定义的变量 界面架构师 vuevue
    需求动态修改三方组件的样式。思路项目开发中使用的某某某三方ui组件，所以想要修改这个组件的样式只能通过css进行修改，那么想要动态修改，就要在style中使用data里的变量。实现...mounted(){this.$el.style.setProperty('--colorStyle',this.color)}//若该变量是动态变化的watch:{color(val,oldVal){this.$
  • 一文解决IDea中Springboot 热部署：IDEA中Spring Boot应用热部署的几种方式及操作步骤
    在快节奏的软件开发过程中，热部署（HotDeployment）功能对于提升开发效率至关重要。尤其是在使用SpringBoot框架进行开发时，能够实现代码的即时更新和应用的无需重启，极大地节省了开发时间，提高了迭代速度。然而，在实际使用中，开发者可能会遇到一些痛难点和问题。本文将详细介绍在IntelliJIDEA中配置SpringBoot应用热部署的方法，以及一些常见问题的解决方法。热部署的痛难点配
  • JWT 翻译 lsswear 学习
    jwt官网：JSONWebTokenIntroduction-jwt.iohttps://jwt.io/introduction标准RFC7519：https://datatracker.ietf.org/doc/html/rfc7519#section-4.1https://datatracker.ietf.org/doc/html/rfc7519#section-4.1JWT定义JWT全称JS
  • 【LeetCode 1695. 删除子数组的最大得分】解析 李昊_ LeetCodeleetcode算法数据结构
    目录LeetCode中国站原文原始题目题目描述示例1：示例2：提示：讲解滑动窗口的艺术：寻找无与伦比的“纯净”子数组第一部分：算法思想——可伸缩的“探索边界”1.问题的核心：找到最“值钱”的“纯净”片段2.滑动窗口：一个能屈能伸的“探索框”第二部分：代码实现——滑动窗口的“装备”完整代码展示代码精讲LeetCode中国站原文https://leetcode.cn/problems/maximum-
  • AI Agent开发学习系列 - langchain之memory(1)：内存中的短时记忆 alex100 AIAgent学习人工智能langchainprompt语言模型python
    内存中的短时记忆，在LangChain中通常指ConversationBufferMemory这类“对话缓冲记忆”工具。它的作用是：在内存中保存最近的对话历史，让大模型能理解上下文，实现连续对话。对话缓冲记忆”工具主要特点只保留最近的对话内容（如最近N轮），不会无限增长，节省内存和token。适合短对话、上下文关联不深的场景。支持多种变体，如窗口记忆（ConversationBufferWindo
  • 在UniApp中防止页面上下拖动的方法 阿凤21 uni-app前端
    1、pages.json中在某个页面设置禁用弹性滚动的页面{"path":"pages/yourPage/yourPage","style":{"app-plus":{"bounce":"none"}}}2、pages.json中在所有页面设置禁用弹性滚动的页面{"globalStyle":{"app-plus":{"bounce":"none"}}}3、使用css实现/*禁用页面滚动*/page
  • 计算机网络学习----Https协议 典孝赢麻崩乐急 计算机网络学习https
    在互联网通信中，数据安全始终是核心需求。当用户在浏览器中输入https://访问网站时，背后隐藏着一套复杂的安全机制——HTTPS（HypertextTransferProtocolSecure）。它通过TLS/SSL协议对HTTP通信加密，而支撑这一加密体系的核心正是证书体系。本文将详细解析HTTPS的证书体系、加密通信流程、核心作用、优缺点，并结合代码示例说明其实现逻辑。HTTPS是什么？HT
  • 多线程编程之存钱与取钱 周凡杨 javathread多线程存钱取钱
      生活费问题是这样的：学生每月都需要生活费，家长一次预存一段时间的生活费，家长和学生使用统一的一个帐号，在学生每次取帐号中一部分钱，直到帐号中没钱时 通知家长存钱，而家长看到帐户还有钱则不存钱，直到帐户没钱时才存钱。   问题分析：首先问题中有三个实体，学生、家长、银行账户，所以设计程序时就要设计三个类。其中银行账户只有一个，学生和家长操作的是同一个银行账户，学生的行为是
  • java中数组与List相互转换的方法 征客丶 JavaScriptjavajsonp
    1.List转换成为数组。（这里的List是实体是ArrayList) 　　调用ArrayList的toArray方法。 　　toArray 　　public T[] toArray(T[] a)返回一个按照正确的顺序包含此列表中所有元素的数组；返回数组的运行时类型就是指定数组的运行时类型。如果列表能放入指定的数组，则返回放入此列表元素的数组。否则，将根据指定数组的运行时类型和此列表的大小分
  • Shell 流程控制 daizj 流程控制if elsewhilecaseshell
    Shell 流程控制 和Java、PHP等语言不一样，sh的流程控制不可为空，如(以下为PHP流程控制写法)： <?php if(isset($_GET["q"])){ search(q);}else{// 不做任何事情} 在sh/bash里可不能这么写，如果else分支没有语句执行，就不要写这个else，就像这样 if else if if 语句语
  • Linux服务器新手操作之二 周凡杨 Linux 简单 操作
    1.利用关键字搜寻Man Pages    man -k keyword  其中-k 是选项，keyword是要搜寻的关键字 如果现在想使用whoami命令，但是只记住了前3个字符who，就可以使用 man -k who来搜寻关键字who的man命令       [haself@HA5-DZ26 ~]$ man -k
  • socket聊天室之服务器搭建 朱辉辉33 socket
    因为我们做的是聊天室，所以会有多个客户端，每个客户端我们用一个线程去实现，通过搭建一个服务器来实现从每个客户端来读取信息和发送信息。    我们先写客户端的线程。 public class ChatSocket extends Thread{ Socket socket; public ChatSocket(Socket socket){ this.sock
  • 利用finereport建设保险公司决策分析系统的思路和方法 老A不折腾 finereport金融保险分析系统报表系统项目开发
    决策分析系统呈现的是数据页面，也就是俗称的报表，报表与报表间、数据与数据间都按照一定的逻辑设定，是业务人员查看、分析数据的平台，更是辅助领导们运营决策的平台。底层数据决定上层分析，所以建设决策分析系统一般包括数据层处理（数据仓库建设）。   项目背景介绍 通常，保险公司信息化程度很高，基本上都有业务处理系统（像集团业务处理系统、老业务处理系统、个人代理人系统等）、数据服务系统（通过
  • 始终要页面在ifream的最顶层 林鹤霄
    index.jsp中有ifream，但是session消失后要让login.jsp始终显示到ifream的最顶层。。。始终没搞定，后来反复琢磨之后，得到了解决办法，在这儿给大家分享下。。 index.jsp--->主要是加了颜色的那一句 <html> <iframe name="top" ></iframe> <ifram
  • MySQL binlog恢复数据 aigo mysql
    1，先确保my.ini已经配置了binlog：   # binlog log_bin = D:/mysql-5.6.21-winx64/log/binlog/mysql-bin.log log_bin_index = D:/mysql-5.6.21-winx64/log/binlog/mysql-bin.index log_error = D:/mysql-5.6.21-win
  • OCX打成CBA包并实现自动安装与自动升级 alxw4616 ocxcab
    近来手上有个项目,需要使用ocx控件 (ocx是什么? http://baike.baidu.com/view/393671.htm) 在生产过程中我遇到了如下问题. 1. 如何让 ocx 自动安装?     a) 如何签名?     b) 如何打包?     c) 如何安装到指定目录? 2.
  • Hashmap队列和PriorityQueue队列的应用 百合不是茶 Hashmap队列PriorityQueue队列
      HashMap队列已经是学过了的,但是最近在用的时候不是很熟悉,刚刚重新看以一次,   HashMap是K,v键 ,值     put()添加元素      //下面试HashMap去掉重复的 package com.hashMapandPriorityQueue; import java.util.H
  • JDK1.5 returnvalue实例 bijian1013 javathreadjava多线程returnvalue
    Callable接口： 返回结果并且可能抛出异常的任务。实现者定义了一个不带任何参数的叫做 call 的方法。 Callable 接口类似于 Runnable，两者都是为那些其实例可能被另一个线程执行的类设计的。但是 Runnable 不会返回结果，并且无法抛出经过检查的异常。        ExecutorService接口方
  • angularjs指令中动态编译的方法(适用于有异步请求的情况) 内嵌指令无效 bijian1013 JavaScriptAngularJS
            在directive的link中有一个$http请求，当请求完成后根据返回的值动态做element.append('......');这个操作，能显示没问题，可问题是我动态组的HTML里面有ng-click，发现显示出来的内容根本不执行ng-click绑定的方法！     
  • 【Java范型二】Java范型详解之extend限定范型参数的类型 bit1129 extend
    在第一篇中，定义范型类时，使用如下的方式：   public class Generics<M, S, N> { //M,S,N是范型参数 }  这种方式定义的范型类有两个基本的问题：   1. 范型参数定义的实例字段，如private M m = null;由于M的类型在运行时才能确定，那么我们在类的方法中，无法使用m，这跟定义pri
  • 【HBase十三】HBase知识点总结 bit1129 hbase
    1. 数据从MemStore flush到磁盘的触发条件有哪些？    a.显式调用flush，比如flush 'mytable'    b.MemStore中的数据容量超过flush的指定容量，hbase.hregion.memstore.flush.size,默认值是64M 2. Region的构成是怎么样？ 1个Region由若干个Store组成
  • 服务器被DDOS攻击防御的SHELL脚本 ronin47
    mkdir /root/bin vi /root/bin/dropip.sh #!/bin/bash/bin/netstat -na|grep ESTABLISHED|awk ‘{print $5}’|awk -F:‘{print $1}’|sort|uniq -c|sort -rn|head -10|grep -v -E ’192.168|127.0′|awk ‘{if($2!=null&a
  • java程序员生存手册-craps 游戏-一个简单的游戏 bylijinnan java
    import java.util.Random; public class CrapsGame { /** * *一个简单的赌*博游戏，游戏规则如下： *玩家掷两个骰子，点数为1到6，如果第一次点数和为7或11，则玩家胜， *如果点数和为2、3或12，则玩家输， *如果和为其它点数，则记录第一次的点数和，然后继续掷骰，直至点数和等于第一次掷出的点
  • TOMCAT启动提示NB: JAVA_HOME should point to a JDK not a JRE解决 开窍的石头 JAVA_HOME
    当tomcat是解压的时候，用eclipse启动正常，点击startup.bat的时候启动报错; 报错如下：   The JAVA_HOME environment variable is not defined correctly This environment variable is needed to run this program NB: JAVA_HOME shou
  • [操作系统内核]操作系统与互联网 comsci 操作系统
         我首先申明：我这里所说的问题并不是针对哪个厂商的，仅仅是描述我对操作系统技术的一些看法       操作系统是一种与硬件层关系非常密切的系统软件，按理说，这种系统软件应该是由设计CPU和硬件板卡的厂商开发的，和软件公司没有直接的关系，也就是说，操作系统应该由做硬件的厂商来设计和开发
  • 富文本框ckeditor_4.4.7 文本框的简单使用 支持IE11 cuityang 富文本框
    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>知识库内容编辑</tit
  • Property null not found darrenzhu datagridFlexAdvancedpropery null
    When you got error message like "Property null not found ***", try to fix it by the following way: 1)if you are using AdvancedDatagrid, make sure you only update the data in the data prov
  • MySQl数据库字符串替换函数使用 dcj3sjt126com mysql函数替换
    需求：需要将数据表中一个字段的值里面的所有的  .   替换成  _   原来的数据是  site.title  site.keywords  .... 替换后要为     site_title  site_keywords   使用的SQL语句如下：   updat
  • mac上终端起动MySQL的方法 dcj3sjt126com mysqlmac
    首先去官网下载: http://www.mysql.com/downloads/ 我下载了5.6.11的dmg然后安装,安装完成之后..如果要用终端去玩SQL.那么一开始要输入很长的:/usr/local/mysql/bin/mysql 这不方便啊,好想像windows下的cmd里面一样输入mysql -uroot -p1这样...上网查了下..可以实现滴. 打开终端,输入: 1
  • Gson使用一（Gson） eksliang jsongson
    转载请出自出处：http://eksliang.iteye.com/blog/2175401 一.概述 从结构上看Json，所有的数据（data）最终都可以分解成三种类型： 第一种类型是标量（scalar），也就是一个单独的字符串（string）或数字（numbers），比如"ickes"这个字符串。 第二种类型是序列（sequence），又叫做数组（array）
  • android点滴4 gundumw100 android
    Android 47个小知识 http://www.open-open.com/lib/view/open1422676091314.html Android实用代码七段（一） http://www.cnblogs.com/over140/archive/2012/09/26/2611999.html http://www.cnblogs.com/over140/arch
  • JavaWeb之JSP基本语法 ihuning javaweb
      目录   JSP模版元素  JSP表达式  JSP脚本片断  EL表达式  JSP注释  特殊字符序列的转义处理  如何查找JSP页面中的错误   JSP模版元素    JSP页面中的静态HTML内容称之为JSP模版元素，在静态的HTML内容之中可以嵌套JSP
  • App Extension编程指南（iOS8/OS X v10.10）中文版 啸笑天 ext
             当iOS 8.0和OS X v10.10发布后，一个全新的概念出现在我们眼前，那就是应用扩展。顾名思义，应用扩展允许开发者扩展应用的自定义功能和内容，能够让用户在使用其他app时使用该项功能。你可以开发一个应用扩展来执行某些特定的任务，用户使用该扩展后就可以在多个上下文环境中执行该任务。比如说，你提供了一个能让用户把内容分
  • SQLServer实现无限级树结构 macroli oraclesqlSQL Server
    表结构如下： 数据库id path titlesort 排序 1 0 首页 0 2 0,1 新闻 1 3 0,2 JAVA 2 4 0,3 JSP 3 5 0,2,3 业界动态 2 6 0,2,3 国内新闻 1 创建一个存储过程来实现，如果要在页面上使用可以设置一个返回变量将至传过去   create procedure test as begin decla
  • Css居中div，Css居中img，Css居中文本，Css垂直居中div qiaolevip 众观千象学习永无止境每天进步一点点css
    /**********Css居中Div**********/ div.center { width: 100px; margin: 0 auto; } /**********Css居中img**********/ img.center { display: block; margin-left: auto; margin-right: auto; }
  • Oracle 常用操作(实用) 吃猫的鱼 oracle
    SQL>select text from all_source where owner=user and name=upper('&plsql_name');  SQL>select * from user_ind_columns where index_name=upper('&index_name');  将表记录恢复到指定时间段以前
  • iOS中使用RSA对数据进行加密解密 witcheryne iosrsaiPhoneobjective c
      RSA算法是一种非对称加密算法,常被用于加密数据传输.如果配合上数字摘要算法, 也可以用于文件签名. 本文将讨论如何在iOS中使用RSA传输加密数据. 本文环境 mac os  openssl-1.0.1j, openssl需要使用1.x版本, 推荐使用[homebrew](http://brew.sh/)安装. Java 8 RSA基本原理 RS
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他