web开发：javascript案例
一、浮动与定位复习
二、小米菜单案例
三、轮播图
四、滚动轮播
一、浮动与定位复习
- 浮动与相对定位
```js
// 1.两者均参与布局
// 2.主浮动布局, 相对布局辅助完成布局微调
// 3.相对定位布局微调不同于盒模型布局微调, 相对定位布局不影响盒子原有位置, 就不会影响兄弟盒子布局
```
// 1.两者均参与布局
// 2.主浮动布局, 相对布局辅助完成布局微调
// 3.相对定位布局微调不同于盒模型布局微调, 相对定位布局不影响盒子原有位置, 就不会影响兄弟盒子布局
```
- 浮动与绝对定位
```js
// 1.只保留绝对定位布局
// 2.脱离文档流的盒子宽可以交于内容撑开
```
// 1.只保留绝对定位布局
// 2.脱离文档流的盒子宽可以交于内容撑开
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动与定位</title>
<style>
.box {
/* 相对定位 */
position: relative;
/* 绝对定位 */
position: absolute;
/* 固定定位 */
position: fixed;
}
</style>
<style>
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
float: left;
cursor: pointer;
border-bottom: 2px solid orange;
/*padding: 0 5px;*/
margin: 0 5px;
}
li:first-child {
/*1.浮动与相对定位结合使用*/
/*盒子采用的是浮动布局为主,
相对定位可以辅助其子级绝对定位布局,
也可以在浮动布局基础上微调
*/ /*position: relative;*/
/*采用相对定位布局, 在浮动布局基础上微调, 不影响兄弟盒子的布局*/
/*left: 10px;*/
/*采用盒模型布局, 在浮动布局基础上微调, 影响兄弟盒子的布局*/
/*margin-left: 10px;*/
}
li {
/*1.浮动与绝对定位结合使用*/
/*盒子采用绝对定位布局,
浮动布局失效
*/
/*为什么: 因为两者都是脱离文档流, 绝对定位为完全脱离文档流*/
position: absolute;
}
li:last-child {
left: 100px;
}
/*脱离文档流: 盒子的宽度可以由内容撑开*/
.ele {
/*width: 100px;*/
height: 100px;
background-color: pink;
/*float: right;*/
position: absolute;
right: 0;
}
</style>
</head>
<body>
<!--布局: 1.盒模型布局 | 2.浮动布局 | 3.定位布局-->
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
<div class="ele">12345 67890</div>
</body>
</html>
二、小米菜单案例
- 默认活跃状态
```js
// 1.将初始的li设置一个active类名(拥有该类名就拥活跃状态表现的属性)
```
// 1.将初始的li设置一个active类名(拥有该类名就拥活跃状态表现的属性)
```
- 更改活跃状态
```js
let active_index = 0; // 活跃状态的索引
for (let i = 0; i < lis.length; i++) {
lis[i].onmouseover = function () {
// 清除之前活跃的
lis[active_index].className = "";
// 设置自身为活跃
this.className = "active";
// 更新活跃索引
active_index = i;
}
}
```
let active_index = 0; // 活跃状态的索引
for (let i = 0; i < lis.length; i++) {
lis[i].onmouseover = function () {
// 清除之前活跃的
lis[active_index].className = "";
// 设置自身为活跃
this.className = "active";
// 更新活跃索引
active_index = i;
}
}
```
- 作用域(不同的js逻辑代码块)
```js
// 不要去使用全局变量, 不同的js逻辑代码块如果重复命名, 要么报重命名错误, 要么数据覆盖出现变量污染
// 每一个js逻辑代码块可以通过匿名函数的自调用完成局部作用域
(function(){
let a = 10;
})()
(function(){
let a = 20;
})()
```
// 不要去使用全局变量, 不同的js逻辑代码块如果重复命名, 要么报重命名错误, 要么数据覆盖出现变量污染
// 每一个js逻辑代码块可以通过匿名函数的自调用完成局部作用域
(function(){
let a = 10;
})()
(function(){
let a = 20;
})()
```
- 根据数据与页面结构,动态渲染数据
```html
<ul class="main">
<li>
<a href="javascript:void(0)">
<h2>小米音响</h2>
<img src="https://i1.mifile.cn/a4/cf6660a3-d424-4248-889f-0eed1e99a342" alt="">
<p>这是小米音响, 稍微解释一下</p>
</a>
</li>
...
</ul>
```
<ul class="main">
<li>
<a href="javascript:void(0)">
<h2>小米音响</h2>
<img src="https://i1.mifile.cn/a4/cf6660a3-d424-4248-889f-0eed1e99a342" alt="">
<p>这是小米音响, 稍微解释一下</p>
</a>
</li>
...
</ul>
```
```js
let data = [
[
{
title: "热门1",
img_url: "https://i1.mifile.cn/a4/xmad_15435448534832_SAPDq.jpg",
info: "这是热门"
},
...还有三个{}
],
...还有三个[]
];
```
let data = [
[
{
title: "热门1",
img_url: "https://i1.mifile.cn/a4/xmad_15435448534832_SAPDq.jpg",
info: "这是热门"
},
...还有三个{}
],
...还有三个[]
];
```
```js
let main_lis = document.querySelectorAll('.main li');
// 分析数据结构与页面结构,将指定数据渲染到指定位置
function updateData(index) {
let dataArr = data[index];
for (let i = 0; i < dataArr.length; i++) {
let h2 = main_lis[i].querySelector('h2');
h2.innerText = dataArr[i].title;
let img = main_lis[i].querySelector('img');
img.setAttribute('src', dataArr[i].img_url);
let p = main_lis[i].querySelector('p');
p.innerText = dataArr[i].info;
}
}
```
let main_lis = document.querySelectorAll('.main li');
// 分析数据结构与页面结构,将指定数据渲染到指定位置
function updateData(index) {
let dataArr = data[index];
for (let i = 0; i < dataArr.length; i++) {
let h2 = main_lis[i].querySelector('h2');
h2.innerText = dataArr[i].title;
let img = main_lis[i].querySelector('img');
img.setAttribute('src', dataArr[i].img_url);
let p = main_lis[i].querySelector('p');
p.innerText = dataArr[i].info;
}
}
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小米菜单案例</title>
<style>
body, h2, ul {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
color: black;
text-decoration: none;
}
.title {
background-color: #ddd;
overflow: hidden;
line-height: 60px;
}
.title h2 {
float: left;
}
.title ul {
float: right;
}
.title li {
float: left;
margin: 0 5px;
line-height: 23px;
margin-top: 20px;
cursor: pointer;
}
.title li.active {
color: #FF6700;
border-bottom: 2px solid #FF6700;
transition: .2s;
}
</style>
<style>
.main {
overflow: hidden;
}
.main a {
display: block;
width: 300px;
height: 400px;
text-align: center;
}
.main li {
float: left;
width: 300px;
height: 400px;
background-color: orange;
margin-right: 14px;
}
.main img {
width: 260px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="title">
<h2>搭配</h2>
<ul>
<li class="active">热门</li>
<li>耳机音响</li>
<li>电源</li>
<li>电池与储蓄卡</li>
</ul>
</div>
<ul class="main">
<li>
<a href="javascript:void(0)">
<h2>小米音响</h2>
<img src="https://i1.mifile.cn/a4/cf6660a3-d424-4248-889f-0eed1e99a342" alt="">
<p>这是小米音响, 稍微解释一下</p>
</a>
</li>
<li>
<a href="javascript:void(0)">
<h2>小米音响</h2>
<img src="https://i1.mifile.cn/a4/cf6660a3-d424-4248-889f-0eed1e99a342" alt="">
<p>这是小米音响, 稍微解释一下</p>
</a>
</li>
<li>
<a href="javascript:void(0)">
<h2>小米音响</h2>
<img src="https://i1.mifile.cn/a4/cf6660a3-d424-4248-889f-0eed1e99a342" alt="">
<p>这是小米音响, 稍微解释一下</p>
</a>
</li>
<li>
<a href="javascript:void(0)">
<h2>小米音响</h2>
<img src="https://i1.mifile.cn/a4/cf6660a3-d424-4248-889f-0eed1e99a342" alt="">
<p>这是小米音响, 稍微解释一下</p>
</a>
</li>
</ul>
</div>
</body> <!--设置导航-->
<script>
(function () {
// 制造数据(模拟后台请求得到的)
let data = [
[
{
title: "热门1",
img_url: "https://i1.mifile.cn/a4/xmad_15435448534832_SAPDq.jpg",
info: "这是热门"
},
{
title: "热门2",
img_url: "https://i1.mifile.cn/a4/xmad_15435448534832_SAPDq.jpg",
info: "这是热门"
},
{
title: "热门3",
img_url: "https://i1.mifile.cn/a4/xmad_15435448534832_SAPDq.jpg1e99a342",
info: "这是热门"
},
{
title: "热门4",
img_url: "https://i1.mifile.cn/a4/xmad_15435448534832_SAPDq.jpg",
info: "这是热门"
}
], [
{
title: "耳机1",
img_url: "https://i1.mifile.cn/a4/xmad_14950995035103_fhWtH.jpg",
info: "这是耳机"
},
{
title: "耳机2",
img_url: "https://i1.mifile.cn/a4/xmad_14950995035103_fhWtH.jpg",
info: "这是耳机"
},
{
title: "耳机3",
img_url: "https://i1.mifile.cn/a4/xmad_14950995035103_fhWtH.jpg",
info: "这是耳机"
},
{
title: "耳机4",
img_url: "https://i1.mifile.cn/a4/xmad_14950995035103_fhWtH.jpg",
info: "这是耳机"
}
], [], []
]; let lis = document.querySelectorAll('.title li');
// 设置一个记录活跃li索引的状态变量
let active_index = 0;
for (let i = 0; i < lis.length; i++) {
lis[i].onmouseover = function () {
// 清除之前活跃的
lis[active_index].className = "";
// 设置自身为活跃
this.className = "active";
// 更新活跃索引
active_index = i; // 更新数据
updateData(i);
}
} // 更新数据
let main_lis = document.querySelectorAll('.main li');
// 分析数据结构与页面结构,将指定数据渲染到指定位置
function updateData(index) {
let dataArr = data[index];
// let count = 0;
// for (dataObj of dataArr) {
// // console.log(dataObj.title);
// let h2 = main_lis[count].querySelector('h2');
// h2.innerText = dataObj.title;
// let img = main_lis[count].querySelector('img');
// img.setAttribute('src', dataObj.img_url);
// let p = main_lis[count].querySelector('p');
// p.innerText = dataObj.info;
// count++;
// }
for (let i = 0; i < dataArr.length; i++) {
let h2 = main_lis[i].querySelector('h2');
h2.innerText = dataArr[i].title;
let img = main_lis[i].querySelector('img');
img.setAttribute('src', dataArr[i].img_url);
let p = main_lis[i].querySelector('p');
p.innerText = dataArr[i].info;
}
} })()
</script> <!--完成数据更新-->
<script>
(function () {
let lis = document.querySelectorAll('.main li');
})()
</script> <!--
<script>
var lis = document.querySelectorAll('.title li');
for (let i = 0; i < lis.length; i++) {
lis[i].onmouseover = function () {
// 悬浮的li变成活跃状态, 之前活跃的li取消活跃状态 // 移除所有的
clearAllClassName()
// 添加自己的
this.className = "active"
}
}
function clearAllClassName() {
for (li of lis) {
li.className = "";
}
}
</script>
--> </html>
三、轮播图
```js
// 下一张
right_btn.onclick = function () {
// 清除之前活跃的图片和tag
img_lis[active_index].className = "";
tag_lis[active_index].className = "";
// 下一张
right_btn.onclick = function () {
// 清除之前活跃的图片和tag
img_lis[active_index].className = "";
tag_lis[active_index].className = "";
// 索引切换(更新活跃索引)
// 安全性: 最后一张的下一张应该是第一张
if (active_index == 4) active_index = -1;
active_index++;
// 安全性: 最后一张的下一张应该是第一张
if (active_index == 4) active_index = -1;
active_index++;
// 设置将要活跃的图片和tag
img_lis[active_index].className = "active";
tag_lis[active_index].className = "active";
};
// active_index 记录了当前活跃状态的索引, 且所有逻辑共有
// 无限录播时考虑索引边界切换的问题
```
img_lis[active_index].className = "active";
tag_lis[active_index].className = "active";
};
// active_index 记录了当前活跃状态的索引, 且所有逻辑共有
// 无限录播时考虑索引边界切换的问题
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style >
* {
/*不允许选择文本, 网页文本不能负责*/
user-select: none;
}
body, ul {
margin: 0;
padding: 0;
list-style: none;
}
.scroll {
width: 1226px;
height: 460px;
margin: 0 auto;
background-color: orange;
position: relative;
cursor: pointer;
}
.scroll_view {
width: 100%;
height: 100%;
position: relative;
}
.scroll_view li {
background: red;
width: 100%;
height: 100%;
font: normal 100px/460px 'STSong';
text-align: center;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.scroll_view li.active {
opacity: 1;
transition: .5s;
}
.left {
position: absolute;
top: 170px;
left: 0;
background-color: #eee;
font-size: 100px;
}
.left:hover, .right:hover {
cursor: pointer;
background-color: #333;
}
.right {
position: absolute;
top: 170px;
right: 0;
background-color: #eee;
font-size: 100px;
} .scroll_tag {
position: absolute;
right: 10px;
bottom: 10px;
}
.scroll_tag li {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #333;
border: 3px solid #ddd;
float: left;
margin: 0 10px;
}
.scroll_tag li.active {
background-color: #ccc;
border: 3px solid #333;
}
</style>
</head>
<body>
<div class="scroll">
<ul class="scroll_view">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul class="scroll_toggle">
<li class="left"><</li>
<li class="right">></li>
</ul>
<ul class="scroll_tag">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<script>
(function () {
let left_btn = document.querySelector('.left');
let right_btn = document.querySelector('.right');
let img_lis = document.querySelectorAll('.scroll_view li');
let tag_lis = document.querySelectorAll('.scroll_tag li');
let scroll = document.querySelector('.scroll'); // 定时器
let timer = 0; // 记录活跃状态的索引变量
let active_index = 0; // 下一张
right_btn.onclick = function () {
// 清除之前活跃的图片和tag
img_lis[active_index].className = "";
tag_lis[active_index].className = ""; // 索引切换(更新活跃索引)
// 安全性: 最后一张的下一张应该是第一张
if (active_index == 4) active_index = -1;
active_index++; // 设置将要活跃的图片和tag
img_lis[active_index].className = "active";
tag_lis[active_index].className = "active";
};
// 上一张
left_btn.onclick = function () {
// 清除之前活跃的图片和tag
img_lis[active_index].className = "";
tag_lis[active_index].className = ""; // 索引切换(更新活跃索引)
// 安全性: 第一张的前一张应该是最后一张
if (active_index == 0) active_index = 5;
active_index--; // 设置将要活跃的图片和tag
img_lis[active_index].className = "active";
tag_lis[active_index].className = "active";
}; // 自动轮播
function autoScroll() {
timer = setInterval(function () {
// 清除之前活跃的图片和tag
img_lis[active_index].className = "";
tag_lis[active_index].className = ""; // 索引切换(更新活跃索引)
// 安全性: 最后一张的下一张应该是第一张
if (active_index == 4) active_index = -1;
active_index++; // 设置将要活跃的图片和tag
img_lis[active_index].className = "active";
tag_lis[active_index].className = "active";
}, 1500);
}
// 加载页面就只执行一次,打开自动轮播
autoScroll(); // 鼠标悬浮轮播图停止自动轮播
scroll.onmouseenter = function () {
clearInterval(timer)
};
// 鼠标移开重新开启自动轮播
scroll.onmouseleave = function () {
autoScroll();
}; // tag点击对应的图片切换
for (let i = 0; i < tag_lis.length; i++) {
tag_lis[i].onclick = function () {
// console.log(i);
// 清除之前活跃的图片和tag
img_lis[active_index].className = "";
tag_lis[active_index].className = ""; // 更新活跃索引
active_index = i; // 设置将要活跃的图片和tag
img_lis[active_index].className = "active";
tag_lis[active_index].className = "active";
}
} })()
</script>
</html>
四、滚动轮播
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>滚动轮播</title>
<style>
body, ul {
margin: 0;
padding: 0;
list-style: none;
user-select: none;
} .wrapper {
width: 400px;
height: 240px;
background-color: orange;
margin: 50px auto;
position: relative;
overflow: hidden;
}
/* 滚得的标签是ul, 带动着4个li同步运动 */
.scroll_view {
width: 1600px;
/*利用绝对定位完成运动*/
position: absolute;
top: 0;
/*left: -400px;*/
left: 0;
/*transition: 1s;*/
}
.scroll_view li {
width: 400px;
height: 240px;
font: normal 80px/240px 'STSong';
text-align: center;
float: left;
}
.li1 { background-color: pink }
.li2 { background-color: deeppink }
.li3 { background-color: lightpink }
.li4 { background-color: hotpink} .left {
position: absolute;
top: 100px;
left: 0;
background-color: #eee;
font-size: 30px;
}
.left:hover, .right:hover {
cursor: pointer;
background-color: #333;
}
.right {
position: absolute;
top: 100px;
right: 0;
background-color: #eee;
font-size: 30px;
} .scroll_tag {
position: absolute;
right: 10px;
bottom: 10px;
}
.scroll_tag li {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #333;
border: 3px solid #ddd;
float: left;
margin: 0 10px;
}
.scroll_tag li.active {
background-color: #ccc;
border: 3px solid #333;
}
</style>
</head>
<body>
<div class="wrapper">
<ul class="scroll_view">
<li class="li1">1</li>
<li class="li2">2</li>
<li class="li3">3</li>
<li class="li4">4</li>
</ul>
<ul class="scroll_toggle">
<li class="left"><</li>
<li class="right">></li>
</ul>
<ul class="scroll_tag">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<script>
(function () {
let scroll_view = document.querySelector('.scroll_view');
let left_btn = document.querySelector('.left');
let right_btn = document.querySelector('.right');
let tag_lis = document.querySelectorAll('.scroll_tag li'); right_btn.onclick = function () {
let total_lenth = 400;
let count = 0;
let step = 8;
let timer = setInterval(function () {
// 通过滚动的距离映射出所在的图片索引
let index = parseInt(-scroll_view.offsetLeft / total_lenth);
index += 1;
console.log(index);
// 临界点, 往右4
if (index == 4) {
clearInterval(timer);
return;
} // 0+1 ==> 1
// 1+1 ==> 2
// 2+1 ==> 3
tag_lis[index - 1].className = "";
tag_lis[index].className = "active"; scroll_view.style.left = scroll_view.offsetLeft - step + 'px';
count++;
if (count >= total_lenth / step) {
clearInterval(timer)
}
}, 10);
}; left_btn.onclick = function () {
let total_lenth = 400;
let count = 0;
let step = 8;
let timer = setInterval(function () {
// 要偏移坐标系, 要加上一个宽度400 total_lenth
// 要处理第一次偏移bug, 少加上8 step
let index = parseInt((-scroll_view.offsetLeft + 392) / total_lenth);
console.log(index);
// 处理第一次偏移bug // 3 => 2
// 2 => 1
// 1 => 0
// 临界点, 往左0
if (index == 0) {
clearInterval(timer);
return;
}
// if (index == 4) index = 3;
tag_lis[index].className = "";
tag_lis[index - 1].className = "active"; scroll_view.style.left = scroll_view.offsetLeft + step + 'px';
count++;
if (count >= total_lenth / step) {
clearInterval(timer)
}
}, 10);
}
})()
</script>
</html>
web开发：javascript案例的更多相关文章
- 2015年10个最佳Web开发JavaScript库
2015年10个最佳Web开发JavaScript库 现在的互联网可谓是无所不有,有大量的JavaScript项目开发工具充斥于网络中.我们可以参考网上的指导来获取构建代码项目的各种必要信息.如果你是 ...
- Web开发——JavaScript基础
参考学习: MDN JavaScript:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript ECMAScript 6入门(阮一峰):htt ...
- Java Web 开发进阶案例之人事管理系统的完整实现
技术:Java+ jsp + servlet+ javabeans +sql+tomcat 概述 本系统的主要任务是实现人事管理系统的系统化和自动化管理, 主要包括招聘入 职.到期离职和员工调动信 ...
- 静态Web开发 JavaScript
三章 Javascript 1节javascript基本语法和注意事项 脚本,一条条的文字命令.执行时由系统的一个解释器,将其一条条的翻译成机器可识别的指令,然后执行.(不需要编译)常见的脚本:批处理 ...
- Web开发——JavaScript基础（JSON教程）
参考: JSON:JavaScript 对象表示法(JavaScript Object Notation). JSON 是存储和交换文本信息的语法.类似 XML. JSON 比 XML 更小.更快,更 ...
- 如何实现上下左右键盘控制焦点使之落在相邻文本框或下拉框中-Web开发/JavaScript
我用jquery只实现了文本框的移动(暂时上下移动等同于左右移动) $(function () { var cols = 1;//按一下跳几个控件 var obj = $("input[id ...
- 了不起的Node.js: 将JavaScript进行到底（Web开发首选，实时，跨多服务器，高并发）
了不起的Node.js: 将JavaScript进行到底(Web开发首选,实时,跨多服务器,高并发) Guillermo Rauch 编 赵静 译 ISBN 978-7-121-21769-2 2 ...
- Web 开发人员不能错过的 jQuery 教程和案例
jQuery 把惊喜延续到设计领域,处处带来极大的灵活性,创造了许多体验良好的设计,而且拥有不错的性能.这里分享一组 Web 开发人员不能错过的 jQuery 教程和案例,帮助你更好的掌握 jQuer ...
- 12款简化 Web 开发的 JavaScript 开发框架
前端框架简化了开发过程中,像 Bootstrap 和 Foundation 就是前端框架的佼佼者.在这篇文章了,我们编制了一组新鲜的,实用的,可以帮助您建立高质量的 Web 应用程序的 JavaScr ...
- Snap.svg – 现代 Web 开发必备的 JavaScript SVG 库
SVG 是一种很好的 Web 技术方案,可以用来创建互动,在任何大小的屏幕上都会很好看.与分辨率无关的矢量图形.而这里推荐的 Snap.svg 这个 JavaScript 可以让你像 jQuery 操 ...
随机推荐
- QML使用Python的函数
有2种方法: 一. QML中定义一个信号,连接Python里的函数: 这里的函数不用特意指明为槽函数,普通函数即可. QML的信号连接Python的函数 QML:首先在QML中定义一个信号,这里的信号 ...
- python进阶-mock接口
setting.py MYSQL_HOST='192.168.127.139' PASSWORD=' PORT=3306 USER='root' DB='stu' tools.py import py ...
- MongoDB可视化工具Studio 3T的使用
原文地址:https://blog.csdn.net/weixin_39999535/article/details/81383196 studio3T 永久使用方法 新建文件studio3t.bat ...
- 【ES 系列1】介绍与方案设计
简介 ElasticSearch是一个高度可扩展的开源全文搜索和分析引擎.它允许您快速.近实时地存储.搜索和分析大量数据.它通常被用作驱动具有复杂搜索功能和需求的应用程序的底层引擎/技术.适用于需要大 ...
- python logging模块【转载】
转自:https://www.cnblogs.com/dahu-daqing/p/7040764.html 参考:老顽童log模块,讲的很细致,基本上拿到手就可以直接用了,很赞 1 logging模块 ...
- [LuoguP2159][SHOI2009]舞会_动态规划_高精度_排列组合
舞会 题目链接:https://www.luogu.org/problem/P2159 数据范围:略. 题解: 不会.... 看了题解觉得自己好傻逼啊
- 飞腾PC机器与奔腾G645的PC机器以及E5-2630V4虚拟机内存性能简单对比
1. 对比工具 sysbench 2. 对比命令 sysbench --test=memory --memory-total-size=12G --num-threads= run 3 安装方式 #u ...
- [转帖]龙芯:Docker 配置与实践清单
Docker 配置与实践清单 http://www.sohu.com/a/254904706_198222 文章对来官方文档及 Docker Links[1] 中链接内容进行归档整理,包含了日常工作中 ...
- jdk1.8 Maven 的安装教程
1.下载java1.8 URL: http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-213315 ...
- java中Super到底是什么意思？必须举例说明！
[学习笔记] 3."超"关键字(super keyword) Super是一个参考(或说指针)指向他紧邻的父类(见下面的例子).用super可以指向被隐藏的父类的同名成员. 3.1 ...