0

0

JS中BOM操作知识点

angryTom

angryTom

发布时间:2019-12-31 17:11:53

|

2463人浏览过

|

来源于博客园

转载

JS中BOM操作知识点

js中bom操作知识点

window对象

全局变量和全局方法都归在window上

alert-comfirm-prompt

让alert 、confirm等弹出框上的提示文字实现换行:\n

// confirm()
// 点击确定返回true,取消返回false
var btn=document.getElementById("btn");
btn.onclick=function(){           // 弹出确认对话框
   var result=window.confirm("您确定要删除吗?删除之后该信息\n将不可恢复!");           if(result){
           document.getElementById("box").style.display="none";
   }
}       // prompt("text","defaultText")
// text:对话框中显示的纯文本
// defaultText:默认的输入文本
// 点击确认返回文本,点击取消返回null
var message=prompt("请输入您的星座","天蝎座");
console.log(message);

open-close

如果open方法中的url参数为空的话,那么新窗口也会被打开只是不会显示任何文档

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()

//调用函数
var fnCall=function(){
     alert("world");
}
setTimeout(fnCall,5000);       //调用匿名函数
var timeout1=setTimeout(function(){
  alert("hello");
},2000)

clearTimeout(timeout1);

实现以下要求:

(1)   点击“删除”按钮3秒后,页面上p里面的文字消失

(2)   点击“删除”按钮之后的3秒内,如果点击“取消删除”按钮,那么页面上p里面的文字就不会被删除




    
    定时器
    


     
     
    

点击"删除"按钮后,里面的内容将在3秒钟后消失;

如点击了"删除"后又不想删除内容,请在点击"删除"按钮3秒之内点击"取消删除"按钮即可

 验证码倒计时案例:

迅易年度企业管理系统开源完整版
迅易年度企业管理系统开源完整版

系统功能强大、操作便捷并具有高度延续开发的内容与知识管理系统,并可集合系统强大的新闻、产品、下载、人才、留言、搜索引擎优化、等功能模块,为企业部门提供一个简单、易用、开放、可扩展的企业信息门户平台或电子商务运行平台。开发人员为脆弱页面专门设计了防刷新系统,自动阻止恶意访问和攻击;安全检查应用于每一处代码中,每个提交到系统查询语句中的变量都经过过滤,可自动屏蔽恶意攻击代码,从而全面防止SQL注入攻击

下载



    
    Document
    



会闪烁的文字:



    
        
        闪烁的文字
        
    

    

会闪烁的文字

location.href返回当前页面的完整URL

location.hash 返回#后面的

       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);       // 返回URL中的目录和文件名       
       console.log(location.pathname);       // 返回URL中的查询字符串,以?开头
       console.log(location.search);

改变浏览器的位置

        setTimeout(function(){           // 会在历史记录中生成新纪录
            location.href='index6.html';
            window.location='index6.html';   // 不会在历史记录中生成新纪录
            location.replace("index6.html");
        },1000)
         document.getElementById("reload").onclick=function(){   // 有可能从缓存中加载            location.reload();            // 从服务器重新加载
             location.reload(true);
         }

history保存用户访问页面的历史记录

forward 回到历史记录的下一步

var btn = document.getElementById("btn");    
var btn2 = document.getElementById("btn2");    
var btn3 = document.getElementById("btn3");    
// 点击btn按钮时回到历史记录的上一步,后退
btn.onclick = function() {        // 方法一        
        history.back();        // 方法二
    history.go(-1);
}    
// 点击btn2按钮时回到历史记录的下一步,前进
btn2.onclick = function() {  // 方法一        
history.forward();        // 方法二
    history.go(1);
}
btn3.onclick = function() {        // 前进n步        
    history.go(n);        // 后退n步
    history.go(-n);
}

screen对象

// 获取屏幕可用宽高
console.log("页面宽:"+screen.availWidth);
console.log("页面高:"+screen.availHeight);        // 获取窗口文档显示区的宽高
console.log("pageWidth:"+window.innerWidth);
console.log("pageHeight:"+window.innerHeight);

navigator对象

//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-1){
         flag = false;                 break;
      }
   }           return flag;
}       var isPcs = isPc();
console.log(isPcs);

本文来自 js教程 栏目,欢迎学习!  

相关专题

更多
Java 桌面应用开发(JavaFX 实战)
Java 桌面应用开发(JavaFX 实战)

本专题系统讲解 Java 在桌面应用开发领域的实战应用,重点围绕 JavaFX 框架,涵盖界面布局、控件使用、事件处理、FXML、样式美化(CSS)、多线程与UI响应优化,以及桌面应用的打包与发布。通过完整示例项目,帮助学习者掌握 使用 Java 构建现代化、跨平台桌面应用程序的核心能力。

37

2026.01.14

php与html混编教程大全
php与html混编教程大全

本专题整合了php和html混编相关教程,阅读专题下面的文章了解更多详细内容。

19

2026.01.13

PHP 高性能
PHP 高性能

本专题整合了PHP高性能相关教程大全,阅读专题下面的文章了解更多详细内容。

37

2026.01.13

MySQL数据库报错常见问题及解决方法大全
MySQL数据库报错常见问题及解决方法大全

本专题整合了MySQL数据库报错常见问题及解决方法,阅读专题下面的文章了解更多详细内容。

19

2026.01.13

PHP 文件上传
PHP 文件上传

本专题整合了PHP实现文件上传相关教程,阅读专题下面的文章了解更多详细内容。

16

2026.01.13

PHP缓存策略教程大全
PHP缓存策略教程大全

本专题整合了PHP缓存相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.13

jQuery 正则表达式相关教程
jQuery 正则表达式相关教程

本专题整合了jQuery正则表达式相关教程大全,阅读专题下面的文章了解更多详细内容。

3

2026.01.13

交互式图表和动态图表教程汇总
交互式图表和动态图表教程汇总

本专题整合了交互式图表和动态图表的相关内容,阅读专题下面的文章了解更多详细内容。

45

2026.01.13

nginx配置文件详细教程
nginx配置文件详细教程

本专题整合了nginx配置文件相关教程详细汇总,阅读专题下面的文章了解更多详细内容。

8

2026.01.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WEB前端教程【HTML5+CSS3+JS】
WEB前端教程【HTML5+CSS3+JS】

共101课时 | 8.3万人学习

JS进阶与BootStrap学习
JS进阶与BootStrap学习

共39课时 | 3.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号