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>
目录
相关文章
|
1月前
|
JavaScript 前端开发
JavaScript操作DOM元素
JavaScript操作DOM元素
12 1
|
2天前
android-agent-web中js-bridge案例
android-agent-web中js-bridge案例
10 2
|
4天前
|
JavaScript 前端开发 UED
深入解析JavaScript原生操作DOM技术
【4月更文挑战第22天】本文深入探讨JavaScript原生DOM操作技术,包括使用`getElement*`方法和CSS选择器获取元素,借助`createElement`与`appendChild`动态创建及插入元素,修改元素内容、属性和样式,以及删除元素。通过掌握这些技术,开发者能实现页面动态交互,但应注意避免过度操作DOM以优化性能和用户体验。
|
11天前
|
开发框架 前端开发 JavaScript
采用C#.Net +JavaScript 开发的云LIS系统源码 二级医院应用案例有演示
技术架构:Asp.NET CORE 3.1 MVC + SQLserver + Redis等 开发语言:C# 6.0、JavaScript 前端框架:JQuery、EasyUI、Bootstrap 后端框架:MVC、SQLSugar等 数 据 库:SQLserver 2012
|
11天前
|
存储 JavaScript 前端开发
JavaScript DOM 操作:解释一下 cookie、sessionStorage 和 localStorage 的区别。
Cookie是服务器发送至客户端的文本信息,会随每个请求发送回服务器,适合控制会话状态但可能暴露隐私。SessionStorage仅在当前会话中存储数据,关闭浏览器后清除,适合临时存储如登录状态。LocalStorage则持久保存数据,即使关闭浏览器也不会清除,适用于存储长期设置。三种方式各有侧重,应按需求选择。
15 0
|
11天前
|
JavaScript 前端开发 安全
JavaScript DOM 操作:解释一下浏览器的同源策略。
**同源策略**是浏览器安全基石,它阻止脚本跨不同协议、域名或端口访问资源,防止恶意行为。例如,HTTP页面无法直接用JS获取HTTPS页面内容。**CORS**允许跨域请求,但需服务器配合设置,通过`document.domain`属性可配置,但仍受限于服务器配置。
14 4
|
18天前
|
JavaScript
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
|
25天前
|
JavaScript 前端开发
深入了解 JavaScript 中的 DOM 和 BOM
深入了解 JavaScript 中的 DOM 和 BOM
18 4
|
1月前
|
JavaScript
jQuery选择器案例之——index.js
jQuery选择器案例之——index.js
8 0
|
1月前
|
JavaScript 前端开发
JavaScript操作BOM简单案例
JavaScript操作BOM简单案例
9 1