JS中BOM操作知识点
window对象
全局变量和全局方法都归在window上
alert-comfirm-prompt
让alert 、confirm等弹出框上的提示文字实现换行:\n
1 2 3 4 5 6 7 8 9 10 11 12 13 | var btn=document.getElementById( "btn" );
btn.onclick= function (){
var result=window.confirm( "您确定要删除吗?删除之后该信息\n将不可恢复!" ); if (result){
document.getElementById( "box" ).style.display= "none" ;
}
}
var message=prompt( "请输入您的星座" , "天蝎座" );
console.log(message);
|
登录后复制
open-close
如果open方法中的url参数为空的话,那么新窗口也会被打开只是不会显示任何文档
1 2 3 4 5 6 7 8 9 10 11 12 | window.onload = function (){
newwindow.html
window.open( "newwindow.html" , "newwindow" , "width=400,height=200,
left=0,top=0,toolbar=no,menubar=no,scrollbars=no,location=
no,status=no" );
var quit = document.getElementById( "quit" );
quit.onclick = function (){
window.close( "newwindow.html" );
}
}
|
登录后复制
延迟调用setTimeout()
1 2 3 4 5 6 7 8 9 10 | var fnCall= function (){
alert( "world" );
}
setTimeout(fnCall,5000);
var timeout1=setTimeout( function (){
alert( "hello" );
},2000)
clearTimeout(timeout1);
|
登录后复制
实现以下要求:
(1) 点击“删除”按钮3秒后,页面上p里面的文字消失
(2) 点击“删除”按钮之后的3秒内,如果点击“取消删除”按钮,那么页面上p里面的文字就不会被删除
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE html>
<html>
<head lang= "en" >
<meta charset= "UTF-8" >
<title>定时器</title>
<style type= "text/css" >
p{width:400px;height:120px;margin-top:50px;border:2px solid gray;padding:10px;}
</style>
</head>
<body>
<input type= "button" value= "删除" >
<input type= "button" value= "取消删除" >
<p>点击 "删除" 按钮后,里面的内容将在3秒钟后消失;
<br/><br/>如点击了 "删除" 后又不想删除内容,请在点击 "删除" 按钮3秒之内点击 "取消删除" 按钮即可</p>
<script type= "text/javascript" >
var btn1=document.getElementsByTagName(& #39;input')[0];
var btn2=document.getElementsByTagName(& #39;input')[1];
var p=document.getElementsByTagName(& #39;p')[0];
var timer;
btn1.onclick= function (){
timer=setTimeout( function (){
p.innerHTML=& #39;';
},3000);
}
btn2.onclick= function (){
clearTimeout(timer);
} </script>
</body>
</html>
|
登录后复制
验证码倒计时案例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "UTF-8" >
<title>Document</title>
<script>
window.onload= function (){
var btn=document.getElementById( "btn" );
var times=10;
var timer= null ;
btn.onclick= function (){
if ( this .getAttribute( "clicked" )){ return false ;}
var _this= this ;
timer=setInterval( function (){
times--;
if (times<=0){
clearInterval(timer);
_this.value= "发送验证码" ;
_this.removeAttribute( "clicked" , false );
times=10;
} else {
_this.value=times+& #39;秒后重试'; //_this.disabled=true;
_this.setAttribute( "clicked" , true );
}
},1000)
}
} </script>
</head>
<body>
<p class= "box" >
<input type= "button" value= "发送验证码" id= "btn" >
</p>
</body>
</html>
|
登录后复制
会闪烁的文字:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <!DOCTYPE html>
<html>
<head lang= "en" >
<meta charset= "UTF-8" >
<title>闪烁的文字</title>
<style type= "text/css" >
p{
width:200px;
height:200px;
line-height:200px;
border:2px solid gray;
text-align:center;
color:red;
} </style>
</head>
<body>
<h3>会闪烁的文字</h3>
<p id= "text" > </p>
<script type= "text/javascript" >
var text=document.getElementById(& #39;text');
var flag=0;
setInterval( function (){
if (flag==0){
flag=1;
text.innerHTML=& #39;☆☆☆今日特卖☆☆☆';
} else if (flag==1){
flag=0;
text.innerHTML=& #39;★★★今日特卖★★★';
}
},500); </script>
</body>
</html>
|
登录后复制
location.href返回当前页面的完整URL
location.hash 返回#后面的
1 2 3 4 5 6 7 8 9 10 11 12 | console.log(location.href);
console.log(location.hash);
var btn=document.getElementById( "btn" );
btn.onclick= function (){
location.hash= "#top" ;
}
console.log(location.host);
console.log(location.hostname);
console.log(location.pathname);
console.log(location.search);
|
登录后复制
改变浏览器的位置
1 2 3 4 5 6 7 8 | setTimeout( function (){
location.href=& #39;index6.html';
window.location=& #39;index6.html'; // 不会在历史记录中生成新纪录
location.replace( "index6.html" );
},1000)
document.getElementById( "reload" ).onclick= function (){
location.reload( true );
}
|
登录后复制
history保存用户访问页面的历史记录
forward 回到历史记录的下一步
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | var btn = document.getElementById( "btn" );
var btn2 = document.getElementById( "btn2" );
var btn3 = document.getElementById( "btn3" );
btn.onclick = function () {
history.back();
history.go(-1);
}
btn2.onclick = function () {
history.forward();
history.go(1);
}
btn3.onclick = function () {
history.go(n);
history.go(-n);
}
|
登录后复制
screen对象
1 2 3 4 5 | console.log( "页面宽:" +screen.availWidth);
console.log( "页面高:" +screen.availHeight);
console.log( "pageWidth:" +window.innerWidth);
console.log( "pageHeight:" +window.innerHeight);
|
登录后复制
navigator对象
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | //console.log(navigator.userAgent);
// 判断浏览器
function getBrowser(){ var explorer = navigator.userAgent,browser; if(explorer.indexOf("MSIE")>-1){
browser = "IE";
}else if(explorer.indexOf("Chrome")>-1){
browser = "Chrome";
}else if(explorer.indexOf("Opera")>-1){
browser = "Opera";
}else if(explorer.indexOf("Safari")>-1){
browser = "Safari";
} return browser;
} var browser = getBrowser();
console.log("您当前使用的浏览器是:"+browser); // 判断终端
function isPc(){ var userAgentInfo = navigator.userAgent,
Agents = ["Andriod","iPhone","symbianOS","windows phone","iPad","iPod"],
flag = true,i;
console.log(userAgentInfo); for(i=0;i< Agents.length ;i++){ if(userAgentInfo.indexOf(Agents[i])>-1){
flag = false; break;
}
} return flag;
} var isPcs = isPc();
console.log(isPcs);
|
登录后复制
本文来自 js教程 栏目,欢迎学习!
以上是JS中BOM操作知识点的详细内容。更多信息请关注PHP中文网其他相关文章!