JS-特效 ～ 03. 楼层跳跃、事件对象event的获取与使用、event的主要内容、screenX、pageX、clientX的区别、放大镜、模拟滚动条
楼层跳跃
100%子盒子会继承父盒子的宽高。父盒子继承body宽高。Body继承html的宽高。
盒子属性：auto:适应盒子自身的宽度或者高度。（对自己负责）
盒子属性：100%:适应盒子父盒子的宽度或者高度。（对爸爸负责）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
body,html {
height: 100%;
}
ul {
list-style: none;
height: 100%;
}
ul li {
height: 100%;
}
ol {
list-style: none;
position: fixed;
top: 80px;
left: 50px;
}
ol li {
width: 50px;
height: 50px;
border: 1px solid #000;
text-align: center;
line-height: 50px;
margin-top: -1px;
cursor: pointer;
}
</style>
</head>
<body> <ul>
<li>鞋子区域</li>
<li>袜子区域</li>
<li>裤子区域</li>
<li>裙子区域</li>
<li>帽子区域</li>
</ul>
<iframe src="04-鼠标跟随.html" frameborder="20px" style="margin-top: 100px"></iframe> <ol>
<li>鞋子</li>
<li>袜子</li>
<li>裤子</li>
<li>裙子</li>
<li>帽子</li>
</ol> <script src="animate.js"></script>
<script>
//需求：点击ol中的li，屏幕滑动到对应的ul中的li的范围。
//思路：还是利用window.scrollTo();利用缓动动画原理实现屏幕滑动。
//步骤：
//0.获取元素
//1.指定ul和ol中的li的背景色，对应的li背景色相同
//2.老三步。(获取元素并绑定事件)
//3.利用缓动动画原理实现屏幕滑动
//4.用scroll事件模拟盒子距离最顶端的距离。 //0.获取元素
var ul = document.getElementsByTagName("ul")[0];
var ol = document.getElementsByTagName("ol")[0];
var ulLiArr = ul.children;
var olLiArr = ol.children;
var target = 0;var leader = 0;var timer = null;
//1.指定ul和ol中的li的背景色，对应的li背景色相同
//设置一个数组，里面装颜色，然指定的颜色给数组中的指定元素
var arrColor = ["pink","blue","yellow","orange","green"];
//利用for循环给两个数组的元素上色
for(var i=0;i<arrColor.length;i++){
//上色
ulLiArr[i].style.backgroundColor = arrColor[i];
olLiArr[i].style.backgroundColor = arrColor[i]; //属性绑定索引值
olLiArr[i].index = i;
//2.老三步。(并绑定事件)循环绑定，为每一个li绑定点击事件
olLiArr[i].onclick = function () {
//***获取目标位置
//获取索引值。
target = ulLiArr[this.index].offsetTop; //要用定时器，先清除定时器
clearInterval(timer);
//3.利用缓动动画原理实现屏幕滑动
timer = setInterval(function () {
//(1).获取步长
var step = (target-leader)/10;
//(2).二次处理步长
step = step>0?Math.ceil(step):Math.floor(step);
//(3).屏幕滑动
leader = leader + step;
window.scrollTo(0,leader);
//(4).清除定时器
if(Math.abs(target-leader)<=Math.abs(step)){
window.scrollTo(0,target);
clearInterval(timer);
}
},25);
}
} //4.用scroll事件模拟盒子距离最顶端的距离。
window.onscroll = function () {
//每次屏幕滑动，把屏幕卷去的头部赋值给leader,模拟获取显示区域距离顶部的距离
leader = scroll().top;
} </script> </body>
</html>
楼层跳跃
事件对象：
在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象，但支持的方式不同。
比如鼠标操作时候，会添加鼠标位置的相关信息到事件对象中。（类似Date）
普通浏览器支持 event（带参，任意参数）
ie 678 支持 window.event（无参，内置）
总结：他是一个事件中的内置对象。内部装了很多关于鼠标和事件本身的信息。
事件对象的获取 event的获取：
IE678中，window.event
在火狐谷歌中，event或者，在事件绑定的函数中，加参，这个参数就是event.
Box.onclick = function (aaa){ aaa就是event }
获取方式有两种：
不写参数直接获取；
var event = event || window.event;(主要用这种)
event的部分重要内容
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
height: 5000px;
}
img {
position: absolute;
padding: 10px 0;
border: 1px solid #ccc;
cursor: pointer;
}
</style>
</head>
<body>
<img src="data:images/img.jpg" width="100"/>
<script>
//需求：点击页面的任何地方，图片跟随鼠标移动到点击位置。
//思路：获取鼠标在页面中的位置，然图片缓慢运动到鼠标点击的位置。
// 兼容ie67做pageY和pageX；
// 原理： 鼠标在页面的位置 = 被卷去的部分+可视区域部分。
//步骤：
//1.老三步。
//2.获取鼠标在页面中的位置。
//3.利用缓动原理，慢慢的运动到指定位置。（包括左右和上下） //1.老三步。
var img = document.getElementsByTagName("img")[0];
var timer = null;
var targetx = 0;var targety = 0;
var leaderx = 0;var leadery = 0;
//给整个文档绑定点击事件获取鼠标的位置。
document.onclick = function (event) {
//新五步
//兼容获取事件对象
event = event || window.event;
//鼠标在页面的位置 = 被卷去的部分+可视区域部分。
var pagey = event.pageY || scroll().top + event.clientY;
var pagex = event.pageX || scroll().left + event.clientX; //要用定时器，先清定时器
// targety = pagey-img.offsetHeight/2;
// targetx = pagex-img.offsetWidth/2;
targety = pagey-30;
targetx = pagex-50;
clearInterval(timer);
timer = setInterval(function () {
//为盒子的位置获取值
leaderx = img.offsetLeft;
//获取步长
var stepx = (targetx-leaderx)/10;
//二次处理步长
stepx = stepx>0?Math.ceil(stepx):Math.floor(stepx);
leaderx = leaderx + stepx;
//赋值
img.style.left = leaderx + "px"; //为盒子的位置获取值
leadery = img.offsetTop;
//获取步长
var stepy = (targety-leadery)/10;
//二次处理步长
stepy = stepy>0?Math.ceil(stepy):Math.floor(stepy);
leadery = leadery + stepy;
//赋值
img.style.top = leadery + "px";
//清定时器 // if(Math.abs(targety-img.offsetTop)<=Math.abs(stepy) && Math.abs(targetx-img.offsetLeft)<=Math.abs(stepx)){
// img.style.top = targety + "px";
// img.style.left = targetx + "px";
// clearInterval(timer);
// }
},30);
}
//2.获取鼠标在页面中的位置。
//3.利用缓动原理，慢慢的运动到指定位置。（先左右后上下） </script> </body>
</html>
图片缓动到鼠标位置
screenX、pageX和clientX的区别
pageY/pageX ： 鼠标位于整个网页页面的顶部和左侧的距离（页面）
screenY/screenX： 鼠标位于屏幕的上方和左侧的距离 （屏幕）
clientX／clientY： 鼠标位于浏览器的左侧和顶部的距离。（浏览器大小和位置）
pageY和pageX的兼容写法：
在页面的位置=看的见的+看不见的部分；
pageY／pageX = event.clientY+scroll().top/scroll().left
function scroll() { // 开始封装自己的scrollTop
if(window.pageYOffset != null) { // ie9+ 高版本浏览器
// 因为 window.pageYOffset 默认的是 0 所以这里需要判断
return {
left: window.pageXOffset,
top: window.pageYOffset
}
}
else if(document.compatMode === "CSS1Compat") { // 标准浏览器 来判断有没有声明DTD
return {
left: document.documentElement.scrollLeft,
top: document.documentElement.scrollTop
}
}
return { // 未声明 DTD
left: document.body.scrollLeft,
top: document.body.scrollTop
}
}
新事件：onmousemove 鼠标移动
onmouseenter:鼠标进入
onmouseleave:鼠标离开
只要鼠标在绑定该事件的事件源上移动，哪怕1像素，也会触动这个事件。
（这个事件可以直接或者间接的替代定时器）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {margin: 0;padding: 0;}
.box {
width: 350px;
height: 350px;
margin:100px;
border: 1px solid #ccc;
position: relative;
}
.big {
width: 400px;
height: 400px;
position: absolute;
top: 0;
left: 360px;
border: 1px solid #ccc;
overflow: hidden;
/*display: none;*/
}
.mask {
width: 175px;
height: 175px;
background: rgba(255, 255, 0, 0.4);
position: absolute;
top: 0;
left: 0;
cursor: move;
}
.small {
position: relative;
}
img {
vertical-align: top;
}
</style>
<!--<script src="animate.js"></script>-->
<script>
window.onload = function () { var box = document.getElementsByClassName("box")[0];
var small = box.firstElementChild||box.firstChild ;
var big = box.children[1];
var mask = small.lastElementChild || box.lastChild ;
var bigImg = big.children[0];
// console.log(mask); small.onmouseenter = function () {
show(mask);
show(big);
};
small.onmouseleaver = function () {
hide(mask);
hide(big);
}; small.onmousemove = function (event) {
event = event || window.event;
var pagex = event.pageX || scroll().left + event.clientX;
var pagey = event.pageY || scroll().top +event.clientY; // 让鼠标在黄盒子最中间。 减去黄盒子的一半 var x = pagex - box.offsetLeft - mask.offsetWidth/2 ;
var y = pagey - box.offsetTop - mask.offsetHeight/2 ; // 限制黄盒子的范围
if (x<0){
x = 0 ;
}
if(x>small.offsetWidth - mask.offsetWidth){
x = small.offsetWidth - mask.offsetWidth;
}
if (y<0) {
y = 0;
}
if (y>small.offsetHeight - mask.offsetHeight){
y = small.offsetHeight - mask.offsetHeight;
} mask.style.left = x +"px";
console.log(x)
console.log(small.offsetLeft)
console.log(mask.offsetWidth)
console.log()
console.log()
console.log()
mask.style.top = y +"px"; var bili = bigImg.offsetWidth/small.offsetWidth; var xx = bili*x ;
var yy = bili*y ;
bigImg.style.marginTop = -yy+"px";
bigImg.style.marginLeft = -xx+"px"; } } </script> </head>
<body>
<div class="box">
<div class="small">
<img src="data:images/001.jpg" alt=""/>
<div class="mask"></div>
</div>
<div class="big">
<img src="data:images/0001.jpg" alt=""/>
</div>
</div>
</body>
</html>
放大镜
大图片／大盒子 = 小图片／显示部分
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
} .nav {
height: 30px;
background: #036663;
border-bottom: 1px solid #369;
line-height: 30px;
padding-left: 30px;
} .nav a {
color: #fff;
text-align: center;
font-size: 14px;
text-decoration: none; } .d-box {
width: 400px;
height: 300px;
border: 5px solid #eee;
box-shadow: 2px 2px 2px 2px #666;
position: absolute;
top: 40%;
left: 40%;
} .hd {
width: 100%;
height: 25px;
background-color: #7c9299;
border-bottom: 1px solid #369;
line-height: 25px;
color: white;
cursor: move;
} #box_close {
float: right;
cursor: pointer;
}
</style> <script src="animate.js"></script>
<script>
window.onload = function () {
//需求：在指定位置按住鼠标左键移动对话框。
//分析：鼠标按下，触动事件，移动在更换对话框的位置。
//鼠标按下onmousedown 鼠标弹起:onmouseup 鼠标移动onmousemove
//步骤：
//1.老三步和新五步
//2.把鼠标的坐标赋值给对话框。 var box = document.getElementById("d_box");
var drop = document.getElementById("drop");
//1.老三步和新五步
//先按下，在移动触动此事件
drop.onmousedown = function (event) {
//获取鼠标在盒子中的坐标，将来移动的时候减去保证鼠标在盒子的指定位置
event = event || window.event;
var pagex = event.pageX || scroll().left + event.clientX;
var pagey = event.pageY || scroll().top + event.clientY;
var x = pagex - box.offsetLeft;
var y = pagey - box.offsetTop; document.onmousemove = function (event) {
//2.把鼠标的坐标赋值给对话框。
event = event || window.event;
var xx = event.pageX || scroll().left + event.clientX;
var yy = event.pageY || scroll().top + event.clientY;
//二次操作鼠标位置 减去鼠标在盒子中的坐标
xx = xx - x;
yy = yy - y; //给box赋值
box.style.left = xx+"px";
box.style.top = yy+"px";
//禁止文本选中（选中后取消）
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
}
} //事件解绑
drop.onmouseup = function () {
//解绑
document.onmousemove = null;
} }
</script> </head>
<body>
<!--顶部注册部分，无用-->
<div class="nav">
<a href="javascript:;" id="register">注册信息</a>
</div>
<!--我们移动的对话框-->
<div class="d-box" id="d_box">
<div class="hd" id="drop">
<i>注册信息 (可以拖拽)</i>
<span id="box_close">【关闭】</span>
</div>
<div class="bd"></div>
</div> </body>
</html>
拖拽案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 500px;
border: 1px solid red;
margin: 50px auto;
overflow: hidden;
position: relative;
}
.scroll {
width: 20px;
height: 530px;
background-color: #ccc;
position: absolute;
top: 0;
right: 0;
}
.bar {
width: 20px;
background-color: red;
border-radius: 10px;
cursor: pointer;
position: absolute;
top: 0;
}
.content {
padding: 15px;
}
</style> <script src="animate.js"></script>
<script>
window.onload = function () {
//需求：模拟滚动条，鼠标拖动滚动条，滚动条动，而且内容等比例联动。
//步骤：
//1.根据内容和盒子的比例确定bar的高。
//2.绑定事件（鼠标按下，然后移动）
//3.鼠标移动，bar联动
//4.内容等比例联动 //0.获取相关元素
var box = document.getElementById("box");
var content = box.children[0];
var scroll = box.children[1];
var bar = scroll.children[0]; //1.根据内容和盒子的比例确定bar的高。
//内容的高/盒子的高 = scroll的高/bar的高
//bar的高 = 盒子的高*scroll的高/内容的高
var barHeight = box.offsetHeight*scroll.offsetHeight/content.offsetHeight;
bar.style.height = barHeight + "px";
//2.绑定事件（鼠标按下，然后移动）
bar.onmousedown = function (event) {
event = event || window.event;
var pageyy = event.pageY || scroll().top + event.clientY;
var y = pageyy - bar.offsetTop;
//模拟拖拽案例
document.onmousemove = function (event) {
//新五步获取鼠标在页面的位置。
event = event || window.event;
var pagey = event.pageY || scroll().top + event.clientY;
//鼠标的位置-鼠标在盒子中的位置。
pagey = pagey - y; // 此时pagey 相当于bar.offsetTop //限制y的取值。大于0，小于scroll的高度-bar的高度
if(pagey<0){
pagey = 0;
}
if(pagey>scroll.offsetHeight-bar.offsetHeight){
pagey = scroll.offsetHeight-bar.offsetHeight;
} //3.鼠标移动，bar联动
bar.style.top = pagey + "px"; //4.内容等比例联动
//高级比例： 内容走的距离/bar走的距离 = （内容的高-大盒子的高）/（scroll的高-bar的高）
var s = pagey *(content.offsetHeight-box.offsetHeight)/(scroll.offsetHeight-bar.offsetHeight);
//s赋值给content。通过marginTop负值移动content
content.style.marginTop = -s+"px"; //让被选文字清除。
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
}
} //事件解绑
document.onmouseup = function () {
document.onmousemove = null;
} }
</script> </head>
<body>
<div class="box" id="box">
<div class="content">
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
-------------结束------------<br>
</div>
<div class="scroll">
<div class="bar"></div>
</div>
</div> </body>
</html>
模拟滚动条
JS-特效 ～ 03. 楼层跳跃、事件对象event的获取与使用、event的主要内容、screenX、pageX、clientX的区别、放大镜、模拟滚动条的更多相关文章
- JavaScript 中的window.event代表的是事件的状态,jquery事件对象属性,jquery中如何使用event.target
http://wenda.haosou.com/q/1373868839069215 http://kylines.iteye.com/blog/1660236 http://www.cnblogs. ...
- React对比Vue（03 事件的对比，传递参数对比，事件对象，ref获取DOM节点，表单事件，键盘事件，约束非约束组件等)
import React from 'react'; class Baby extends React.Component { constructor (props) { super(props) t ...
- 从零开始的全栈工程师——js篇2.21（事件对象 arguments 阻止事件默认行为兼容 事件委托 事件源对象）
一.事件对象 1.常用的事件2.每个元素身上的事件都是天生存在的 不需要我们去定义 只需要我们给这个事件绑定一个方法 当事件触发的时候就会执行这个方法 3.事件绑定的写法 ①div.onclick=f ...
- 从零开始的全栈工程师——js篇2.20（事件对象 冒泡与捕获）
一.复习 面向对象 1)单例模式 2)工厂模式 3)构造函数 ①类js天生自带的类 基类object function array number math boolean date regexp st ...
- JavaScript：事件对象Event和冒泡
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 绑定事件的两种方式 我们在上一篇文章中已经讲过事件的概念.这里讲一下注册 ...
- JS事件流、事件监听、事件对象、事件委托
JS事件流: 01.DOM级别和DOM事件 02.JS事件流:页面中接收事件的顺序 事件冒泡阶段-->处于目标阶段-->事件捕获阶段 (事件捕获总发生在事件冒泡前面) 03.捕获:从外向里 ...
- JavaScript学习06 JS事件对象
JavaScript学习06 JS事件对象 事件对象:当事件发生时,浏览器自动建立该对象,并包含该事件的类型.鼠标坐标等. 事件对象的属性:格式:event.属性. 一些说明: event代表事件的状 ...
- JS键盘事件对象之keyCode、charCode、which属性对比
先说一些有关键盘事件的事项:用js实现键盘记录,要关注浏览器的三种按键事件类型,即keydown,keypress和keyup,它们分别对应onkeydown. onkeypress和onkeyup这 ...
- js中获取事件对象的方法小结
原文地址:http://jingyan.baidu.com/article/d8072ac4594d6cec95cefdac.html 事件对象 的获取很简单,很久前我们就知道IE中事件对象是作为全局 ...
随机推荐
- centos7安装mongodb详解
记录一下linux下安装mongodb数据库过程. 安装mongodb #下载linux版本的tar文件# 例如笔者下载的是:mongodb-linux-x86_64-rhel70-3.4.4.tg ...
- Java统计代码行数
package test; import java.io.BufferedReader; import java.io.File; import java.io.FileInputStream; im ...
- Java | Map排序，工具类改进
package util; import java.util.ArrayList; import java.util.Collections; import java.util.Comparator; ...
- Usaco Training [1.3] wormhole
传送门 解题要素:代码能力 解题步骤:理解题意 - >搜索枚举所有可能的配对情况 - >判断冲突并求解 - >调试 一. 理解题意 这里讲几个不容易理解的点: 1. +x方向 即向右 ...
- java并发编程（二十五）----(JUC集合)LinkedBlockingDeque和ConcurrentLinkedDeque介绍
Queue除了前面介绍的实现外,还有一种双向的Queue实现Deque.这种队列允许在队列头和尾部进行入队出队操作,因此在功能上比Queue显然要更复杂. LinkedBlockingDeque 我们 ...
- nodeJs跨域设置(express,koa2,eggJs)
原生跨域 var http=require('http'); var server = http.createServer(function (req,res) { res.setHeader('Ac ...
- ggplot2 |legend参数设置，图形精雕细琢
本文首发于微信公众号“生信补给站”,https://mp.weixin.qq.com/s/A5nqo6qnlt_5kF3_GIrjIA 学习了ggplot2|详解八大基本绘图要素后,就可以根据自己的需 ...
- 从零开始搭建前后端分离的NetCore2.2（EF Core CodeFirst+Autofac）+Vue的项目框架之四Nlog记录日志至数据库
为什么要进行日志记录呢?为什么要存至数据库呢?只能说日志记录是每个系统都应当有的. 好的日志记录方式可以提供我们足够多定位问题的依据.查找系统或软件或项目的错误或异常记录.程序在运行时就像一个机器人, ...
- MyBatis源码下载安装教程
一.下载(原文链接:http://www.studyshare.cn/software/details/1177/1 github下载:去下载 百度网盘下载:去下载 提取码:d1er 二.安装 1.检 ...
- windows系统查询指定端口运行的进程并关闭
假如占用的端口是80: 先打开cmd命令窗口 再查找80端口占用的进程:netstat -aon|findstr "80" ,找到对应的程序的PID号: 根据PID号找到 ...