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 构建现代化、跨平台桌面应用程序的核心能力。

6

2026.01.14

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

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

13

2026.01.13

PHP 高性能
PHP 高性能

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

31

2026.01.13

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

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

18

2026.01.13

PHP 文件上传
PHP 文件上传

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

10

2026.01.13

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

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

6

2026.01.13

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

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

3

2026.01.13

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

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

44

2026.01.13

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

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

5

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号