JavaScript基础视频教程总结（121-130章）
程序员文章站
2022-05-17 15:42:17
所有基础课程链接： 1.JavaScript基础视频教程总结（001-010章） 2.JavaScript基础视频教程总结（011-020章） 3. JavaScript基础视频教程总结（021-030章） 4. JavaScript基础视频教程总结（031-040章） 5. JavaScript基 ......
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>121-130章总结</title>
</head>
<body>
<pre>
121. 滚轮事件
onmousewheel鼠标滚轮滚动的事件，会在滚轮滚动时触发，
但是火狐不支持该属性
在火狐中需要使用 dommousescroll 来绑定滚动事件
注意该事件需要通过addeventlistener()函数来绑定
</pre>
<style type="text/css">
#glbox{
width: 100px;
height: 100px;
background-color: red;
}
</style>
<div id="glbox"></div>
<script type="text/javascript">
console.log("第121");
var glbox = document.getelementbyid("glbox")
glbox.onmousewheel = function(event){
event = event||window.event
//event.wheeldelta 可以获取鼠标滚轮滚动的方向
//向上滚 120 向下滚 -120
//wheeldelta这个值我们不看大小，只看正负
//alert( event.wheeldelta )
//wheeldelta这个属性火狐中不支持
//在火狐中使用event.detail来获取滚动的方向
//向上滚 -3 向下滚 3
//alert(event.detail);
if ( event.wheeldelta > 0 || event.detail < 0) {
if( this.clientheight >10){
this.style.height = this.clientheight -10 + "px"
}
} else{
this.style.height = this.clientheight + 10 + "px"
}
/*
* 使用 addeventlistener()方法绑定响应函数，取消默认行为时不能使用return false
* 需要使用event来取消默认行为event.preventdefault();
* 但是ie8不支持event.preventdefault();这个玩意，如果直接调用会报错
*/
event.preventdefault && event.preventdefault();
/*
* 当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动，
* 这是浏览器的默认行为，如果不希望发生，则可以取消默认行为
*/
return false;
}
//为火狐绑定滚轮事件
bind(glbox,"dommousescroll",glbox.onmousewheel);
function bind(obj , eventstr , callback){
if(obj.addeventlistener){
obj.addeventlistener(eventstr , callback , false);
}else{
obj.attachevent("on"+eventstr , function(){
callback.call(obj);
});
}
}
</script>
<pre>
122. 键盘事件
onkeydown
- 按键被按下
- 对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发
- 当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快
这种设计是为了防止误操作的发生。
onkeyup
- 按键被松开
键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document。
可以通过keycode来获取按键的编码
通过它可以判断哪个按键被按下
除了 keycode，事件对象中还提供了几个属性
altkey，ctrlkey，shiftkey
- 这个三个用来判断alt ctrl 和 shift是否被按下，如果按下则返回true，否则返回false
</pre>
<div class="">
<input type="" placeholder="不能输入数字" />
</div>
<script type="text/javascript">
console.log("第122");
document.onkeydown = function(event){
event = event || window.event
var result = event.keycode
console.log("当前按下的按键值为：" + result)
if ( event.ctrlkey ){
console.log("当前的按下的按键为：ctrl")
}
//判断y和ctrl是否同时被按下
if( event.keycode === 89 && event.ctrlkey ){
console.log("ctrl和y都被按下了");
}
}
document.onkeyup = function(){
console.log("按键松开了");
}
var input1 = document.getelementsbytagname("input")
input1[0].onkeydown = function(event){
event = event || window.event
// 使文本框中不能输入数字 48-57
if( event.keycode>=48 && event.keycode <= 57 ){
//在文本框中输入内容，属于onkeydown的默认行为
return false
}
}
</script>
<pre>
123. 键盘移动div
</pre>
<style type="text/css">
#mvbox {height: 200px;position: relative;}
#movebox {width: 100px;height: 100px;background-color: #99ff99;position: absolute;}
</style>
<div id="mvbox">
<div id="movebox"></div>
</div>
<script type="text/javascript">
console.log("第123");
//使div可以根据不同的方向键向不同的方向移动
var mvbox = document.getelementbyid("mvbox")
var movebox = document.getelementbyid("movebox")
// 左，上，右，下 37 38 39 40
mvbox.onkeydown = function(event){
event = event || window.event
var speed = 10
if(event.ctrlkey){
speed = 50
}
switch(event.keycode){
case 37:
movebox.style.left = movebox.offsetleft - speed +"px"
break
case 38:
movebox.style.top = movebox.offsettop - speed +"px"
break
case 39:
movebox.style.left = movebox.offsetleft + speed +"px"
break
case 40:
movebox.style.top = movebox.offsettop + speed +"px"
break
}
}
</script>
<pre>
124. bom
- bom可以使我们通过js来操作浏览器
- 在bom中为我们提供了一组对象，用来完成对浏览器的操作
- bom对象
window
- 代表的是整个浏览器的窗口，同时window也是网页中的全局对象
navigator
- 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
location
- 代表当前浏览器的地址栏信息，通过location可以获取地址栏信息，或者操作浏览器跳转页面
history
- 代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录
由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页
而且该操作只在当次访问时有效
screen
- 代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息
这些bom对象在浏览器中都是作为window对象的属性保存的，
可以通过window对象来使用，也可以直接使用。
navigator
- 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
- 由于历史原因，navigator对象中的大部分属性都已经不能帮助我们识别浏览器了
- 一般我们只会使用useragent来判断浏览器的信息，
useragent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容，不同的浏览器会有不同的 useragent
</pre>
<script type="text/javascript">
console.log("第124");
console.log( window )
console.log( navigator )
console.log( location )
console.log( history )
console.log( screen )
var ua = navigator.useragent
console.log( ua )
/*
* 火狐的useragent
* mozilla/5.0 (windows nt 6.1; wow64; rv:50.0) gecko/20100101 firefox/50.0
*
* chrome的useragent
* mozilla/5.0 (windows nt 6.1; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/52.0.2743.82 safari/537.36
*
* ie8
* mozilla/4.0 (compatible; msie 8.0; windows nt 6.1; wow64; trident/7.0; slcc2; .net clr 2.0.50727; .net clr 3.5.30729; .net clr 3.0.30729; media center pc 6.0; .net4.0c; .net4.0e)
*
* ie9
* mozilla/5.0 (compatible; msie 9.0; windows nt 6.1; wow64; trident/7.0; slcc2; .net clr 2.0.50727; .net clr 3.5.30729; .net clr 3.0.30729; media center pc 6.0; .net4.0c; .net4.0e)
*
* ie10
* mozilla/5.0 (compatible; msie 10.0; windows nt 6.1; wow64; trident/7.0; slcc2; .net clr 2.0.50727; .net clr 3.5.30729; .net clr 3.0.30729; media center pc 6.0; .net4.0c; .net4.0e)
*
* ie11
* mozilla/5.0 (windows nt 6.1; wow64; trident/7.0; slcc2; .net clr 2.0.50727; .net clr 3.5.30729; .net clr 3.0.30729; media center pc 6.0; .net4.0c; .net4.0e; rv:11.0) like gecko
* - 在ie11中已经将微软和ie相关的标识都已经去除了，所以我们基本已经不能通过useragent来识别一个浏览器是否是ie了
*/
// alert(navigator.appname);
if(/firefox/i.test(ua)){
console.log("你是火狐！！！");
}else if(/chrome/i.test(ua)){
console.log("你是chrome");
}else if(/msie/i.test(ua)){
console.log("你是ie浏览器~~~");
}else if("activexobject" in window){
console.log("你是ie11，藏的好深啊~~~");
}
/*
* 如果通过useragent不能判断，还可以通过一些浏览器中特有的对象，来判断浏览器的信息
* 比如：activexobject
*/
if("activexobject" in window){
console.log("你是ie，我已经抓住你了~~~");
}else{
console.log("你不是ie~~~");
}
</script>
<pre>
125. history
- 对象可以用来操作浏览器向前或向后翻页
</pre>
<div class="">
<h1>history</h1>
<button id="htbtn">点我一下</button>
<a href="111-120章总结.html" target="_blank">去111-120章总结</a>
</div>
<script type="text/javascript">
console.log("第125");
var htbtn =document.getelementbyid("htbtn")
htbtn.onclick = function(){
// length - 属性，可以获取到当成访问的链接数量
var hl = history.length
console.log(hl)
// back() - 可以用来回退到上一个页面，作用和浏览器的回退按钮一样
//history.back()
// forward() - 可以跳转下一个页面，作用和浏览器的前进按钮一样
//history.forward()
/*
* go()
* - 可以用来跳转到指定的页面
* - 它需要一个整数作为参数
* 1:表示向前跳转一个页面 相当于forward()
* 2:表示向前跳转两个页面
* -1:表示向后跳转一个页面
* -2:表示向后跳转两个页面
*/
history.go(-1)
}
</script>
<pre>
126. location
该对象中封装了浏览器的地址栏的信息
</pre>
<div class="">
<button id="ltbtn">点我一下</button>
</div>
<script type="text/javascript">
console.log("第126");
var ltbtn =document.getelementbyid("ltbtn")
ltbtn.onclick = function(){
// 如果直接打印location，则可以获取到地址栏的信息（当前页面的完整路径）
console.log(location)
// 如果直接将location属性修改为一个完整的路径，或相对路径,则我们页面会自动跳转到该路径，并且会生成相应的历史记录
// location = "http://www.baidu.com"
// assign()- 用来跳转到其他的页面，作用和直接修改location一样
// location.assign("http://www.baidu.com")
// reload() - 用于重新加载当前页面，作用和刷新按钮一样,如果在方法中传递一个true，作为参数，则会强制清空缓存刷新页面
location.reload(true);
// replace() - 可以使用一个新的页面替换当前页面，调用完毕也会跳转页面,不会生成历史记录，不能使用回退按钮回退
// location.replace("http://www.baidu.com")
}
</script>
<pre>
127. 定时器简介
js的程序的执行速度是非常非常快的,如果希望一段程序，可以每间隔一段时间执行一次，可以使用定时调用.
setinterval()
- 定时调用
- 可以将一个函数，每隔一段时间执行一次
- 参数：
1.回调函数，该函数会每隔一段时间被调用一次
2.每次调用间隔的时间，单位是毫秒
- 返回值：
返回一个number类型的数据
这个数字用来作为定时器的唯一标识.
clearinterval()可以用来关闭一个定时器
方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器
</pre>
<div id="count"></div>
<script type="text/javascript">
console.log("第127");
var count =document.getelementbyid("count")
var num = 1
var timer = setinterval(function(){
count.innerhtml = num++
if( num==11 ){
clearinterval(timer)
}
},1000)
</script>
<pre>
128. 切换图片练习
</pre>
<div class="">
<img id="img" src="images/1.jpg"/>
<p>
<button id="start" href="javascript:;">开始</button>
<button id="stop" href="javascript:;">停止</button>
</p>
</div>
<script type="text/javascript">
console.log("第128");
var img =document.getelementbyid("img")
var start =document.getelementbyid("start")
var stop =document.getelementbyid("stop")
var imgarr = ["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg"]
var index = 0
var timer2
start.onclick = function(){
/*
* 目前，我们每点击一次按钮，就会开启一个定时器，
* 点击多次就会开启多个定时器，这就导致图片的切换速度过快，
* 并且我们只能关闭最后一次开启的定时器
*/
//在开启定时器之前，需要将当前元素上的其他定时器关闭
clearinterval(timer2)
timer2 = setinterval(function(){
index++
index %= imgarr.length
img.src = imgarr[index]
},1000)
}
stop.onclick = function(){
clearinterval(timer2)
}
</script>
<pre>
129. 修改div移动练习
</pre>
<div id="editbox" style="height: 300px;position: relative;">
<div id="editmove" style="position: absolute;height: 100px;width: 100px;background-color: #f00;"></div>
</div>
<script type="text/javascript">
console.log("第129");
var dir = 0
var speed = 10
var timer3
var editbox = document.getelementbyid("editbox")
var editmove = document.getelementbyid("editmove")
timer3 = setinterval(function(){
switch(dir){
case 37:
//alert("向左"); left值减小
editmove.style.left = editmove.offsetleft - speed + "px";
break;
case 39:
//alert("向右");
editmove.style.left = editmove.offsetleft + speed + "px";
break;
case 38:
//alert("向上");
editmove.style.top = editmove.offsettop - speed + "px";
break;
case 40:
//alert("向下");
editmove.style.top = editmove.offsettop + speed + "px";
break;
}
},30)
editbox.onkeydown = function(event){
event = event || window.event
dir = event.keycode
}
editbox.onkeyup = function(){
dir=0
}
</script>
<pre>
130. 延时调用
延时调用一个函数不马上执行，而是隔一段时间以后在执行，而且只会执行一次.
延时调用和定时调用的区别，定时调用会执行多次，而延时调用只会执行一次.
延时调用和定时调用实际上是可以互相代替的，在开发中可以根据自己需要去选择.
使用cleartimeout()来关闭一个延时调用
</pre>
<script type="text/javascript">
console.log("第130");
var ynum = 1
var timer4 = settimeout(function(){
console.log(ynum++)
},1000)
cleartimeout(timer4)
</script>
</body>
</html>
所有基础课程链接：
1.javascript基础视频教程总结（001-010章） 2.javascript基础视频教程总结（011-020章） 3. javascript基础视频教程总结（021-030章） 4. javascript基础视频教程总结（031-040章）
5. javascript基础视频教程总结（041-050章） 6. javascript基础视频教程总结（051-060章） 7. javascript基础视频教程总结（061-070章） 8. javascript基础视频教程总结（071-080章）
9. javascript基础视频教程总结（081-090章） 10. javascript基础视频教程总结（091-100章） 11. javascript基础视频教程总结（101-110章） 12. javascript基础视频教程总结（111-120章）
13. javascript基础视频教程总结（121-130章） 14. javascript基础视频教程总结（131-140章）
另外，欢迎关注我的
上一篇： 用ASP开发一个在线考试程序（七）
下一篇： go语言打造个人博客系统(一)