从零开始手把手教你使用原生JS+CSS3实现幸运水果机游戏
游戏介绍
幸运水果机是一款街机游戏，游戏界面由24个方格拼接成一个正方形，每个方格中都有一个不同的水果图形，方格下都有一个小灯。玩家使用游戏币选择希望押注的目标，按下开始后，小灯开始绕着正方形中每个格子转。当小灯停下时，如果停在玩家押注的目标上则可赢取相应的游戏币。
物品：游戏中的物品有八种，分别为：苹果、西瓜、木瓜、橙子、铃铛、77、双星，这些物品又分为大小两种。还有BAR图标，分为2种。
赔率：以下为所有固定赔率物品的赔率。·所有其他小的物品（小77、小星星、小西瓜、小铃铛、小木瓜、小橙子） 1：2
苹果 1：5·橙子 1：10·木瓜 1：15·铃铛 1：20·西瓜 1：20·双星 1：30·77 1：40·小BAR 1：25·中BAR 1：50·大BAR 1：100
当玩家中奖之后，玩家点击“开始”按钮为收分，再次点击“开始”按钮为按照上一次押注再次进行游戏。如果玩家要重新押注，在押注物品上直接押注即可。在押注的同时会将中奖的金额收入“当前余额”区中。
如果玩家没有中奖，则玩家点击“开始”按钮为按照上一次押注再次进行游戏。
在线体验
课程目标
我们使用原生JS+CSS3，来开发一个集趣味性与技术性于一体的H5小游戏，项目使用到了以下知识点：
- CSS：盒子模型，定位，浮动，CSS3的Flex弹性盒模型，图片背景，CSS3选择器...
- JS：json，map，定时器，随机数，dom操作，模板字符串...
读者对象
学习本课程的同学，了解一点HTML/CSS/JS基础知识即可，我们会就地讲解项目中用到的css，js基础知识点，先举一些小的示例，来阐明知识点的用法，再说明如何在本项目中应用，应用在哪块功能的实现上。比如标准文档流，定位，浮动，盒子模型，CSS3弹性盒子，CSS3高级选择器，背景图片，json，map，定时器，随机数，dom操作，模板字符串，是综合运用前端基础知识的当前互联网上少见优秀综合案例。
幸运水果机之原生js实现
1. 安装vscode插件Live Server
2. 水果机轮盘界面设计
2.1 轮盘界面设计之基本方格
demo1.html
<body>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>桔子</li>
<li>苹果</li>
<li>香蕉</li>
<li>桔子</li>
</ul>
</body>
li{
border: 1px solid red;
list-style: none;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
}
运行效果
可以看到每个li独占一行，因为li是块级元素，必须使li脱离标准文档流，才能水平排布。
标准文档流
标准文档流:是指页面上从上到下,从左到右,网页元素一个挨一个的简单的正常的布局方式。
一般在HTML元素分为两种：块级元素和行内元素。像div,p,ul,li这些的元素属于块级元素，块级元素是从上到下一行一行的排列；默认一个块级元素会占用一行，而跟在后面的元素会另起一行排列；
行内元素是在一行中水平布置，从左到右的排列；span,strong,a等属于行内元素。
2.2 绝对定位VS相对定位
demo2.html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul{
border: 1px solid red;
height: 500px;
padding: 0;
position: relative;
}
li{
border: 1px solid red;
list-style: none;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
position: absolute;
top: 20px;
left: 50px;
}
</style>
</head>
<body>
<ul>
<li>苹果</li>
</ul>
</body>
</html>
运行效果
2.3 内部样式
demo3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul{
/*border: 1px solid red;*/
position: relative;
height: 500px;
width: 500px;
margin-left: auto;
margin-right: auto;
}
li{
width: 50px;
height: 50px;
border: 1px solid red;
list-style: none;
text-align: center;
line-height: 50px;
position: absolute;
}
</style>
</head>
<body>
<ul>
<li style="left:0px;top:0px;">苹果</li>
<li style="left:50px;top:0px;">苹果</li>
<li style="left:100px;top:0px;">苹果</li>
<li style="left:150px;top:0px;">苹果</li>
<li style="left:200px;top:0px;">苹果</li>
<li style="left:250px;top:0px;">苹果</li>
<li style="left:300px;top:0px;">苹果</li>
<li style="left:300px;top:50px;">苹果</li>
<li style="left:300px;top:100px;">苹果</li>
<li style="left:300px;top:150px;">苹果</li>
<li style="left:300px;top:200px;">苹果</li>
<li style="left:300px;top:250px;">苹果</li>
<li style="left:300px;top:300px;">苹果</li>
<li style="left:250px;top:300px;">苹果</li>
<li style="left:200px;top:300px;">苹果</li>
<li style="left:150px;top:300px;">苹果</li>
<li style="left:100px;top:300px;">苹果</li>
<li style="left:50px;top:300px;">苹果</li>
<li style="left:0px;top:300px;">苹果</li>
<li style="left:0px;top:250px;">苹果</li>
<li style="left:0px;top:200px;">苹果</li>
<li style="left:0px;top:150px;">苹果</li>
<li style="left:0px;top:100px;">苹果</li>
<li style="left:0px;top:50px;">苹果</li>
</ul>
</body>
</html>
效果：
2.4 背景图片
demo4.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li{
width: 50px;
height: 50px;
border: 1px solid red;
list-style: none;
text-align: center;
line-height: 50px;
/* position: absolute; */
/*background-image: url("images/77.png");*/
background-size: contain;
/*left:0px;*/
/*top:0px;*/
}
</style>
</head>
<body>
<ul>
<li style="background-image: url('images/77.png')"></li>
</ul>
</body>
</html>
效果：
2.5 综合在一起
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul{
/*border: 1px solid red;*/
position: relative;
height: 500px;
width: 500px;
margin-left: auto;
margin-right: auto;
}
li{
width: 50px;
height: 50px;
border: 1px solid red;
list-style: none;
text-align: center;
line-height: 50px;
position: absolute;
background-size: contain;
/*left:0px;*/
/*top:0px;*/
}
</style>
</head>
<body>
<ul>
<li style="left:0px;top:0px;background-image: url('images/orange.png');"></li>
<li style="left:50px;top:0px;background-image: url('images/alarm.png');"></li>
<li style="left:100px;top:0px;background-image: url('images/s_bar.png');"></li>
<li style="left:150px;top:0px;background-image: url('images/bar.png');"></li>
<li style="left:200px;top:0px;background-image: url('images/apple.png');"></li>
<li style="left:250px;top:0px;background-image: url('images/s_apple.png');"></li>
<li style="left:300px;top:0px;background-image: url('images/coconut.png');"></li>
<li style="left:300px;top:50px;background-image: url('images/watermelons.png');"></li>
<li style="left:300px;top:100px;background-image: url('images/s_watermelons.png');"></li>
<li style="left:300px;top:150px;background-image: url('images/cha.png');"></li>
<li style="left:300px;top:200px;background-image: url('images/apple.png');"></li>
<li style="left:300px;top:250px;background-image: url('images/s_orange.png');"></li>
<li style="left:300px;top:300px;background-image: url('images/orange.png');"></li>
<li style="left:250px;top:300px;background-image: url('images/alarm.png');"></li>
<li style="left:200px;top:300px;background-image: url('images/s_77.png');"></li>
<li style="left:150px;top:300px;background-image: url('images/77.png');"></li>
<li style="left:100px;top:300px;background-image: url('images/apple.png');"></li>
<li style="left:50px;top:300px;background-image: url('images/s_coconut.png');"></li>
<li style="left:0px;top:300px;background-image: url('images/coconut.png');"></li>
<li style="left:0px;top:250px;background-image: url('images/star.png');"></li>
<li style="left:0px;top:200px;background-image: url('images/s_star.png');"></li>
<li style="left:0px;top:150px;background-image: url('images/cha.png');"></li>
<li style="left:0px;top:100px;background-image: url('images/apple.png');"></li>
<li style="left:0px;top:50px;background-image: url('images/s_alarm.png');"></li>
</ul>
</body>
</html>
最终效果：
3. 使用原生JS动态生成水果机轮盘
3.1 JS动态创建HTML元素
分2步：
1.创建元素（document.createElement）
2.添加元素（appendChild）
<!DOCTYPE html>
<html>
<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
let para = document.createElement("p");
para.innerText = "这是新段落。";
let element = document.getElementById("div1");
element.appendChild(para);
</script>
</body>
</html>
再看一个例子
<!DOCTYPE html>
<html>
<body>
<div id="div1">
</div>
<script>
let ul = document.createElement('ul')
let div = document.getElementById('div1')
for (let i = 0; i < 3; i++){
let li = document.createElement('li')
li.innerText = i;
ul.appendChild(li)
}
div.appendChild(ul)
</script>
</body>
</html>
3.2 JS控制元素样式
style属性
html文档中的每一个元素都是一个对象,文档的每个元素都有一个属性style。使用JS，通过对象的style属性可以设置元素的任意css样式，看一个例子：
<!DOCTYPE html>
<html>
<body>
<div id="div1">
<p id="content">helloworld</p>
</div>
<script>
let p = document.querySelector('p')
p.style.color = 'red'
p.style.fontSize = '30px'
</script>
</body>
</html>
3.3 认识JSON
JSON（JavaScriptObject Notation）、采用完全独立于编程语言的文本格式来存储和表示数据。
1、对象
对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。
var person = { "name":"huochai", "age":29, "school":{ "name":"diankeyuan", "location":"beijing" }};
2.数组
var students =
[
{"sno":"001","name":"jack","age":130},
{"sno":"002","name":"tame","age":120},
{"sno":"003","name":"cule","age":110}
];
看一个例子：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>json</title>
<script>
var imgData={ "name":"图片描述和图片相对路径", "title":"logo图片","url":"logo.png" };
console.log( imgData.name );
console.log( imgData["name"] );
var json1={"name":"这里是一组图片的文字描述和图片相对路径",
"title":["logo图片","图片1","图片2","图片3"],
"url":["logo.png","1.png","2.png","3.png"]
};
console.log( json1.name);
console.log( json1.url );
console.log( json1.url[1] );
var json2 ={ "name":"图片描述和图片相对路径",
"imgData":[
{ "name":"图片1", "title":"logo图片1","url":"logo1.png" } ,
{ "name":"图片2", "title":"logo图片2","url":"logo2.png" } ,
{ "name":"图片3", "title":"logo图片3","url":"logo3.png" }
]
};
console.log( json2.name );
console.log( json2.imgData[0].name );
</script>
</head>
<body>
</body>
</html>
3.4 模板字符串
var name = "Neo";
var occupation = "programmer"; //不使用模板字符串拼接
var str1 = "He is " + name + ",he is a " + occupation; //使用模板字符串拼接
var str2 = `He is ${name},he is a ${occupation}`;
console.log(str1)
console.log(str2)
3.5 综合在一起
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul{
/*border: 1px solid red;*/
position: relative;
height: 500px;
width: 500px;
margin-left: auto;
margin-right: auto;
}
li{
width: 50px;
height: 50px;
border: 1px solid red;
list-style: none;
text-align: center;
line-height: 50px;
position: absolute;
background-size: contain;
/*left:0px;*/
/*top:0px;*/
}
</style>
<script>
window.onload = function () {
var fruits = [
{left:'0px',top:'0px',content:'桔子',src:'b_orange.png',score:10},
{left:'50px',top:'0px',content:'铃铛',src:'b_alarm.png',score:20},
{left:'100px',top:'0px',content:'小BA',src:'s_bar.png',score:50},
{left:'150px',top:'0px',content:'BA',src:'b_bar.png',score:100},
{left:'200px',top:'0px',content:'苹果',src:'b_apple.png',score:5},
{left:'250px',top:'0px',content:'小苹果',src:'s_apple.png',score:2},
{left:'300px',top:'0px',content:'椰子',src:'b_coconut.png',score:15},
{left:'300px',top:'50px',content:'西瓜',src:'b_watermelons.png',score:25},
{left:'300px',top:'100px',content:'小西瓜',src:'s_watermelons.png',score:2},
{left:'300px',top:'150px',content:'XX',src:'cha.png',score:0},
{left:'300px',top:'200px',content:'苹果',src:'b_apple.png',score:5},
{left:'300px',top:'250px',content:'小桔子',src:'s_orange.png',score:2},
{left:'300px',top:'300px',content:'桔子',src:'b_orange.png',score:10},
{left:'250px',top:'300px',content:'铃铛',src:'b_alarm.png',score:20},
{left:'200px',top:'300px',content:'小77',src:'s_77.png',score:2},
{left:'150px',top:'300px',content:'77',src:'b_77.png',score:40},
{left:'100px',top:'300px',content:'苹果',src:'b_apple.png',score:5},
{left:'50px',top:'300px',content:'小椰子',src:'s_coconut.png',score:2},
{left:'0px',top:'300px',content:'椰子',src:'b_coconut.png',score:15},
{left:'0px',top:'250px',content:'星星',src:'b_star.png',score:30},
{left:'0px',top:'200px',content:'小星星',src:'s_star.png',score:2},
{left:'0px',top:'150px',content:'XX',src:'cha.png',score:0},
{left:'0px',top:'100px',content:'苹果',src:'b_apple.png',score:5},
{left:'0px',top:'50px',content:'小铃铛',src:'s_alarm.png',score:2}
];
var ul = document.getElementById('machine');
for(var i = 0; i < fruits.length; i++)
{
//动态的创建li元素
var li = document.createElement('li');
li.style.left = fruits[i].left;
li.style.top = fruits[i].top;
li.style.backgroundImage = `url('images/${fruits[i].src}')`;
ul.appendChild(li);
}
}
</script>
</head>
<body>
<ul id = 'machine'>
<!--<li style="left:0px;top:0px;background-image: url('images/orange.png');"></li>-->
<!--<li style="left:50px;top:0px;background-image: url('images/alarm.png');"></li>-->
<!--<li style="left:100px;top:0px;background-image: url('images/s_bar.png');"></li>-->
<!--<li style="left:150px;top:0px;background-image: url('images/bar.png');"></li>-->
<!--<li style="left:200px;top:0px;background-image: url('images/apple.png');"></li>-->
<!--<li style="left:250px;top:0px;background-image: url('images/s_apple.png');"></li>-->
<!--<li style="left:300px;top:0px;background-image: url('images/coconut.png');"></li>-->
<!--<li style="left:300px;top:50px;background-image: url('images/watermelons.png');"></li>-->
<!--<li style="left:300px;top:100px;background-image: url('images/s_watermelons.png');"></li>-->
<!--<li style="left:300px;top:150px;background-image: url('images/cha.png');"></li>-->
<!--<li style="left:300px;top:200px;background-image: url('images/apple.png');"></li>-->
<!--<li style="left:300px;top:250px;background-image: url('images/s_orange.png');"></li>-->
<!--<li style="left:300px;top:300px;background-image: url('images/orange.png');"></li>-->
<!--<li style="left:250px;top:300px;background-image: url('images/alarm.png');"></li>-->
<!--<li style="left:200px;top:300px;background-image: url('images/s_77.png');"></li>-->
<!--<li style="left:150px;top:300px;background-image: url('images/77.png');"></li>-->
<!--<li style="left:100px;top:300px;background-image: url('images/apple.png');"></li>-->
<!--<li style="left:50px;top:300px;background-image: url('images/s_coconut.png');"></li>-->
<!--<li style="left:0px;top:300px;background-image: url('images/coconut.png');"></li>-->
<!--<li style="left:0px;top:250px;background-image: url('images/star.png');"></li>-->
<!--<li style="left:0px;top:200px;background-image: url('images/s_star.png');"></li>-->
<!--<li style="left:0px;top:150px;background-image: url('images/cha.png');"></li>-->
<!--<li style="left:0px;top:100px;background-image: url('images/apple.png');"></li>-->
<!--<li style="left:0px;top:50px;background-image: url('images/s_alarm.png');"></li>-->
</ul>
</body>
</html>
4. 让跑灯跑起来
4.1 JS中的2种定时器
- 周期性定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// setInterval(fun,time)
// function hello() {
// console.log('hello');
// }
// setInterval(hello, 1000);
// var timerID = setInterval(fun,time);//返回值就是定时器id
// //停止定时器
// clearInterval(timerID);
var count = 1;
window.onload = function () {
var h2 = document.getElementById('count');
//启动定时器
var timerID = setInterval(function () {
h2.innerHTML = count++;
if(count == 11)
{
//停止定时器
clearInterval(timerID);
}
},1000);
}
</script>
</head>
<body>
<h2 id="count">
0
</h2>
</body>
</html>
2. 一次性定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function () {
var count = 1;
var h2 = document.getElementById('count');
function counter() {
h2.innerHTML = count++;
if (count < 11) {
setTimeout(counter, 1000)
}
}
setTimeout(counter, 1000)
}
</script>
</head>
<body>
<h2 id="count">
0
</h2>
</body>
</html>
4.2 JS中的随机数
var num = Math.random();//0--1之间的数[0,1)
console.log(num);
//0-10之间的整数
var num2 = num*10;
var num3 = parseInt(5.69);
console.log(num3);
var num = parseInt(Math.random()*10);
console.log(num);
// 30-50之间的整数
// 0--20之间的整数+30
var num2 = parseInt(Math.random()*20) + 30;
console.log(num2);
4.3 CSS中的z-index属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
position: relative;
}
#one{
height: 100px;
width: 100px;
background-color: red ;
position: absolute;
left:0;
top: 0;
z-index: 10;
}
#two{
height: 80px;
width: 80px;
background-color: blue ;
position: absolute;
left:0;
top: 0;
z-index: 20;
}
</style>
</head>
<body>
<div id="one">
</div>
<div id="two">
</div>
</body>
</html>
4.4 整合在一起
html
<body>
<ul id = 'machine'>
<div id="active">
</div>
</ul>
<div id="footer">
<div id="msg"></div>
<button id="btn">开始</button>
</div>
</body>
css
<style>
#footer{
width: 500px;
margin: 0px auto;
}
#active
{
width: 50px;
height: 50px;
position: absolute;
background-color: rgba(255,0,0,0.4);
z-index: 1000;
left:0;
top: 0;
display: none;
}
ul{
/*border: 1px solid red;*/
position: relative;
height: 500px;
width: 500px;
margin-left: auto;
margin-right: auto;
}
li{
width: 50px;
height: 50px;
border: 1px solid red;
list-style: none;
text-align: center;
line-height: 50px;
position: absolute;
background-size: contain;
/*left:0px;*/
/*top:0px;*/
}
</style>
js
<script>
window.onload = function () {
//给开始按钮绑定事件处理函数
var index = 0;//当前active div应该和哪个下标的水果重合
var btn = document.getElementById('btn');
btn.onclick = function () {
//实现转灯的转动
//算出本次需要转动的步数（非固定的），随机的步数
//步数又不能太少，至少需要转3圈，加上一个随机的步数（0-20）
var step = fruits.length * 3 + parseInt(Math.random()*20);
//启动一个定时器，让转灯转动
var timerID = setInterval(function () {
//让转灯转动一格，行走一步
//让隐藏的div显示，改变div的left和top来实现转灯的转动
var div = document.getElementById('active');
div.style.display = 'block';
div.style.left = fruits[index].left;
div.style.top = fruits[index].top;
step--;
if(step == 0)//就应该停止定时器
{
clearInterval(timerID);
var msg = document.getElementById('msg');
msg.innerHTML = fruits[index].content + ':' + fruits[index].score;
return;
}
index++;
if(index == fruits.length)
{
index=0;
}
},100);
}
}
</script>
4.5 实现小灯变速旋转
//给开始按钮绑定事件处理函数
var btn = document.getElementById('btn');
var index = 0;//当前active div应该和哪个下标的水果重合
btn.onclick = function () {
//实现转灯的转动
//算出本次需要转动的步数（非固定的），随机的步数
//步数又不能太少，至少需要转3圈，加上一个随机的步数（0-20）
var step = fruits.length * 2 + parseInt(Math.random() * 35);
var timerID = 0
function turnOneStep() {
console.log(step)
//让转灯转动一格，行走一步
//让隐藏的div显示，改变div的left和top来实现转灯的转动
var div = document.getElementById('active');
div.style.display = 'block';
div.style.left = fruits[index].left;
div.style.top = fruits[index].top;
step--;
if (step == 0)//就应该停止定时器
{
clearTimeout(timerID);
var msg = document.getElementById('msg');
msg.innerHTML = fruits[index].content + ':' + fruits[index].score;
return;
}
index++;
if (index == fruits.length) {
index = 0;
}
timerID = setTimeout(turnOneStep, 1200/step);
}
//启动一个定时器，让转灯转动
turnOneStep(step);
}
从零开始手把手教你使用原生JS+CSS3实现幸运水果机游戏的更多相关文章
- 手把手教你用JS/Vue/React实现幸运水果机（80后情怀之作）
项目体验地址 免费视频教程 分别使用原生JS,Vue和React,手把手教你开发一个H5小游戏,快速上手Vue和React框架的使用. 项目截图 在线体验 在线体验 游戏介绍 幸运水果机是一款街机游戏 ...
- jquery/原生js/css3 实现瀑布流以及下拉底部加载
思路: style: <style type="text/css"> body,html{ margin:; padding:; } #container{ posit ...
- 告别组件之教你使用原生js和css写移动端轮播图
在工作中由于项目需要要写一个轮播图,本想使用组件直接调用实现快速开发,但是一想到自己经常使用组件但是让自己手写的话确实一点都不会. 一个不会手写组件的前端程序员不是一个好程序员!于是打算自己手写一个. ...
- React实战教程之从零开始手把手教你使用 React 最新特性Hooks API 打造一款计算机知识测验App
项目演示地址 项目演示地址 项目代码结构 前言 React 框架的优雅不言而喻,组件化的编程思想使得React框架开发的项目代码简洁,易懂,但早期 React 类组件的写法略显繁琐.React Hoo ...
- 原生js+css3实现图片自动切换，图片轮播
运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...
- 手把手教你学node.js之使用 superagent 与 cheerio 完成简单爬虫
使用 superagent 与 cheerio 完成简单爬虫 目标 建立一个 lesson 3 项目,在其中编写代码. 当在浏览器中访问 http://localhost:3000/ 时,输出 CNo ...
- 手把手教你用Node.js爬虫爬取网站数据
个人网站 https://iiter.cn 程序员导航站 开业啦,欢迎各位观众姥爷赏脸参观,如有意见或建议希望能够不吝赐教! 开始之前请先确保自己安装了Node.js环境,还没有安装的的童鞋请自行百度 ...
- 手把手教你学node.js 之使用 eventproxy 控制并发
使用 eventproxy 控制并发 目标 建立一个 lesson4 项目,在其中编写代码. 代码的入口是 app.js,当调用 node app.js 时,它会输出 CNode(https://cn ...
- 手把手教你学node.js之学习使用外部模块
学习使用外部模块 目标 建立一个 lesson2 项目,在其中编写代码. 当在浏览器中访问 http://localhost:3000/?q=alsotang 时,输出 alsotang 的 md5 ...
随机推荐
- 4.String字符串类型操作
String类型操作 1.set key value 设置key对应的值为string类型的value 2.mset key1 value1 … keyN valueN 一次设置多个key的值 3. ...
- [站点推荐]001.学习新技能的37个最佳网站(The 37 Best Websites To Learn Something New)
忘了过于褒奖的学校.整天呆在拥挤的教室而效果却差得可怜.这些网站和应用涵盖了科学.艺术和技术的无数话题.它们可以教会你实践练习任何技能,从制作豆 沙到用 node.js 开发 app,而且它们都是免费 ...
- 搭建SpringCloud微服务框架：一、结构和各个组件
搭建微服务框架(结构和各个组件) 简介 SQuid是基于Spring,SpringBoot,使用了SpringCloud下的组件进行构建,目的是想搭建一套可以快速开发部署,并且很好上手的一套微服务框架 ...
- 【Springboot HBase】遇到的一些问题
想要运行的代码需要在application中运行 使用@Component并实现CommandLineRunner接口.重写方法@Override run( ) @Component public c ...
- 用js数组实现最原始的图片轮播实现
上班以来看到了,写了很多的轮播图效果,实现方法大致有 1.将图片局对定位,利用z-index和opacity实现图片渐现 2.用css3 的transtion:Xx xx left/right,实现左 ...
- Java 第十一届 蓝桥杯 省模拟赛 递增序列
问题描述 在数列 a[1], a[2], -, a[n] 中,如果 a[i] < a[i+1] < a[i+2] < - < a[j],则称 a[i] 至 a[j] 为一段递增 ...
- Java实现 LeetCode 501 二叉搜索树中的众数
501. 二叉搜索树中的众数 给定一个有相同值的二叉搜索树(BST),找出 BST 中的所有众数(出现频率最高的元素). 假定 BST 有如下定义: 结点左子树中所含结点的值小于等于当前结点的值 结点 ...
- Java实现 LeetCode 274 H指数
274. H指数 给定一位研究者论文被引用次数的数组(被引用次数是非负整数).编写一个方法,计算出研究者的 h 指数. h 指数的定义: "h 代表"高引用次数"(hig ...
- 第六届蓝桥杯JavaC组国(决)赛真题
解题代码部分来自网友,如果有不对的地方,欢迎各位大佬评论 题目1.机器人数目 少年宫新近邮购了小机器人配件,共有3类,其中, A类含有:8个轮子,1个传感器 B类含有: 6个轮子,3个传感器 C类含有 ...
- IDEA2020年激活码
若出现无法使用,激活失败的情况,可以关注公众号:凌晨四点的程序员,回复消息"IDEA"持续更新最新激活码 2020年05月26更新(2020年6月份) OI7FTW2137-eyJ ...