JavaScript操作BOM简单案例

简介: JavaScript操作BOM简单案例

需要两个页面index.html和Test.html,可以直接运行,每个功能都已经注释完整,index.html页面的代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <script type="text/javascript">
      //1.confirm方法
//      var flag = window.confirm("确定要删除吗?");
//      if(flag){
//        alert("你点的是确定");
//      }else{
//        alert("你点的是取消");
//      }
      
      
      //2.open的方法
      //window.open("Test.html");
      function openChuang(){
        window.open("Test.html","","width=500,heigth=5500,location=0");
      }
      
      //3.关闭窗口
      function closeChuang(){
        window.close();
      }
      //4.history对象
      function qianjin(){
        //去下一个页面
        //history.forward();
        history.go(1);
      }
      
      //5.location对象
      function loc(){
        //显示主机名和端口号
        document.write(location.host);
        document.write("<br/>");
        //显示主机名
        document.write(location.hostname);
        document.write("<br/>");
        //显示全部链接
        document.write(location.href);
        
      }
      
      //重新加载页面
      function rel(){
        location.reload();
      }
      
      //操作document的方法
      function Doc(){
        //给id是first的文本框里面赋值
        document.getElementById("first").value="名称";
        //给name为txt的文本框里面赋值
        var  count = document.getElementsByName("txt");
        for(var i =0;i<count.length;i++) {
          count[i].value = "值"+i;
        }
        
        //给所有标签是input的value赋值getElementsByTagName
        //先获取标签名是input的元素
        var inp = document.getElementsByTagName("input");
        for(var i = 0;i<inp.length;i++){
          inp[i].value = "新值"+(i+1);
        }
      }
      
      function getDateInfo(){
        //获取当前日期
        var date  = new Date();
        var nian = date.getFullYear();  //年
        var yue = date.getMonth()+1;  //月
        var day = date.getDate();   //日
        var shi = date.getHours();    //时
        var fen = date.getMinutes();  //分
        var miao = date.getSeconds(); //秒
        //将时间放在id为riqi的div里
        document.getElementById("riqi").innerHTML = nian+"-"+yue+"-"+day+"&nbsp;"+shi+":"+fen+":"+miao;
      }
      
      //随机数
      function getRandom(){
        var ran = Math.floor(Math.random()*100+1);
        alert(ran);
      }
      
      //5秒之后弹出来一个框
      function Time(){
        var t1 = setTimeout("alert('弹出信息')",5000);
      }
      
      //每隔5秒提示信息
      function Times(){
        var t2 = setInterval("alert('弹出信息')",5000);
      }
      
    </script>
    <h1>这是index页面</h1>
    <input type="button" value="弹出一个固定大小的窗体" onclick="openChuang()" />
    <br />
    <input type="button" value="关闭窗体" onclick="closeChuang()" /><br />
    <input type="button" value="去Test页面" onclick="qianjin()" /><br />
    <a href="Test.html">测试的页面</a>
    <br />
    
    location对象:
    <input type="button" value="location对象" onclick="loc()" />
    <br />
    <input type="button" value="刷新页面" onclick="rel()" />
    <br />
    <h2><a href="Test.html">马上去领奖吧!</a></h2>
    <br />
    下面是在介绍document的方法:
    1.<input type="text" name="name" value="" id="first" /><br />
    2.<input type="text" name="txt"  /><br />
    3.<input type="text" name="txt" /><br />
    4.<input type="text" name="txt" /><br />
    <button onclick="Doc()">操作document方法</button>
    <br />
    下面介绍内置对象中的日期函数:
    <br />
    <div id="riqi"></div>
    <button onclick="getDateInfo()">获取当前日期信息</button>
    <br />
    <button onclick="getRandom()">获取1-100之间的随机数</button>
    <br />
    <button onclick="Time()">5秒之后弹出来一个框</button>
    <br />
    <button onclick="Times()">每隔5秒弹出来一个框</button>
  </body>
</html>

下面是Test页面的代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
      //返回上一个页面
      function backTop(){
        //history.back();
        history.go(-1);
      }
      //判断是否通过超链接进来的
      document.write("<h1>领奖页面</h1>");
      if(document.referrer==""){
        //不是通过超链接进来的
        alert("你不是从抽奖页面过来的,不能抽奖,点击确定5秒之后会自动关闭本窗口");
        setTimeout("location.href='index.html'",5000);
      }
      
    </script>
  </head> 
  <body>
    <h1>这是测试的页面</h1>
    <input type="button" value="返回上一个页面" onclick="backTop()" />
    
  </body>
</html>


相关文章
|
6月前
|
编解码 JavaScript 前端开发
【Java进阶】详解JavaScript的BOM(浏览器对象模型)
总的来说,BOM提供了一种方式来与浏览器进行交互。通过BOM,你可以操作窗口、获取URL、操作历史、访问HTML文档、获取浏览器信息和屏幕信息等。虽然BOM并没有正式的标准,但大多数现代浏览器都实现了相似的功能,因此,你可以放心地在你的JavaScript代码中使用BOM。
165 23
|
数据采集 Web App开发 JavaScript
利用Selenium和XPath抓取JavaScript动态加载内容的实践案例
利用Selenium和XPath抓取JavaScript动态加载内容的实践案例
|
7月前
|
JavaScript 前端开发 Java
深入理解 JavaScript 中的 Array.find() 方法:原理、性能优势与实用案例详解
Array.find() 是 JavaScript 数组方法中一个非常实用和强大的工具。它不仅提供了简洁的查找操作,还具有性能上的独特优势:返回的引用能够直接影响原数组的数据内容,使得数据更新更加高效。通过各种场景的展示,我们可以看到 Array.find() 在更新、条件查找和嵌套结构查找等场景中的广泛应用。 在实际开发中,掌握 Array.find() 的特性和使用技巧,可以让代码更加简洁高效,特别是在需要直接修改原数据内容的情形。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
7月前
|
监控 JavaScript 前端开发
MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver:原理与实战案例
MutationObserver 是一个非常强大的 API,提供了一种高效、灵活的方式来监听和响应 DOM 变化。它解决了传统 DOM 事件监听器的诸多局限性,通过异步、批量的方式处理 DOM 变化,大大提高了性能和效率。在实际开发中,合理使用 MutationObserver 可以帮助我们更好地控制 DOM 操作,提高代码的健壮性和可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver:原理与实战案例
|
8月前
|
JavaScript 前端开发 索引
40个JS常用使用技巧案例
大家好,我是V哥。在日常开发中,JS是解决页面交互的利器。V哥总结了40个实用的JS小技巧,涵盖数组操作、对象处理、函数使用等,并附带案例代码和解释。从数组去重到异步函数,这些技巧能显著提升开发效率。先赞再看后评论,腰缠万贯财进门。关注威哥爱编程,全栈开发就你行!
216 16
|
11月前
|
缓存 JavaScript UED
js中BOM中的方法
【10月更文挑战第31天】
|
XML 移动开发 JavaScript
js中BOM和DOM总结(基础篇)
文章总结了JavaScript的BOM和DOM知识点,包括window、screen、location、history、navigator对象,以及消息框、计时器和cookie。同时,介绍了DOM的概念、节点获取和修改方法,以及事件处理。
js中BOM和DOM总结(基础篇)
|
12月前
|
JavaScript 前端开发 Java
【前端基础篇】JavaScript之BOM介绍
【前端基础篇】JavaScript之BOM介绍
160 1
|
JavaScript 前端开发 UED
Javaweb之javascript的小案例的详细解析
通过上述步骤,我们得到了一个动态更新的实时时钟,这个简单的JavaScript案例展示了定时器的使用方法,并讲解了如何处理日期和时间。这个案例说明了JavaScript在网页中添加动态内容与交互的能力。对于涉足JavaWeb开发的学习者来说,理解和运用这些基础知识非常重要。
100 11
|
JavaScript 前端开发 API
Javaweb之javascript的BOM对象的详细解析
BOM为Web开发提供了强大的API,允许开发者与浏览器进行深入的交互。合理使用BOM中的对象和方法,可以极大地增强Web应用的功能性和用户体验。需要注意的是,BOM的某些特征可能会在不同浏览器中表现不一致,因此在开发过程中需要进行仔细的测试和兼容性处理。通过掌握BOM,开发者能够制作出更丰富、更动态、更交互性的JavaWeb应用。
105 1

热门文章

最新文章