JavaScript （6）

最新推荐文章于 2024-11-08 16:09:18 发布
最新推荐文章于 2024-11-08 16:09:18 发布
阅读量84 收藏
点赞数
分类专栏： 小白学javascript 文章标签： javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhuxyyds/article/details/120710726
版权

BOM对象

浏览器对象模型--Browser ObjectModel (BOM)

1.window属性

有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 浏览器窗口的内部高度

window.innerWidth - 浏览器窗口的内部宽度

对于 Internet Explorer 8、7、6、5：

document.documentElement.clientHeight

document.documentElement.clientWidth

或者

document.body.clientHeight

document.body.clientWidth

    <script>
        // window.onload=function(){
        //        var w= window.innerWidth;
        //        var h= window.innerHeight;
        //        document.write("<h1>"+w+"x"+h+"</h1>");
        //     }
        window.onload=function(){
				var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
				var h=window.innerHeight || document.documentElement.clientHeight ||document.body.clientHeight;
                document.write("<h1>"+w+"x"+h+"</h1>");	  
			}
    </script>

2.window方法 

open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口

格式:window.open(URL,name,features,replace)

重要事项：请不要混淆方法 Window.open() 与方法 Document.open()，这两者的功能完全不同。为了使您的代码清楚明白，请使用 Window.open()，而不要使用 open()。                

close() 方法用于关闭浏览器窗口。

说明:方法 close() 将关闭有 window 指定的顶层浏览器窗口。某个窗口可以通过调用 self.close() 或只调用 close() 来关闭其自身。

只有通过 JavaScript 代码打开的窗口才能够由 JavaScript 代码关闭。这阻止了恶意的脚本终止用户的浏览器。

JavaScript 弹窗方法

在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

警告框:window.alert("sometext");

确认框:window.confirm("sometext");

当确认卡弹出时，用户可以点击 "确认" 或者 "取消" 来确定用户操作。

当你点击 "确认", 确认框返回 true， 如果点击 "取消", 确认框返回 false。

提示框:window.prompt("sometext","defaultvalue");

当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。

如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

参数1---提示信息

参数2---提示框的默认值

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //打开网页
        function ce1(){
            // window.open("open.html","open","width=300","height=300",true);
            window.open("http://www.4399.com","open","width=200","height=250",true);
        }
        //关闭当前窗口
        function ce2(){
            window.close();
        }
        /*
        警告框window.alert("sometext");
        确认框:window.confirm("sometext");
        1.有一个boolean值的返回值
        true---你点击 "确认"
        false---你点击 "取消"*/
        function ce3(){
            var bug=window.confirm("ARE YOU OK?!?!?!");
            if(bug){
                window.close();
            }
        }
        /*提示框
        提示框:window.prompt("sometext","defaultvalue");
        sometext---字符串，提示信息
        defaultvalue---字符串，默认值
        返回值:1.点击确认，那么返回值为输入的值
              2.点击取消，那么返回值为 null
        */
       function ce4(){
        var y1 = window.prompt("请输入用户名");
               if(y1!=null){
                    alert("确认");
               }else{
                    alert("取消");
               }
       }
       //猜数字
       var num=Number.parseInt(Math.random()*100);
            num=num+1;
            function  ce5(){
                var n1 = window.prompt("请输入一个数字");
               if(n1>num){
                alert("大了!");
               }
               if(n1<num){
                alert("小了!");
               }
               if(n1==num){
                alert("你赢了");
                window.close();
               }
            }
    </script>
</head>
<body>
        <input type="button" value="打开" onclick="ce1()"/>
        <input type="button" value="关闭当前网页" onclick="ce2()"/>
        <input type="button" value="警告" onclick="ce3()"/>
        <input type="button" value="提示框" onclick="ce4()"/>
        <input type="button" value="猜一猜" onclick="ce5()"/>
</body>

3.Window子对象

TIP： 屏幕大小不是浏览器窗口大小

1.window Screen--屏幕

window.screen 对象包含有关用户屏幕的信息。

  1. 总宽度和总高度  --- screen.width   /  screen.height
  2. 可用宽度和可用高度----screen.availWidth  / screen.availHeight
  3. 色彩深度----screen.colorDepth
  4. 色彩分辨率----screen.pixelDepth
    <script>
        window.onload=function(){
                var wid=window.screen.width;
                var hei=window.screen.height;
                document.write("<h2>总宽度和总高度为"+wid+"*"+hei+"</h2>");
                var availWidth=window.screen.availWidth;
                var availHeight=window.screen.availHeight;
                document.write("<h3>可用宽度和可用高度为"+availWidth+"*"+availHeight+"</h3>");
                var colorDepth=window.screen.colorDepth;
                document.write("<h4>色彩深度为"+colorDepth+"</h4>");
                var pixelDepth=window.screen.pixelDepth;
                document.write("<h5>色彩分辨率为"+pixelDepth+"</h5>");
            }
    </script>

2.window Location---页面的地址 (URL)

对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

location.href 属性返回当前页面的 URL。

location.search 属性是一个可读可写的字符串，可设置或返回当前 URL 的查询部分（问号 ? 之后的部分）。

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function ce(){
               var name= document.getElementById("i1").value;
               var pass= document.getElementById("i2").value;
               if(name=="baba" && pass=="123321"){
                window.location.href="test 1011 4-1.html?username="+name+"&password="+pass;
               }
            
        }
    </script>
</head>
<body>
    <table border="2px" style="color: brown;">
        <tr align="center">
            <td><h3>登录</h3></td>
        </tr>
        <tr align="center">
            <td><input id="i1" type="text" value="用户名"/></td>
        </tr>
        <tr align="center">
            <td><input id="i2" type="password" value=""/></td>
        </tr>
        <tr align="center">
            <td><input id="b1" type="button" value="登录" onclick="ce()"/></td>
        </tr>
   </table>
</body>

3.window History---历史对象

history.back() - 与在浏览器点击后退按钮相同

history.forward() - 与在浏览器中点击按钮向前相同

 第一页：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function xyy(){
            window.history.forward();
        }
    </script>
</head>
<body>
    <h1>第一个页面</h1>
    <a href="test 1011 51.html">第二页</a><br>
    <input type="button" value="下一页" onclick="xyy();"/>
</body>

 第二页:

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function xia(){
            window.history.forward();
        }
        function shang(){
            window.history.back();
        }
      </script>
  </head>
  <body>
      <a href="test 1011 52.html">第三页</a><br>
      <input type="button" value="下一页" onclick="xia();"/>
      <input type="button" value="上一页" onclick="shang();"/>
  </body>

 第三页：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function back(){
            window.history.back();
        }
    </script>
</head>
<body>
    <h1>第三页</h1>
    <input type="button" value="上一页" onclick="back();"/>
</body>

4.window Navigator--浏览器的信息

window.navigator 对象包含有关访问者浏览器的信息。

    <script>
        document.write("<h3>浏览器代号:"+window.navigator.appCodeName+"</h3>");
		document.write("<h3>浏览器名称:"+window.navigator.appName+"</h3>");
		document.write("<h3>浏览器版本:"+window.navigator.appVersion+"</h3>");
    </script>

JavaScript 计时事件

setTimeout() 方法

  暂停指定的毫秒数后执行指定的代码

参数1--指定运行的代码

参数2--指定的毫秒数

    <script>
        //setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
        //clearInterval(intervalVariable) 方法用于停止 setInterval() 方法执行的函数代码。
        window.onload=function(){
            var returnvalue;
            document.getElementById("b1").onclick=function(){
            function getdate(){
                var date1=new Date();
                var datetime=date1.getFullYear()+"年"+
                       (date1.getMonth()+1)+"月"+
                        date1.getDate()+"日 "+
                        date1.getHours()+":"+date1.getMinutes()+":"+date1.getSeconds();
                        document.getElementsByTagName("h1")[0].innerText= datetime;    
            }
            returnvalue= window.setInterval(function(){getdate();},1000);
            }

            document.getElementById("b2").onclick=function(){
                window.clearInterval(returnvalue);
            }
        }

        //setTimeout() -  暂停指定的毫秒数后执行指定的代码[只执行一次]
        //clearTimeout(timeoutVariable) 方法用于停止执行setTimeout()方法的函数代码。
        
     </script>
</head>
<body>
    <input id="b1" type="button" value="开始"/>
    <input id="b2" type="button" value="停止"/>
</body>

zhuxyyds
关注
专栏目录
ArcGis之JavaScript
郭宝的博客
07-22 1874
简单说，它是一种可以让开发人员在Web业务系统中嵌入地图的方法。一般可以简称为ArcGISJSAPI，由全球领先的GIS平台软件及服务提供商Esri向开发者提供。一般由两部分组成一套JSAPI库，一套SDK，也是就开发帮助。包括了API接口的具体说明、样例代码以及入门级的开发指南。...
JavaScript原型链
qq_37464878的博客
11-19 6106
1.原型链 1.1 原型链解释： (概念) 原型链指一些原型通过__proto__指针构成的链表，一个原型链可以为想共享原型链中数据的对象服务，用于实现JavaScript中的继承机制。 (原型链指针) 原型链中涉及到的指针： 每个对象都有一个__proto__指针来访问对象的原型 每个原型都是一个用于实现继承的对象，除了有__proto__指针之外，还有constructor指针指向构造函数 每个函数都是一个对象，除了有__proto__指针之外，还有prototype指针指向与之关联的原型对象
JavaScript库的官网
weixin_59246157的博客
03-31 4805
4. https://www.cnblogs.com/libin-1/p/7810081.html：介绍了一些国内常用的 JavaScript 库，包括百度 ECharts、Ant Design、Element UI 等。1. https://www.bootcdn.cn/：提供了常用的 JavaScript 库，包括 jQuery、Vue.js、React 等。3. https://www.layui.com/：提供了基于 jQuery 的前端 UI 框架，包括常用的组件和样式。
01初识JavaScript
Blog of Lytracy
09-07 3576
文章目录1、初识JavaScript2、JavaScript与ECMAScript的关系3、开发工具 1、初识JavaScript 作用：实现网页交互，提升用户体验。 由来：1995年，Netscape（网景）公司（现在的Mozilla）的Brendan Eich（布兰登·艾奇）在网景导航者浏览器上首次设计出了JavaScript，Netscape最初将这个脚本语言命名为LiveScript。Netscape与Sun公司合作之后将其改名为JavaScript。 特点：脚本语言、跨平台、支持面向对象。 2、J
JavaScript Date 函数
weixin_64195420的博客
04-25 1381
JavaScript看这一篇就够了，简单全面一发入魂
热门推荐
学Java，找哪吒
03-09 3万+
文档对象模型（DOM,Document Object Model）是一个应用编程接口（API），用于在HTML中使用扩展的HTML。DOM将整个页面抽象为一组分层节点。 DOM通过创建表示文档的树，让开发者可以随心所欲的控制网页的内容和结构。使用DOM API可以轻松地删除、添加、替换、修改节点。 对浏览器而言，DOM就是使用ECMAScript实现的，如今已经成为JavaScript语言的一大组成部分。 言而言之，DOM提供与网页内容交互的方法和接口。
JavaScript ES6
00后的一位普通处女座前端程序员
03-23 2193
JavaScript ES6—JS的第六套标准规范，讲解
JavaScript变量
流楚丶格念的博客
07-19 4127
文章目录js写代码时候注意事项变量什么是变量如何使用变量变量在内存中的存储变量的命名规则和规范代码示例 js写代码时候注意事项 1.在一对script的标签中有错误的js代码,那么该错误的代码后面的js代码不会执行 2.如果第一对的script标签中有错误,不会影响后面的script标签中的js代码执行 3.script的标签中可以写什么内容 type="text/javascript"是标准写法或者写language="JavaScript"都可以 但是,目前在我们的html页面中,type和langua
JavaScript简介
成长ing中的w的专栏
11-09 3475
其一 ，对于Web前端：JavaScript语言是从事Web开发的同志必学的3种语言的一种。 1）HTML：定义网页的内容； 2）CSS：描述网页的样式； 3）JavaScript:控制网页的行为逻辑； 其二，JavaScript与Java区别：单看语言名称，总有种让人产生它们一定有某种联系的错觉；然并卵没有什么关联。 1）推出公司：Javascript是Netscape公司的；而Java是SUN Microsystems公司推出的。 2）语言性质：JavaScript是一种解释性编程语言，其.
JavaScript入门
微风洋洋的博客
02-10 9432
JavaScript入门秘籍，欲练此功，关注有功
现代JavaScript教程
08-10
自ECMAScript 6（简称ES6）以来，JavaScript引入了许多新特性，如箭头函数、模板字符串、let和const、类和模块等。掌握这些新特性能提升代码的可读性和简洁性。 六、DOM操作 在Web开发中，JavaScript常常用于操作...
javascript
02-10
6. JavaScript代码标签和内嵌位置：在HTML中，JavaScript代码可以通过标签嵌入，通常有几种放置位置，如head头部和body标签的末尾。通常建议将变量和函数定义放在head头部，而页面特效代码则放到body体后面。例如： ...
javaScript api
11-03
6. ES6及以后的新特性：JavaScript API也包括了ES6（ECMAScript 2015）及后续版本引入的新特性，如箭头函数、模板字符串、解构赋值、async/await等，这些增强了语言的表达力和可读性，使得代码更加简洁和高效。...
基于Javascript的前端代码设计源码
05-28
本项目是基于Javascript的前端代码设计源码，包含161个文件，其中包括81个PNG图像文件、30个JavaScript文件、20个CSS样式文件、19个HTML文件、6个GIF图像文件、1个DS_Store文件、1个Project文件、1个JSON配置文件和1...
javascript实训
03-22
在学校完成的javascript的实训 项目：购物网站 基本功能： 网站显示商品分类和商品信息，提供搜索商品、浏览商品的功能； 用户能够注册后购物，查看订单、购物车和个人信息； 实现效果： 图片放大特效，浮动广告，...
Echarts 折线图
weixin_44443380的博客
11-08 157
解决方法：设置emphasis.lineStyle和折线图本身lineStyle相同即可。问题：鼠标悬停在折线图上，折线变粗。3、去掉 hover 折线变粗方法。
vue2面试题5|[2024-11-08]
最新发布
m0_49474690的博客
11-08 287
关于vue2API的面试题
每天10个vue面试题(九)
不熬夜的臭宝的博客
11-08 408
一天10个vue面试题喽！
上门理发系统的搭建
app830的博客
11-07 341
上门理发系统的搭建涉及多个方面，包括技术架构、功能模块、用户体验以及运营策略等。服务器：部署应用到云服务器（如AWS、阿里云）或本地服务器上，确保系统的稳定性和可扩展性。消息通知：通过短信、邮件或APP推送等方式，向用户发送预约确认、提醒等消息。订单管理：用户可以查看自己的预约订单，包括待付款、已付款、已完成等状态。服务浏览与选择：展示各类理发服务，包括价格、时长、适用人群等信息。在搭建过程中，要确保系统的安全性和稳定性，防止数据泄露和系统崩溃。操作便捷：优化用户操作流程，减少不必要的步骤，提高用户体验。
Adobe Creative Suite 6 JavaScript Tools Guide
"JavaScript Tools Guide CS6.pdf 是Adobe Creative Suite 6系列中关于JavaScript开发工具的指南，适用于Windows和Macintosh操作系统。这份文档包含了对JavaScript在Adobe软件中的使用和调试的详细指导。" 本文档是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值