前端起步
前端起步

谈谈2048小游戏怎么用HTML+CSS+JS实现它

我们在做2048游戏之前先搞清楚游戏的思路在去完成建议先玩玩游戏在去想怎么做

HTML+CSS部分没啥好说的 直接上图；


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>2048</title>
        <link rel="stylesheet" href="css/2048.css" />   
    </head>
    <body>
        <div class="container">
            <div class="container-head">
              SCORE:<span style="color: red;" id="SCORE1" >0</span>
            </div>
            <div class="mian">
        <div class="grid-container">
            <div class="grid-row">
            <div class="grid-cell "     id="n00"></div>
            <div class="grid-cell "     id="n01"></div>
            <div class="grid-cell "     id="n02"></div>
            <div class="grid-cell "     id="n03"></div>
            </div>
            <div class="grid-row">
            <div class="grid-cell"     id="n10"></div>
            <div class="grid-cell"     id="n11"></div>
            <div class="grid-cell"     id="n12"></div>
            <div class="grid-cell" id="n13"></div>
            </div>
            <div class="grid-row" >
            <div class="grid-cell"     id="n20"></div>
            <div class="grid-cell"     id="n21"></div>
            <div class="grid-cell"     id="n22"></div>
            <div class="grid-cell" id="n23"></div>
            </div>
            <div class="grid-row">
            <div class="grid-cell"     id="n30"></div>
            <div class="grid-cell"     id="n31"></div>
            <div class="grid-cell"     id="n32"></div>
            <div class="grid-cell" id="n33"></div>
            </div>
        </div>   
            </div>
            <div  class="gameend" id="Gameover">
                <div class="Gameover" >
                     <p >GAME OVER!!!</p>
                     <p>SCORE:<span  style="color:red" id="SCORE2"></span></p>
                      <a style="display: inline-block;" href="">try again</a>
                </div>
            </div>
        </div>
    </body>
```
//下面是CSS部分
*{
padding: 0px;
margin: 0px;
list-style: none;
}
.container{
width: 550px;
height: 550px;
margin: 50px auto;
}
.container-head{
font-family:arial;
font-size: 40px;
text-indent: 23px;
}
.mian{
width: 500px;
height: 500px;
margin: auto;
background: #bbada0;
position: relative;
border-radius: 10px;
}
.grid-container{
width: 470px;
height: 470px;
position: absolute;
padding: 15px 15px 15px 25px;
}
.grid-row{
width: 470px;
height: 106.28px;
margin-bottom: 15px
}
.grid-cell{
width: 100.25px;
height: 106.25px;
margin-right: 15px;
float: left;
border-radius: 3px;
background: #ccc0b3;
font-size: 55px;
line-height: 106.25px;
text-align: center;
}
.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;
}
.gameend{
display:none;
width: 500px;
height: 500px;
z-index: 999;
position: absolute;
top: 45px;
background: rgba(50,50,50,0.5);
left: 32%;
}
.Gameover{
width: 400px;
height: 200px;
position: absolute;
background: white;
border-radius: 5px;
top: 50%;
left: 10%;
font-size: 35px;
text-align: center;
line-height: 60px;
font-family: arial;
}
.Gameover>a{
border-radius: 5px;
background: #9F8D77;
text-decoration: none;
color: white;
}
剩下的是JS部分
<script type="text/javascript">
var game ={
data:[],//添加一个属性，存储游戏数据
score:0,//添加一个分数属性
gameover:0,//添加一个游戏结束的状态
gamerunning:1,//添加一个游戏运行时状态：
startus:1,//表示的是当前游戏的状态，时时刻刻检测该状态，如果这个状态等于1，表示可以继续，如果等于0，结束
start:function(){ //添加游戏开始的方法
this.startus = this.gamerunning;
this.score = 0;
this.data=[];
for(var r = 0; r < 4; r++){
this.data[r] = [];
for(var c = 0; c < 4; c++){
this.data[r][c] = 0;
}
}
this.randomNum();
this.randomNum();
this.dataView();
console.log(this.data);
},
randomNum:function(){ //生成一个随机数的方法
for(var i =0; i <1; i--){
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.5?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("n" + r + c);
if(this.data[r][c] ==0){
div.innerHTML="";
div.className = "grid-cell";
}else{
div.innerHTML=this.data[r][c];
div.className = "grid-cell n" + this.data[r][c]
}
}
}
document.getElementById("SCORE1").innerHTML=this.score;
if(this.startus == this.gameover){ //如果游戏处于结束的阶段了，更新视图
document.getElementById("SCORE2").innerHTML=this.score; //找到结束时的分数ID，更新分数
document.getElementById("Gameover").style.display="block";
}else{
document.getElementById("Gameover").style.display="none";
}
},
isgameover:function(){ // 判断游戏是否结束的方法
// 那，游戏结束需要满足哪些条件呢？
// 1.格子全部都不为0的时候 && 相邻的位置不能有相同的
// 给函数增加一个返回值,如果false表示还可以继续,ture表示游戏结束
for(var r = 0; r < 4; r++){
for(var c =0; c < 4; c++){
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 befoer = String(this.data);
console.log(this.data);
console.log(befoer);
for(var r = 0; r<4; r++){
this.moveLeftInRow(r);
}
var after = String(this.data);//给移动之后的数组“拍个照”
console.log(after);
if(befoer != after){
this.randomNum();
if(this.isgameover()){
this.startus = this.gameover;
}
this.dataView();
}
},
moveLeftInRow:function(r){
for(var c=0; c<3;c++){
var nextc =this.getNextInRow(r,c); //找数字,并依据不同的情况返回值
if(nextc != -1){ //在位置game.data[r][i]上找到了元素
if(this.data[r][c] == 0){
this.data[r][c] =this.data[r][nextc];
this.data[r][nextc] = 0;
}else if(this.data[r][c] ==this.data[r][nextc]){
this.data[r][c] *=2;
this.data[r][nextc] =0;
this.score += this.data[r][c];
}
}else{
break;
}
}
},
getNextInRow:function(r,c){ //找位置的函数
for(var i =c+1; i < 4; i++){ //从当前位置的下一个元素开始去找,所以是 c+1(当前位置为c，下一个为c+1)
if(this.data[r][i] !=0){ //如果不等于0，则表明位置上存在一个元素
return i; //找到了就把这个位置直接返回出来
}
}
return -1; //如果没有找到，随意取一个标识符返回回来:表示没有找到
}, //左移动结束
//右移动开始
moveRight:function(){
var befoer = String(this.data);
console.log(this.data);
console.log(befoer);
for(var r = 0; r<4; r++){
this.moveRightInRow(r);
}
var after = String(this.data);//给移动之后的数组“拍个照”
console.log(after);
if(befoer != after){
this.randomNum();
if(this.isgameover()){
this.startus = this.gameover;
}
this.dataView();
}
},
moveRightInRow:function(r){
for(var c = 3; c > 0;c--){
var nextc =this.moveRightNextRows(r,c); //找数字,并依据不同的情况返回值
if(nextc != -1){ //在位置game.data[r][i]上找到了元素
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.data[r][nextc] =0;
this.score += this.data[r][c];
}
}else{
break;
}
}
},
moveRightNextRows:function(r,c){ //找位置的函数
for(var j =c-1; j>=0; j--){ //因为从c开始,所以下一位是从 c-1 开始找
if(this.data[r][j] !=0){
return j;
}
}
return -1;
}, //右移动结束
//向上移动
moveUP:function(){
var befoer = String(this.data);
console.log(befoer);
for(var c = 0; c<4; c++){
this.moveUpInRow(c);
}
var after = String(this.data);//如果两次拍照不相等，就发生了移动
if(befoer != after){
this.randomNum();
if(this.isgameover()){
this.startus = this.gameover;
}
this.dataView();
}
},
moveUpInRow:function(c){
for(var r = 0; r<4;r++){
var nextc =this.moveUPNextRows(r,c); //找数字,并依据不同的情况返回值
if(nextc != -1){ //在位置game.data[r][i]上找到了元素
if(this.data[r][c] == 0){
this.data[r][c] =this.data[nextc][c];
this.data[nextc][c] = 0;
r--; //从原地开始，继续往后
}else if(this.data[r][c] ==this.data[nextc][c]){
this.data[r][c] *=2;
this.score +=this.data[r][c];
this.data[nextc][c]=0;
}
}else{
break;
}
}
},
moveUPNextRows:function(r,c){ //找位置的函数
for(var j =r+1; j <4; j++){ //如果不为0，表示找到，就返回i，i对应的格子的几个位置
if(this.data[j][c] !=0){
return j;
}
}
return -1;
},
//向下移动
moveDown:function(){
var befoer = String(this.data);
console.log(this.data);
console.log(befoer);
for(var c = 0; c<4; c++){
this.moveDownInRow(c);
}
var after = String(this.data);//给移动之后的数组“拍个照”
console.log(after);
if(befoer != after){
this.randomNum();
if(this.isgameover()){
this.startus = this.gameover;
}
this.dataView();
}
},
moveDownInRow:function(c){
for(var r = 3; r >=0;r--){
var nextr =this.moveDownNextRows(r,c); //找数字,并依据不同的情况返回值
if(nextr != -1){ //在位置game.data[r][i]上找到了元素
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;
}
}
},
moveDownNextRows:function(r,c){ //找位置的函数
for(var j =r-1; j>=0; j--){ //因为从r开始,所以下一位是从 r-1 开始找
if(this.data[j][c] !=0){
return j;
}
}
return -1;
},
//向下移动结束
}
game.start();
document.onkeydown = function(event){
var event = event || e || arguments[0];
if(event.keyCode == 37){
game.moveleft();
} else if(event.keyCode ==39){
game.moveRight();
}else if(event.keyCode ==38){
game.moveUP();
}else if(event.keyCode ==40){
game.moveDown();
}
}
// addEventListener 
document.addEventListener("touchstart",function(event){
event = event || window.event;
console.log("按下");
console.log(event);
startX =event.touches[0].pageX; //获取开始位置的横坐标
startY =event.touches[0].pageY //获取开始位置的纵坐标;
});
document.addEventListener("touchend",function(event){
console.log("抬起");
console.log(event);
EndX = event.changedTouches[0].pageX; //获取结束位置的横坐标
EndY = event.changedTouches[0].pageY; //获取结束位置的横坐标
var aX =EndX - startX; //获取移动后的距离半段移动到方向
var aY =EndY - startY;
var absX =Math.abs(aX) > Math.abs(aY);
var absY =Math.abs(aY) > Math.abs(aX);
//如果aX的值大于0，并且X的绝对值大于Y的说明左移动
if( aX<0 && absX){
console.log("左移动");
game.moveleft();
} else if(aX >0 && absX){
console.log("右移动");
game.moveRight();
} else if(aY<0 && absY ){
console.log("向上移动");
game.moveUP();
}else if(aY >0 && absY){
console.log("向下移动");
game.moveDown();
}
})
</script>

你可能感兴趣的:(javascript)

  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
    在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
  • JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言
    在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
  • 切换淘宝最新npm镜像源是 hai40587 npm前端node.js
    切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
  • 高性能javascript--算法和流程控制 海淀萌狗
    -for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • JavaScript中秋快乐！ Q_w7742 javascript开发语言ecmascript
    我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh
  • Nginx从入门到实践(三) 听你讲故事啊
    动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
  • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
    Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
  • 前端知识点 ZhangTao_zata 前端javascriptcss
    下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
  • 【JS】前端文件读取FileReader操作总结 程序员-张师傅 前端前端javascript开发语言
    前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi
  • webstorm报错TypeError: this.cliEngine is not a constructor Blue_Color
    点击Details在控制台会显示报错的位置TypeError:this.cliEngineisnotaconstructoratESLintPlugin.invokeESLint(/Applications/RubyMine.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint-plugin.js:97:
  • 创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端ui服务器
    前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
  • 了解 UNPKG：前端开发者的包管理利器 小于负无穷 前端javascripttypescriptcsshtml5node.js
    在现代前端开发中，JavaScript包管理和模块化是至关重要的，而npm则是最流行的JavaScript包管理器之一。不过，随着前端项目复杂性的增加，有时候我们希望快速引入外部依赖，而无需本地安装和构建。此时，CDN（内容分发网络）成为了一种方便快捷的解决方案，而UNPKG就是这种方式中的佼佼者。什么是UNPKG？UNPKG是一个基于npm的内容分发网络（CDN），它允许开发者直接通过URL从n
  • 2019-05-29 vue-router的两种模式的区别 Kason晨
    1、大家都知道vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化html的内容优点:良好的交互体验,用户不需要刷新页面,页面显示流畅,良好的前后端工作分离模式,减轻服务器压力,缺点:不利于SEO,初次加载耗时比较多2、hash模式vue-router默认的是hash
  • electron多标签页模式更像客户端 diygwcom electronjavascript前端
    Electron多标签页模式是指在Electron框架中实现的类似Web浏览器的多标签页功能。Electron是一个使用Web技术（HTML、CSS和JavaScript）来创建跨平台桌面应用程序的框架。在Electron中实现多标签页模式，通常需要借助一些特定的库或组件，如BrowserView或electron-tabs，或者通过自定义实现。实现方式1.使用BrowserViewBrowser
  • 外卖霸王餐返利外卖会员卡小程序开发 闹小艾 good506070微信小程序小程序
    外卖霸王餐返利外卖会员卡小程序开发"社交电商赋能下的外卖返利小程序"是专为商家与用户双赢而设计的创新平台。以下是其开发方案的详细步骤：一、需求梳理：首先，我们需要明确小程序的核心功能和特色。包括设定活动类型、返利策略，以及用户体验友好的界面设计。二、技术决策：技术选型是关键。我们采用小程序的开发框架，利用JavaScript作为前端开发语言，并结合微信提供的API进行后端接口调用与数据处理。三、账
  • Axure设计之全屏与退出全屏交互实现 招风的黑耳 Axureaxure交互
    在AxureRP中，设计全屏与退出全屏的交互功能可以极大地提升用户体验，尤其是在展示产品原型或进行演示时。本文将详细介绍如何在AxureRP中通过结合JavaScript代码实现全屏与退出全屏的交互效果。Axure原型设计web端交互元件库：https://1zvcwx.axshare.com一、设计思路全屏与退出全屏的交互设计主要依赖于JavaScript代码来控制浏览器的全屏模式。在Axure
  • 全面指南：用户行为从前端数据采集到实时处理的最佳实践 数字沉思 营销流量运营系统架构前端内容运营大数据
    引言在当今的数据驱动世界，实时数据采集和处理已经成为企业做出及时决策的重要手段。本文将详细介绍如何通过前端JavaScript代码采集用户行为数据、利用API和Kafka进行数据传输、通过Flink实时处理数据的完整流程。无论你是想提升产品体验还是做用户行为分析，这篇文章都将为你提供全面的解决方案。设计一个通用的ClickHouse表来存储用户事件时，需要考虑多种因素，包括事件类型、时间戳、用户信
  • EcmaScript和JavaScript的区别 每天吃八顿 前端ecmascript
    ECMAScript和JavaScript是经常被混淆的两个术语，但实际上它们之间存在一些区别：ECMAScript：ECMAScript（通常缩写为ES，并且有版本号如ES5,ES6和ES7等）是由ECMA国际（EuropeanComputerManufacturersAssociation）制定的一种脚本语言的规范。这个规范定义了语法、命令、数据类型等基本元素。ECMAScript是一种规范，
  • javascript添加p元素，html添加文字，appendChild 游勇一 javascripthtml添加pappendChild
    javascript添加p元素，html添加文字，appendChild。网页添加p元素效果截图。个人签名：游志勇，预制板，南托岭预制场。文字展示#wordsadd{font-size:70px;word-break:break-all;}#wordsaddp{margin:002px0;padding:002px0;line-height:93%;}.btn_width{width:90px;}
  • CesiumJS+SuperMap3D.js混用实现可视域分析 S3M图层加载 裁剪区域绘制 SteveJi666 WebGLcesiumEarthSDKSuperMap3djavascript前端arcgis
    版本简介：cesium：1.99；Supermap3D：SuperMapiClientJavaScript11i(2023)；官方下载文档链家：SuperMap技术资源中心|为您提供全面的在线技术服务示例参考：support.supermap.com.cn:8090/webgl/Cesium/examples/webgl/examples.html#analysissupport.supermap
  • html打开本地excel文件夹,html使用excel表格数据库-html读取本地excel文件并展示 睿理
    html表格如何导入到excel中在vs里面用添加数据源就可以啊,再使用数据控件,就可以操作.添加数据源可以用odbc数据源,两种方式1,是在控制面板的管理工具里在ODBC里先设置好.2,是使用连接字符串.用vs的添加数据源向导做.html中有没有类似excel表格，可以填数的表格控件？首先html不能读取本地excel文件其次就算是javascript也是不允许的这是为了安全考虑如果前端脚本可以
  • 如何在 Python 中声明一个静态属性? 潮易 python开发语言
    在Python中，静态属性的定义和使用方式与JavaScript中的类似，主要是通过`@staticmethod`装饰器来实现。静态属性不需要实例化对象就可以访问，它们属于类本身。###如何声明一个静态属性：1.首先，需要在属性名前添加`@staticmethod`装饰器。2.接下来，定义一个普通方法，该方法的第一个参数通常为`cls`（用于表示类的引用）。###代码示例：```pythoncla
  • 数据格式：什么是JSON和XML isNotNullX jsonxml
    JSON和XML都是数据交换的一种格式，用于在不同的系统和应用程序之间传输和存储数据。本文将解释JSON和XML的基础内容，并探讨两者的不同。一·什么是JSON？1.JSON（JavaScriptObjectNotation）即JavaScript对象标记法：-JSON是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。-JSON基于JavaScript的一个子集，但JSON是
  • HighCharts图表自动化简介 知识的宝藏 Selenium高级篇Selenium图表自动化测试highcharts图表自动化Selenium图表自动化图表自动化测试highchartsSelenium
    什么是分析数据？在任何应用程序中捕获并以图形或图表形式显示的分析数据是任何产品或系统的关键部分，因为它提供了对实时数据的洞察。验证此类分析数据非常重要，因为不准确的数据可能会在报告中产生问题，并可能影响应用程序/系统的其他相关领域。什么是HighChart？Highcharts是一个用纯JavaScript编写的j基于SVG成图技术的图表库，提供了一种简单的方法来向您的网站或Web应用程序添加交互
  • 解线性方程组 qiuwanchi
    package gaodai.matrix; import java.util.ArrayList; import java.util.List; import java.util.Scanner; public class Test { public static void main(String[] args) { Scanner scanner = new Sc
  • 在mysql内部存储代码 annan211 性能mysql存储过程触发器
    在mysql内部存储代码 在mysql内部存储代码，既有优点也有缺点，而且有人倡导有人反对。 先看优点： 1 她在服务器内部执行，离数据最近，另外在服务器上执行还可以节省带宽和网络延迟。 2 这是一种代码重用。可以方便的统一业务规则，保证某些行为的一致性，所以也可以提供一定的安全性。 3 可以简化代码的维护和版本更新。 4 可以帮助提升安全，比如提供更细
  • Android使用Asynchronous Http Client完成登录保存cookie的问题 hotsunshine android
    Asynchronous Http Client是android中非常好的异步请求工具 除了异步之外还有很多封装比如json的处理，cookie的处理 引用 Persistent Cookie Storage with PersistentCookieStore This library also includes a PersistentCookieStore whi
  • java面试题 Array_06 java面试
    java面试题 第一，谈谈final, finally, finalize的区别。 final-修饰符（关键字）如果一个类被声明为final，意味着它不能再派生出新的子类，不能作为父类被继承。因此一个类不能既被声明为 abstract的，又被声明为final的。将变量或方法声明为final，可以保证它们在使用中不被改变。被声明为final的变量必须在声明时给定初值，而在以后的引用中只能
  • 网站加速 oloz 网站加速
    前序:本人菜鸟，此文研究总结来源于互联网上的资料，大牛请勿喷！本人虚心学习，多指教. 1、减小网页体积的大小，尽量采用div+css模式，尽量避免复杂的页面结构，能简约就简约。 2、采用Gzip对网页进行压缩；    GZIP最早由Jean-loup Gailly和Mark Adler创建，用于UNⅨ系统的文件压缩。我们在Linux中经常会用到后缀为.gz
  • 正确书写单例模式 随意而生 java 设计模式 单例
    　　单例模式算是设计模式中最容易理解，也是最容易手写代码的模式了吧。但是其中的坑却不少，所以也常作为面试题来考。本文主要对几种单例写法的整理，并分析其优缺点。很多都是一些老生常谈的问题，但如果你不知道如何创建一个线程安全的单例，不知道什么是双检锁，那这篇文章可能会帮助到你。 　　懒汉式，线程不安全 　　当被问到要实现一个单例模式时，很多人的第一反应是写出如下的代码，包括教科书上也是这样
  • 单例模式 香水浓 java
    懒汉  调用getInstance方法时实例化 public class Singleton { private static Singleton instance; private Singleton() {} public static synchronized Singleton getInstance() { if(null == ins
  • 安装Apache问题：系统找不到指定的文件 No installed service named "Apache2" AdyZhang apachehttp server
    安装Apache问题：系统找不到指定的文件 No installed service named "Apache2" 每次到这一步都很小心防它的端口冲突问题，结果，特意留出来的80端口就是不能用，烦。 解决方法确保几处： 1、停止IIS启动 2、把端口80改成其它 （譬如90，800，，，什么数字都好） 3、防火墙(关掉试试) 在运行处输入 cmd 回车，转到apa
  • 如何在android 文件选择器中选择多个图片或者视频？ aijuans android
    我的android app有这样的需求，在进行照片和视频上传的时候，需要一次性的从照片/视频库选择多条进行上传 但是android原生态的sdk中，只能一个一个的进行选择和上传。 我想知道是否有其他的android上传库可以解决这个问题，提供一个多选的功能，可以使checkbox之类的，一次选择多个 处理方法 官方的图片选择器(但是不支持所有版本的androi，只支持API Level
  • mysql中查询生日提醒的日期相关的sql baalwolf mysql
    SELECT sysid,user_name,birthday,listid,userhead_50,CONCAT(YEAR(CURDATE()),DATE_FORMAT(birthday,'-%m-%d')),CURDATE(),  dayofyear( CONCAT(YEAR(CURDATE()),DATE_FORMAT(birthday,'-%m-%d')))-dayofyear(
  • MongoDB索引文件破坏后导致查询错误的问题 BigBird2012 mongodb
    问题描述： MongoDB在非正常情况下关闭时，可能会导致索引文件破坏，造成数据在更新时没有反映到索引上。 解决方案：   使用脚本，重建MongoDB所有表的索引。 var names = db.getCollectionNames(); for( var i in names ){ var name = names[i]; print(name);
  • Javascript Promise bijian1013 JavaScriptPromise
            Parse JavaScript SDK现在提供了支持大多数异步方法的兼容jquery的Promises模式，那么这意味着什么呢，读完下文你就了解了。 一.认识Promises         “Promises”代表着在javascript程序里下一个伟大的范式，但是理解他们为什么如此伟大不是件简
  • [Zookeeper学习笔记九]Zookeeper源代码分析之Zookeeper构造过程 bit1129 zookeeper
       Zookeeper重载了几个构造函数，其中构造者可以提供参数最多，可定制性最多的构造函数是     public ZooKeeper(String connectString, int sessionTimeout, Watcher watcher, long sessionId, byte[] sessionPasswd, boolea
  • 【Java命令三】jstack bit1129 jstack
    jstack是用于获得当前运行的Java程序所有的线程的运行情况(thread dump），不同于jmap用于获得memory dump   [hadoop@hadoop sbin]$ jstack Usage: jstack [-l] <pid> (to connect to running process) jstack -F
  • jboss 5.1启停脚本　动静分离部署 ronin47
    以前启动jboss，往各种xml配置文件，现只要运行一句脚本即可。start nohup sh /**/run.sh -c servicename  -b ip -g  clustername   -u broatcast jboss.messaging.ServerPeerID=int  -Djboss.service.binding.set=p
  • UI之如何打磨设计能力? brotherlamp UIui教程ui自学ui资料ui视频
      在越来越拥挤的初创企业世界里，视觉设计的重要性往往可以与杀手级用户体验比肩。在许多情况下，尤其对于 Web 初创企业而言，这两者都是不可或缺的。前不久我们在《右脑革命：别学编程了，学艺术吧》中也曾发出过重视设计的呼吁。如何才能提高初创企业的设计能力呢?以下是 9 位创始人的体会。 1.找到自己的方式 如果你是设计师，要想提高技能可以去设计博客和展示好设计的网站如D-lists或
  • 三色旗算法 bylijinnan java算法
    import java.util.Arrays; /** 问题： 假设有一条绳子，上面有红、白、蓝三种颜色的旗子，起初绳子上的旗子颜色并没有顺序， 您希望将之分类，并排列为蓝、白、红的顺序，要如何移动次数才会最少，注意您只能在绳 子上进行这个动作，而且一次只能调换两个旗子。 网上的解法大多类似： 在一条绳子上移动，在程式中也就意味只能使用一个阵列，而不使用其它的阵列来
  • 警告:No configuration found for the specified action: \'s chiangfai configuration
    1.index.jsp页面form标签未指定namespace属性。 <!--index.jsp代码--> <%@taglib prefix="s" uri="/struts-tags"%> ... <s:form action="submit" method="post"&g
  • redis -- hash_max_zipmap_entries设置过大有问题 chenchao051 redishash
    使用redis时为了使用hash追求更高的内存使用率，我们一般都用hash结构，并且有时候会把hash_max_zipmap_entries这个值设置的很大，很多资料也推荐设置到1000，默认设置为了512，但是这里有个坑   #define ZIPMAP_BIGLEN 254 #define ZIPMAP_END 255     /* Return th
  • select into outfile access deny问题 daizj mysqltxt导出数据到文件
    本文转自：http://hatemysql.com/2010/06/29/select-into-outfile-access-deny%E9%97%AE%E9%A2%98/ 为应用建立了rnd的帐号，专门为他们查询线上数据库用的，当然，只有他们上了生产网络以后才能连上数据库，安全方面我们还是很注意的，呵呵。 授权的语句如下： grant select on armory.* to rn
  • phpexcel导出excel表简单入门示例 dcj3sjt126com PHPExcelphpexcel
    <?php error_reporting(E_ALL); ini_set('display_errors', TRUE); ini_set('display_startup_errors', TRUE);   if (PHP_SAPI == 'cli') die('This example should only be run from a Web Brows
  • 美国电影超短200句 dcj3sjt126com 电影
    1. I see． 我明白了。2. I quit! 我不干了!3. Let go! 放手!4. Me too． 我也是。5. My god! 天哪!6. No way! 不行!7. Come on． 来吧(赶快)8. Hold on． 等一等。9. I agree。 我同意。10. Not bad． 还不错。11. Not yet． 还没。12. See you． 再见。13. Shut up!
  • Java访问远程服务 dyy_gusi httpclientwebservicegetpost
        随着webService的崛起，我们开始中会越来越多的使用到访问远程webService服务。当然对于不同的webService框架一般都有自己的client包供使用，但是如果使用webService框架自己的client包，那么必然需要在自己的代码中引入它的包，如果同时调运了多个不同框架的webService，那么就需要同时引入多个不同的clien
  • Maven的settings.xml配置 geeksun settings.xml
    settings.xml是Maven的配置文件，下面解释一下其中的配置含义： settings.xml存在于两个地方： 1.安装的地方：$M2_HOME/conf/settings.xml 2.用户的目录：${user.home}/.m2/settings.xml 前者又被叫做全局配置，后者被称为用户配置。如果两者都存在，它们的内容将被合并，并且用户范围的settings.xml优先。
  • ubuntu的init与系统服务设置 hongtoushizi ubuntu
    转载自：  http://iysm.net/?p=178 init Init是位于/sbin/init的一个程序，它是在linux下，在系统启动过程中，初始化所有的设备驱动程序和数据结构等之后，由内核启动的一个用户级程序，并由此init程序进而完成系统的启动过程。 ubuntu与传统的linux略有不同，使用upstart完成系统的启动，但表面上仍维持init程序的形式。 运行
  • 跟我学Nginx+Lua开发目录贴 jinnianshilongnian nginxlua
    使用Nginx+Lua开发近一年的时间，学习和实践了一些Nginx+Lua开发的架构，为了让更多人使用Nginx+Lua架构开发，利用春节期间总结了一份基本的学习教程，希望对大家有用。也欢迎谈探讨学习一些经验。    目录 第一章 安装Nginx+Lua开发环境 第二章 Nginx+Lua开发入门 第三章 Redis/SSDB+Twemproxy安装与使用 第四章 L
  • php位运算符注意事项 home198979 位运算PHP&
    $a = $b = $c = 0; $a & $b = 1; $b | $c = 1  问a,b,c最终为多少?   当看到这题时，我犯了一个低级错误，误 以为位运算符会改变变量的值。所以得出结果是1 1 0 但是位运算符是不会改变变量的值的，例如： $a=1;$b=2; $a&$b;  这样a,b的值不会有任何改变
  • Linux shell数组建立和使用技巧 pda158 linux
    1.数组定义 　　[chengmo@centos5 ~]$ a=(1 2 3 4 5) 　　[chengmo@centos5 ~]$ echo $a 　　1 　　一对括号表示是数组，数组元素用“空格”符号分割开。 　　 2.数组读取与赋值 　　得到长度： 　　[chengmo@centos5 ~]$ echo ${#a[@]} 　　5 　　用${#数组名[@或
  • hotspot源码(JDK7) ol_beta javaHotSpotjvm
    源码结构图，方便理解：   ├─agent                            Serviceab
  • Oracle基本事务和ForAll执行批量DML练习 vipbooks oraclesql
    基本事务的使用： 从账户一的余额中转100到账户二的余额中去，如果账户二不存在或账户一中的余额不足100则整笔交易回滚 select * from account; -- 创建一张账户表 create table account( -- 账户ID id number(3) not null, -- 账户名称 nam
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他