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>


相关文章
|
3月前
|
数据采集 Web App开发 JavaScript
利用Selenium和XPath抓取JavaScript动态加载内容的实践案例
利用Selenium和XPath抓取JavaScript动态加载内容的实践案例
|
15天前
|
缓存 JavaScript UED
js中BOM中的方法
【10月更文挑战第31天】
|
2月前
|
XML 移动开发 JavaScript
js中BOM和DOM总结(基础篇)
文章总结了JavaScript的BOM和DOM知识点,包括window、screen、location、history、navigator对象,以及消息框、计时器和cookie。同时,介绍了DOM的概念、节点获取和修改方法,以及事件处理。
js中BOM和DOM总结(基础篇)
|
1月前
|
前端开发 JavaScript
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
|
1月前
|
JavaScript 前端开发 Java
【前端基础篇】JavaScript之BOM介绍
【前端基础篇】JavaScript之BOM介绍
37 0
|
3月前
|
JavaScript 前端开发 UED
Javaweb之javascript的小案例的详细解析
通过上述步骤,我们得到了一个动态更新的实时时钟,这个简单的JavaScript案例展示了定时器的使用方法,并讲解了如何处理日期和时间。这个案例说明了JavaScript在网页中添加动态内容与交互的能力。对于涉足JavaWeb开发的学习者来说,理解和运用这些基础知识非常重要。
42 11
|
2月前
|
JavaScript 前端开发 API
Javaweb之javascript的BOM对象的详细解析
BOM为Web开发提供了强大的API,允许开发者与浏览器进行深入的交互。合理使用BOM中的对象和方法,可以极大地增强Web应用的功能性和用户体验。需要注意的是,BOM的某些特征可能会在不同浏览器中表现不一致,因此在开发过程中需要进行仔细的测试和兼容性处理。通过掌握BOM,开发者能够制作出更丰富、更动态、更交互性的JavaWeb应用。
31 1
|
3月前
|
JavaScript API 图形学
一个案例带你从零入门Three.js,深度好文!
【8月更文挑战第1天】本教程无需任何Threejs知识!本教程以入门为主,带你快速了解Three.js开发
85 2
一个案例带你从零入门Three.js,深度好文!
|
3月前
|
编解码 JavaScript 前端开发
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
110 1
|
3月前
|
JavaScript 前端开发
js bom的概念
js bom的概念
35 1