实例

一、统计某个字符出现的次数并输出
二、统计字符串中出现的次数
三、点击关闭某部分
四、多精灵图一次性设置
五、全选
六、tab栏切换案例
七、使js代码在确保页面加载完成后再进行
八、下拉菜单显示与隐藏
九、动态生成表格
十、图片跟随鼠标移动
十一、按下键盘S键，搜索框自动获得焦点
十二、输入内容的时候，在上方显示大字
十三、倒计时
十四、发送验证码（其中的计时禁用按键功能）
十五、5秒钟后跳转页面
十六、实时获得鼠标在局部盒子中的坐标
十七、鼠标拖拽小窗口
十八、放大镜效果
十九、仿侧边栏滚动动态效果
二十、网页轮播图
二十一、

一、统计某个字符出现的次数并输出

var str = 'baobfabobodabfodao';
var index = str.indexOf('o');
var num = 0;
while (index != -1) {console.log(index);num++;index = str.indexOf('o', index + 1);
}
console.log('o出现的次数是：' + num);

结果如下：
在这里插入图片描述

二、统计字符串中出现的次数

let str = 'baobfabobodabfodao';
let num = str.split("").reduce((pre, cur) => {if (cur in pre) {pre[cur]++;} else {pre[cur] = 1;}return pre
}, {})
console.log('次数', num);

① 这里的split('' '')指的是，把一串字符串改为数组形式，然后用括号内的方式隔开
② reduce()方法具体：

let 结果数值变量 = 原数组.reduce((用于临时接收结果的新变量，用于索引的变量) => {......循环方法体......
},结果数值变量的初始值也可以不写)

三、点击关闭某部分

var foot = document.querySelector('.footer');
var img = foot.querySelector('img');
var meau = foot.querySelector('.meau');img.onclick = () => {meau.style.display = 'none';
}

四、多精灵图一次性设置

1、精灵图的排列一定是有规律的

eg.（这里的精灵图例子位置是间隔44）

// 精灵图一次性设置（循环）
var lis = document.querySelector('li');
for (var i = 0; i < lis.clientHeight; i++) {// 让 索引号 乘以 规律间隔 ，就是每一个li的背景y坐标 index就是我们的y坐标var index = i * 44;lis[i].style.backgroundPosition = '0 -' + index + 'px';
}

五、全选

在这里插入图片描述

var cbAll = document.getElementById('cbAll');
var tbs = document.getElementById('tb').getElementsByTagName('input');cbAll.onclick = () => {console.log(cbAll.checked);for (var i = 0; i < tbs.length; i++) {tbs[i].checked = cbAll.checked;}
}
for (var i = 0; i < tbs.length; i++) {tbs[i].onclick = () => {var flag = true;for (var i = 0; i < tbs.length; i++) {if (!tbs[i].checked) {flag = false;}}cbAll.checked = flag;}
}

六、tab栏切换案例

框架：
在这里插入图片描述
实际样式图：

window.onload = () => {var tab_list = document.querySelector('.tab_list');var lis = tab_list.querySelectorAll('li');var items = document.querySelectorAll('.item');for (let i = 0; i < lis.length; i++) {lis[i].setAttribute('index', i);lis[i].onclick = () => {for (let i = 0; i < lis.length; i++) {lis[i].className = '';}lis[i].className = 'current';var index = lis[i].getAttribute('index');for (let i = 0; i < lis.length; i++) {items[i].style.display = 'none';}items[index].style.display = 'block';}}
}

七、使js代码在确保页面加载完成后再进行

window.onload = () => {这里写 js 操作代码
}

八、下拉菜单显示与隐藏

<style>* {margin: 0;padding: 0;}li {list-style: none;}a {text-decoration: none;color: black;}.nav>li {float: left;position: relative;margin-left: 1px;margin-right: 1px;}.nav li {width: 100px;height: 50px;text-align: center;line-height: 50px;}.nav>li>a div {width: 100px;height: 50px;border-bottom: 1px solid black;}.nav>li>a div:hover {background-color: #ccc;color: orange;}.nav ul {display: none;position: absolute;top: 50px;left: -1px;width: 100%;border-left: 1px solid yellow;border-right: 1px solid yellow;}.nav ul li {border-bottom: 1px solid yellow;}.nav ul li a:hover {background-color: #FFF5DA;}
</style><body><ul class="nav"><li><a href="#"><div>微博</div></a><ul><li><a href="#">私信</a></li><li><a href="#">评论</a></li><li><a href="#">@我</a></li></ul></li>上面的<li>*3</ul><script>window.onload = () => {var nav = document.querySelector('.nav');var lis = nav.children;for (let i = 0; i < lis.length; i++) {lis[i].onmouseover = () => {lis[i].children[1].style.display = 'block';}lis[i].onmouseout = () => {lis[i].children[1].style.display = 'none';}}}</script>
</body>

九、动态生成表格

（直接写数据生成表格最后删除）

<style>table {width: 500px;margin: 100px auto;border-collapse: collapse;text-align: center;}td,th {border: 1px solid #333;}thead tr {height: 40px;background-color: #ccc;}
</style><body><table><thead><tr><th>姓名</th><th>科目</th><th>成绩</th><th>操作</th></tr></thead><tbody></tbody></table><script>window.onload = () => {var datas = [{name: '郑楷',subject: 'Java',score: 90,}, {name: '黄科然',subject: 'HTML',score: 100,}, {name: '不知道',subject: 'vue',score: 80,}];var tbody = document.querySelector('tbody');for (let i = 0; i < datas.length; i++) {let tr = document.createElement('tr');tbody.appendChild(tr);for (let k in datas[i]) {let td = document.createElement('td');td.innerHTML = datas[i][k];tr.appendChild(td);}let td = document.createElement('td');td.innerHTML = '<a href = "javascript:;">删除</a>';tr.appendChild(td);}var as = document.querySelectorAll('a');for (let i = 0; i < as.length; i++) {as[i].onclick = () => {tbody.removeChild(as[i].parentNode.parentNode);}}}</script>
</body>

结果如下：
在这里插入图片描述

十、图片跟随鼠标移动

<script>window.onload = () => {var img = document.querySelector('img');document.addEventListener('mousemove', function (e) {//把鼠标为位置传递给系统let x = e.pageX;let y = e.pageY;//把位置变为图片的额位置，这里注意要加上 px 后缀//img.width/height/2 是让图片居中img.style.left = (x - (img.width / 2)) + 'px';img.style.top = (y - (img.height / 2)) + 'px';})}
</script>

十一、按下键盘S键，搜索框自动获得焦点

这里的识别，最好使用 keyup ，因为使用 keydown
按下出发后，系统识别的下一个动作是按住的输入功能，会导致将标识键当成内容而误输入。

十二、输入内容的时候，在上方显示大字

① 首先有一个文本框，在上面先放置一个大字盒子，并隐藏
② 然后键盘监听，要使用 keyup ，原理与上面一致
③把内容识别，然后赋值给上面的大盒子，并使它显示，如果是空的，就自动隐藏
④ 再增加输入框失去光标则隐藏盒子。

十三、倒计时

<style>div {text-align: center;margin-top: 270px;font-size: 50px;}span {display: inline-block;margin-right: 10px;width: 100px;height: 100px;color: white;font-size: 40px;text-align: center;line-height: 100px;background-color: rgb(44, 43, 43);}
</style><body><div><span class="day">0</span>天<span class="hour">1</span>小时<span class="minute">2</span>分<span class="second">3</span>秒</div><script>var day = document.querySelector('.day');var hour = document.querySelector('.hour');var minute = document.querySelector('.minute');var second = document.querySelector('.second');var inputTime = +new Date('2022-1-1 00:00:00');countDown();setInterval(countDown, 1000);function countDown(Time) {let nowTime = +new Date();let times = (inputTime - nowTime) / 1000;var d = parseInt(times / 60 / 60 / 24);  //计算天数d = d < 10 ? '0' + d : d;day.innerHTML = d;var h = parseInt(times / 60 / 60 % 24);  //计算小时数h = h < 10 ? '0' + h : h;hour.innerHTML = h;var m = parseInt(times / 60 % 60);  //计算分钟数m = m < 10 ? '0' + m : m;minute.innerHTML = m;var s = parseInt(times % 60);  //计算秒数s = s < 10 ? '0' + s : s;second.innerHTML = s;}</script>
</body>

十四、发送验证码（其中的计时禁用按键功能）

编程思路如下：
在这里插入图片描述

<div>手机号码：<input type="number"> &nbsp <button>发送</button>
</div>
<script>var btn = document.querySelector('button');var x = 3;btn.addEventListener('click', () => {btn.disabled = true;  //点击后先禁用按钮let time = setInterval(() => {if (x >= 0) {  //使其到0停止btn.innerHTML = '还剩下' + x-- + '秒'  //动态变化内部内容，形成计时效果} else {clearInterval(time);  //清除定时器btn.disabled = false;  //接触禁止btn.innerHTML = '发送';  //复原内部文字x = 3;  //复原计时器回到数字初始}}, 1000);})
</script>

十五、5秒钟后跳转页面

<body><div></div><script>var div = document.querySelector('div');var x = 3;let time = setInterval(() => {if (x >= 0) {  //使其计时到0停止div.innerHTML = '您将在' + x-- + '秒后跳转到首页';} else {location.href = 'http://www.baidu.com';}}, 1000);</script>
</body>

十六、实时获得鼠标在局部盒子中的坐标

window.onload = () => {var box = document.querySelector('.box');box.addEventListener('mousemove', function (e) {let x = e.pageX - box.offsetLeft;let y = e.pageY - box.offsetTop;box.innerHTML = '鼠标在盒子里的X坐标：' + x + '<br>鼠标在盒子里的Y坐标：' + y;})
}

十七、鼠标拖拽小窗口

三个过程：
1、鼠标按下
    ① 获得鼠标在盒子内的坐标
2、鼠标移动 （要写在按下事件里面，否则会独立触发）
    ① 鼠标在页面中的坐标，减去，鼠标在盒子内的坐标**（由于鼠标拖拽过程中，坐标恒定），等于盒子新的坐标值（原理是盒子的坐标值本身就是以盒子外的 left 值和 top 值决定的）**
② 需要给这个事件加个名字，方便后面解除的 removeEventListener 可以用上。
3、鼠标松开
    ① 解除事件，使用 removeEventListener 事件

div.addEventListener('mousedown', (e) => {let x = e.pageX - box.offsetLeft;let y = e.pageY - box.offsetTop;// 因为是需要鼠标按下之后，才可以触发移动事件，所以写在里面div.addEventListener('mousemove', move)function move(e) {box.style.left = e.pageX - x + 'px';box.style.top = e.pageY - y + 'px';}div.addEventListener('mouseup', (e) => {div.removeEventListener('mousemove', move)})
})

十八、放大镜效果

三个过程：
1、鼠标经过图片区域，遮挡层和显示区盒子显示，离开隐藏这两个盒子
    ① 要有 mouseover 和 mouseout 鼠标经过和移出这两个事件
2、遮挡层跟随鼠标移动
    ① 获得鼠标在盒子内的坐标（鼠标坐标 - 盒子坐标）
    ② 左右各减去遮挡层的一半，使其跟随中心移动
    ③ 通过 if-else-if 算法，加上限制防止遮挡层超出盒子
（可以用坐标或者移动距离为参照数据，最好使用移动距离，计算量少，使服务器运行更顺畅）
3、移动遮挡层，显示区盒子跟随移动功能
    ① 根据遮挡层在图片上移动的距离 等比例让显示区的图片跟着移动
    ② 注意显示区里面的图片需要定位，否则无法移动
    ③ 显示区图片的移动是跟遮挡层反方向的

<style>* {margin: 0;padding: 0;}.box {height: 400px;}.pic {position: relative;width: 250px;height: 250px;left: 40%;margin-left: -125px;margin-top: 100px;}.mask {display: none;position: absolute;width: 100px;height: 100px;background-color: yellow;z-index: 999;opacity: .6;cursor: move;}.pic img {width: 250px;height: 250px;}.see {display: none;position: absolute;width: 200px;height: 200px;left: 100%;top: 0px;z-index: 9999;border: #ebebeb solid 1px;box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);/* 超出的部分自动隐藏 */overflow: hidden;}.see img {position: absolute;top: 0;left: 0;width: 400px;height: 400px;}
</style><body><div class="box"><div class="pic"><div class="mask"></div><img src="images/2.jpg" alt=""><div class="see"><img src="images/2.jpg" alt="" class="seeImg"></div></div></div><script>window.onload = () => {var pic = document.querySelector('.pic');var mask = document.querySelector('.mask');var see = document.querySelector('.see');var seeImg = document.querySelector('.seeImg');pic.addEventListener('mouseover', (e) => {mask.style.display = 'block';see.style.display = 'block';})pic.addEventListener('mouseout', (e) => {mask.style.display = 'none';see.style.display = 'none';})pic.addEventListener('mousemove', (e) => {let x = e.pageX - pic.offsetLeft;let y = e.pageY - pic.offsetTop;let maskX = x - mask.offsetWidth / 2;let maskY = y - mask.offsetHeight / 2;//最大移动距离let maskMaxX = pic.offsetWidth - mask.offsetWidth;let maskMaxY = pic.offsetHeight - mask.offsetHeight;if (maskX <= 0) {maskX = 0;} else if (maskX >= maskMaxX) {maskX = maskMaxX;}if (maskY <= 0) {maskY = 0;} else if (maskY >= maskMaxY) {maskY = maskMaxY;}mask.style.left = maskX + 'px';mask.style.top = maskY + 'px';//显示区图片移动//显示区的移动距离 = 遮挡层移动距离 * 显示区最大移动距离 / 遮挡层的最大移动距离//显示区最大移动距离let imgMaxX = seeImg.offsetWidth - see.offsetWidth;let imgMaxY = seeImg.offsetHeight - see.offsetHeight;//同比例移动距离let seeX = maskX * imgMaxX / maskMaxX;let seeY = maskY * imgMaxY / maskMaxY;seeImg.style.left = -seeX + 'px';seeImg.style.top = -seeY + 'px';})}</script>
</body>

十九、仿侧边栏滚动动态效果

效果：侧边栏先在下面随着页面滚动，当侧边栏到界面顶部时，固定不动，并在一定位置的时候，出现“回到顶部”的按钮
    ① 侧边栏原先是绝对定位
    ② 当页面滚动到一定位置，侧边栏改为固定定位
    ③ 页面继续滚动，会让“返回顶部”显示出来
    ④ 使用空链接，做到点击“返回顶部”就弹回顶部的效果

<body><div class="slider-bar"><!-- 空标签自动弹回顶部 --><span class="goback"><a href="#">返回顶部</a></span></div><div class="header base">头部区域</div><div class="banner base">导航栏区域</div><div class="main base">主体部分</div><div class="footer base">底栏信息</div><script>window.onload = () => {var sliderBar = document.querySelector('.slider-bar');var banner = document.querySelector('.banner');var main = document.querySelector('.main');var goBack = document.querySelector('.goback');let sliderBarTop = sliderBar.offsetTop; //计算侧边栏最开始到页面顶部的距离let mainTop = main.offsetTop;let sliderBarBet = sliderBar.offsetTop - mainTop; //计算侧边栏开始固定的位置距离（这里用主体部分参照物）document.addEventListener('scroll', () => {// sliderBar.innerHTML = window.pageYOffset;if (window.pageYOffset >= mainTop) {sliderBar.style.position = 'fixed';sliderBar.style.top = sliderBarBet + 'px';goBack.style.display = 'block';} else {sliderBar.style.position = 'absolute';sliderBar.style.top = sliderBarTop + 'px';goBack.style.display = 'none';}})}</script>
</body>

二十、网页轮播图

1、鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮

mouseover, display:block / none;

2、点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。

① 先设定一个num=0（类似索引值），点击向左，图片向右移动num++，点击向右，图片向左移动num–，移动距离为 num * 图片距离
② 到终点处首尾连接，实现无缝连接（自动复制（用cloneNode()+appendChild()）第一张图片放在最后面，当滚动到克隆图的时候，不做动画的快速跳转到头部（xxx.style.left:0;）），左右同理。

3、图片播放的同时，下面小圆圈模块跟随一起变化。

动态生成小圆圈
① 获取 ul 子元素的个数（ul.children.length）
② 创建小圆圈（let li =document.createElement(‘li’)）
③ 排他算法（清除所有再当前赋值样式）

小圆圈跟随播放（左右按钮）
① 判断 num 变化，动态变化小圆圈
② 判断 num 的位置是否是克隆图，是的话第一个小圆圈显示，否则的话正常跟随显示

4、点击小圆圈，可以播放相应图片。

给所有的小圆圈加上索引值，用索引值 * 图片宽度=>每一张图片说代表的移动距离
给小圆圈加上监听，小圆圈的变化连带图片位置的移动（写在小圆圈的变化里面）
这里注意实时获取索引值，可以和左右按钮联动，否则容易有bug

5、鼠标不经过轮播图，轮播图也会自动播放图片。

用定时器原理
可以写一个滚动代码，也可以直接封装调用右按钮方法，也可以直接调用右按钮方法（arrowR.click()）

6、鼠标经过，轮播图模块，自动播放停止。

停止定时器即可
离开的时候自动启动，再次调用定时器

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="index.css"><script src="../../animate.js"></script><script src="index.js"></script>
</head><body><div class="w"><div class="main"><div class="focus fl"><!-- 左按钮 --><a href="javascript:;" class="arrow-l">&lt;</a><!-- 右按钮 --><a href="javascript:;" class="arrow-r">&gt;</a><!-- 滚动区域 --><ul><li><a href="#"><img src="../images/10.jpg" alt=""></a></li><li><a href="#"><img src="../images/29.jpg" alt=""></a></li><li><a href="#"><img src="../images/32.jpg" alt=""></a></li><li><a href="#"><img src="../images/49.jpg" alt=""></a></li></ul><ol class="circle"></ol></div></div></div></body></html>

* {margin: 0;padding: 0;
}a {text-decoration: none;
}li {list-style: none;
}img {width: 720px;height: 455px;
}.main {width: 980px;height: 455px;margin-left: 219px;margin-top: 10px;}.focus {position: relative;width: 720px;height: 455px;background-color: purple;overflow: hidden;
}.focus ul {position:absolute;top: 0;left: 0;width: 600%;
}.focus ul li {float: left;
}.arrow-l,
.arrow-r {display: none;position: absolute;top: 50%;margin-top: -20px;width: 24px;height: 40px;background: rgba(0, 0, 0, .3);text-align: center;line-height: 40px;color: #fff;font-family: 'icomoon';font-size: 18px;z-index: 2;
}.arrow-r {right: 0;
}.circle {position: absolute;bottom: 10px;left: 50px;
}.circle li {float: left;width: 8px;height: 8px;border: 2px solid rgba(225, 255, 225, 0.5);margin: 0px 3px;border-radius: 50%;/* 鼠标经过有小手 */cursor: pointer;
}.current {background-color: #fff;
}

window.onload = () => {// alert('123');var focus = document.querySelector('.focus')var arrowL = document.querySelector('.arrow-l');var arrowR = document.querySelector('.arrow-r');var ul = focus.querySelector('ul');var ol = focus.querySelector('.circle');var num = 0;//索引号//一张图片的宽度var focusWidth = focus.offsetWidth;// 鼠标经过左右按钮显示和隐藏focus.addEventListener('mouseenter', () => {arrowL.style.display = 'block';arrowR.style.display = 'block';clearInterval(timer);})focus.addEventListener('mouseleave', () => {arrowL.style.display = 'none';arrowR.style.display = 'none';timer = setInterval(() => {arrowR.click();}, 2000);})// 动态生成小圆圈for (let i = 0; i < ul.children.length; i++) {//计算有多少个ul，等于有多少个图片//按个数创建小lilet li = document.createElement('li');//获取这个li后，自定义给它加上一个索引号（属性值的索引号）li.setAttribute('index', i);//插入ol.appendChild(li);//加入排他算法li.addEventListener('mouseover', () => {for (let i = 0; i < ol.children.length; i++) {ol.children[i].className = '';}//给 ol 中的经过的 li 加上 current 样式li.className = 'current';//获取点击的小li的索引号let index = li.getAttribute('index');num = li.getAttribute('index');//移动的算法的就是 索引号*图片 的宽度，等于需要移动的距离animate(ul, -(index * focusWidth));})}//首先默认给第一个小圆圈附加样式ol.children[0].className = 'current';//克隆第一张图片到最后面var firstImg = ul.children[0].cloneNode(true);ul.appendChild(firstImg);//右按钮点击arrowR.addEventListener('click', () => {//先判断当前是否是克隆图，是的话直接跳转到第一张，实现无缝连接if (num == ul.children.length - 1) {ul.style.left = 0;num = 0;}num++;//因为索引号排序问题，在右边的图片必定是更大的数animate(ul, -num * focusWidth);//调用小圆圈样式方法circle(num);})//左按钮点击（与右按钮同理）arrowL.addEventListener('click', () => {if (num == 0) {ul.style.right = 0;num = ul.children.length - 1;}num--;animate(ul, -num * focusWidth);circle(num);})//自动播放（定时器原理）var timer = setInterval(() => {arrowR.click();}, 2000);//方法区//小圆圈判断加样式方法function circle(e) {//先清空所有小圆圈的样式for (let i = 0; i < ol.children.length; i++) {ol.children[i].className = "";}//判断是不是克隆图，是的话直接给第一个小圆圈加样式if (e == ul.children.length - 1) {ol.children[0].className = 'current';} else {//否则正常加样式ol.children[e].className = 'current';}}
}

二十一、

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

北京市级及国家级企业技术中心认定奖励重点介绍，补贴300-500万
北京市级及国家级企业技术中心认定奖励，补贴300-500万，每个区不同，以各区具体的奖励金额为准。还可以综合利用加计扣除、固定资产加速折旧、符合条件的技术转让所得减免征收企业所得税。需要企业上一年度主营业务收入不低于2亿元（…...
2024/5/5 21:07:37
收藏~Dropbox 是如何解决 Android App 的内存泄漏问题的？
当应用程序为对象分配内存，而对象不再被使用时却没有释放，就会发生内存泄漏。随着时间的推移，泄漏的内存会累积，导致应用程序性能变差，甚至崩溃。泄漏可能发生在任何程序和平台上，但由于活动生命周期的复杂…...
2024/4/5 2:33:16
分布式锁设计与实践
分布式锁设计与实践 1. 分布式锁是什么分布式锁即在分布式环境下锁定共享资源，让请求处理串行化，实际表现为互斥锁。分布式锁可以解决业务中的幂等性问题。分布式锁是主要是可重入的排它锁，主要具有如下特点： 1）…...
2024/4/13 11:01:52
缓存雪崩缓存击穿缓存雪崩出现原因及解决方案
文章目录缓存雪崩出现原因一解决方案方案一差异化设置过期时间方案二服务降级方案三不设置过期时间出现原因二解决方案方案一服务熔断方案二请求限流方案三 Redis构建高可靠集群缓存击穿解决方案方案一分布式锁方案二热点数据不设置过期时间缓存穿透出现原因解决方案方案…...
2024/4/5 2:33:15
PCL：关于pcd数据显示乱码
将bin 格式的点云转换成pcd 的格式有可能乱码，需要将pcd 另存一份代码在git 代码在git ^W^Y<87>B?<9d>^_<86>B<98>n?d;^_^P<86>B ?)\^_^B<86>BZd?<8b>l^_y©<86>B^L^B^C^B^_<87><96><8…...
2024/5/5 21:30:57
华为运营商级路由器配置示例 | IPv4浮动静态路由
组网需求路由器各接口及主机的IP地址和掩码如图1所示。在DeviceA上配置两条去往10.1.5.0/24的IPv4静态路由，其中优先级较高的主静态路由经过DeviceB，浮动静态路由经过DeviceC。图1 配置IPv4浮动静态路由组网图配置思路首先配置各路由器各接口的IP…...
2024/4/18 12:35:55
Jupyter Notebook介绍、安装及使用教程
链接：https://www.jianshu.com/p/91365f343585/ 来源：简书一、什么是Jupyter Notebook？ 1. 简介 Jupyter Notebook是基于网页的用于交互计算的应用程序。其可被应用于全过程计算：开发、文档编写、运行代码和展示结果。——Jup…...
2024/5/5 16:50:31
华为运营商级路由器配置示例 | IPv4静态路由
组网需求路由器各接口及主机的IP地址和掩码如图1所示。要求采用静态路由，使图中任意两台主机之间都能互通。图1 配置IPv4静态路由组网图配置思路首先配置各路由器各接口的IPv4地址，使网络互通。在路由器上配置到目的地址的IPv4静态路由及缺省路由…...
2024/4/13 11:03:03
[MRCTF2020]Ezaudit
[MRCTF2020]Ezaudit 文章目录[MRCTF2020]Ezaudit伪随机数php_mt_rand()知识点：伪随机数mt_rand() 源码泄露：www.zip 下载后，是个index.php <?php header(Content-type:text/html; charsetutf-8); error_reporting(0); if(isset($_POST[…...
2024/4/14 0:02:23
算法@SHA1算法逆向与还原
SHA1算法逆向与还原概述 sha1算法加密后的字符串长度是40位，sha256长度是64位一般sha1算法还原目标程序加密结果跟SHA1算法对不上看下伪代码，SHA1算法跟MD5是类似的，也会用调用SHA1Update函数把盐字符串拼接上就对了 SHA1Init常量变…...
2024/4/30 6:49:46
区块链开发技术
1.ethers.js、web3.js 区块链框架 2.花点时间学习Solidity和Truffle Solidity是以太坊推出的智能合约编程语言；Truffle是目前最常用的以太坊开发框架。作为区块链开发者，你必须对Solidity和Truffle非常熟悉。其实，Solidity上手的门槛并不高&a…...
2024/5/5 17:24:26
《道德经》全文 (马王堆出土帛书版)
01 道可道也，非恒道也。名可名也，非恒名也。无名万物之始也，有名万物之母也。故：恒无欲也，以观其眇；恒有欲也，以观其徼。两者同出，异名同谓。玄之又玄，众妙之门。 02 …...
2024/5/5 18:24:08
2022年2月8日学习总结
8:30~11:00 做一套英语四级真题，记单词。 11:00~12:30 复习高数 1:00~3：00 教妹妹高中数学 3:00~5:00 在网络上学习bmp 【neko】KMP算法【算法编程#7】_哔哩哔哩_bilibili KMP算法—终于全部弄懂了_dark_cy的博客-CSDN博客_kmp算法 KMP算法--c…...
2024/4/13 11:02:43
华为运营商级路由器配置示例 | 静态BFD for IPv4静态路由
组网需求如图1所示，DeviceA通过SwithC和DeviceB相连。在DeviceA上配置静态缺省路由可以与外部进行正常通信。同时，在DeviceA和DeviceB之间配置BFD会话来快速检测链路故障。图1 配置静态BFD for IPv4静态路由组网图配置思路在DeviceA和DeviceB上配…...
2024/5/5 21:33:52
我在研究MySQL online DDL 更改Varchar的字段长度
MySQL online DDL 更改Varchar的字段长度一、这里是可以跳过的牢骚开年上班的第一个星期，周围的同事们都在“表面上努力的工作，朋友圈一打开都在祝福谷爱凌夺冠”，哈哈哈，比较闲啦。今天研究了一下varchr长度变更会不会把表给…...
2024/4/15 14:01:43
Git提交代码/创建本地分支/创建远程分支
首次提交代码第一步：拉取代码 git clone XXX 远程ssh地址这里已我的为例： git clone gitgithub.com:caozhengbo/cekai8.git查看一下当前代码的分支 git branch第二步：修改代码里面的内容我这里修改了README.md 文件第三步查看本次修…...
2024/4/7 22:21:04
APP如何接入线上支付渠道，为什么不建议直接对接官方渠道
线上程序，包括app，h5网页等，往往都有支付的需求，很多人都认为接入支付这种事，只需要找到支付宝或者微信就能顺利接入了，话是这么说没错，个人或者公司也是能够直接对接支付宝以及微信等各种线上支…...
2024/4/17 21:48:33
解决虚拟机ubuntu20.04不能连外网问题
首先，我用的不是dhcp服务将ip分配给虚拟机的，用的是nat模式先打开vm虚拟机的虚拟网络编辑器，如图先打开编辑-->虚拟网络编辑器然后点击更改设置此时点击VMnet8，注意“使用本地DHCP服务将IP地址分配给虚拟机”这个选项我是没…...
2024/4/13 11:03:08
CAD软件开发面试记录
判断点是否在椭球内单链表逆向操作，写算法代码通过二叉树的前序遍历结果和中序遍历结果，写算法代码得到后序遍历结果如何做，可以让一个自定义的类当做map的key如何访问其他类的私有成员如何访问dll中的代码unorderedMap的底层原理&#xff0c…...
2024/4/26 14:01:11
c++ stat函数获取文件状态（包括修改时间等）
//stat函数不需要打开文件也能获取文件状态信息，对修改时间无影响,比GetFileTime函数好。 //前一篇文章的GetFileTime也可获取修改时间，但需要打开文件，打开文件影响修改时间，不推//荐使用GetFileTime函数。 #include <iostr…...
2024/4/13 11:02:43

JS具体实例（一）

实例