zoukankan      html  css  js  c++  java

  • 前端笔记4-4

    JS windows --浏览器对象模型

    1.Windows对象

    所有浏览器都支持 window 对象。它表示浏览器窗口。

    所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

    全局变量是 window 对象的属性。

    全局函数是 window 对象的方法。

    2.windows尺寸

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

    对于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
     1 <script type="text/javascript">
 2 var w=window.innerWidth
 3 ||document.documentElement.clientWidth
 4 ||document.body.clientWidth
 5 
 6 var h=window.innerHeight
 7 ||document.documentElement.clientHeight
 8 ||document.body.clientHeight
 9 document.write("浏览器宽为"+w+",高为"+h);
10 </script>

    3.其他 Window 方法

    一些其他方法：

    • window.open() - 打开新窗口
    • window.close() - 关闭当前窗口
    • window.moveTo() - 移动当前窗口
    • window.resizeTo() - 调整当前窗口的尺寸

    JS  screen：屏幕可用高度与宽度

    1.Window Screen 可用宽度

    screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏

     document.write("可用宽度"+screen.availWidth);

    2.Window Screen 可用高度

    screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。

     document.write("可用高度"+screen.availHeight);

    JS location

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

    1.Window Location

    window.location 对象在编写时可不使用 window 这个前缀。

    一些例子：

    • location.hostname 返回 web 主机的域名
    • location.pathname 返回当前页面的路径和文件名
    • location.port 返回 web 主机的端口 （80 或 443）
    • location.protocol 返回所使用的 web 协议（http:// 或 https://）

    2.Window Location Href

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

    document.write(location.href);

    3.Window Location Pathname

    location.pathname 属性返回 URL 的路径名。

    document.write(location.pathname+"<br/>");

    4.Window Location Assign

    location.assign() 方法加载新的文档。

    location.assign("1.gif");

    JS history

    1.Window History Back

    history.back() 方法加载历史列表中的前一个 URL。

    这与在浏览器中点击后退按钮是相同的：

    history.back();

    2.Window History Forward

    history forward() 方法加载历史列表中的下一个 URL。

    这与在浏览器中点击前进按钮是相同的：

    history.forward();

    JS navigator

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

    来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：

    • navigator 数据可被浏览器使用者更改
    • 浏览器无法报告晚于浏览器发布的新操作系统
    <script type="text/javascript">
  document.write("Browser CodeName:"+navigator.appCodeName+"<br/>");
  document.write("Browser name:"+navigator.appName+"<br/>");
  document.write("Browser Version:"+navigator.appVersion+"<br/>");
  document.write("Cookies Enabled:"+navigator.cookieEnabled+"<br/>");
  document.write("Platform:"+navigator.platform+"<br/>");
  document.write("User-agent header:"+navigator.userAgent+"<br/>");
  document.write("User-agent language:"+navigator.systemLanguage+"<br/>");


</script>

    JS消息框

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

    1.警告框

    警告框经常用于确保用户可以得到某些信息。

    当警告框出现后，用户需要点击确定按钮才能继续进行操作。

    alert("警告框");

    2.确认框

    确认框用于使用户可以验证或者接受某些信息。

    当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。

    如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。

    confirm("确认框");

     1 <body>
 2 <button onclick="myfunction()">show a confirm box</button>
 3 <script type="text/javascript">
 4    function myfunction(){
 5       var r=confirm("请选择一个按钮");
 6       if(r==true){
 7           alert("您选择了确认");
 8       }
 9       else{
10           alert("您选择了取消");
11       }
12    }
13 </script>
14 </body>

    3.提示框

    提示框经常用于提示用户在进入页面前输入某个值。

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

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

    var x=prompt("提示框");
    document.write(x);

    var x=prompt("提示框","文字");

     1 <body>
 2 <button onclick="myfunction()">显示提示框</button>
 3 <script type="text/javascript">
 4    function myfunction(){
 5       var r=prompt("请输入您的名字","Sam");
 6       if(r!=null&&r!=""){
 7           document.write("你好"+r+"!");
 8       }
 9    }
10 </script>
11 </body>

    4.带折行的警告框

    alert("再次向您问好！在这里，我们向您演示" + ' ' + "如何向警告框添加折行。")

    JS计时

    通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件

    在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:

    setTimeout()：未来的某时执行代码
    clearTimeout()：取消setTimeout()
    1.setTimeout()方法

    setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。

    setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg()"。

    第二个参数指示从当前起多少毫秒后执行第一个参数。

     1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5 </head>
 6 <body>
 7 <button onclick="myfunction()">Click!</button>
 8 <script type="text/javascript">
 9    function myfunction(){
10          var t=setTimeout("alert('过去3s了！')",3000);
11    }
12 </script>
13 </body>
14 </html>

    无穷循环

    要创建一个运行于无穷循环中的计时器，我们需要编写一个函数来调用其自身。在下面的例子中，当按钮被点击后，输入域便从 0 开始计数

     1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5 </head>
 6 <body>
 7 <button onclick="myfunction()">Click!</button>
 8 <input type="text" id="txt">
 9 <script type="text/javascript">
10    var c=0;
11    var t;
12    function myfunction(){
13        document.getElementById('txt').value=c;
14        c=c+1;
15        t=setTimeout("myfunction()",1000);
16     
17    }
18 </script>
19 </body>
20 </html>

    2.clearTimeout()  清零

     1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5 </head>
 6 <body>
 7 <button onclick="myfunction()">Click!</button>
 8 <input type="text" id="txt">
 9 <button onclick="stop()">Stop!</button>
10 <script type="text/javascript">
11    var c=0;
12    var t;
13    function myfunction(){
14        document.getElementById('txt').value=c;
15        c=c+1;
16        t=setTimeout("myfunction()",1000);
17     
18    }
19    function stop(){
20        c=0;
21        document.getElementById('txt').value=0;
22        clearTimeout(t);
23    }
24 </script>
25 </body>
26 </html>

    暂停

    <!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<button onclick="myfunction()">Click!</button>
<input type="text" id="txt">
<button onclick="stop()">Stop!</button>
<script type="text/javascript">
   var c=0;
   var t;
   function myfunction(){
       document.getElementById('txt').value=c;
       c=c+1;
       t=setTimeout("myfunction()",1000);
    
   }
   function stop(){
       clearTimeout(t);
   }
</script>
</body>
</html>

    3.执行 2 秒、4 秒和 6 秒的计时。

     1 <body>
 2 <button onclick="myfunction()">Click!</button>
 3 <input type="text" id="txt">
 4 <script type="text/javascript">
 5   function myfunction(){
 6        var t1=setTimeout("document.getElementById('txt').value='2秒'",2000);
 7        var t2=setTimeout("document.getElementById('txt').value='4秒'",4000);
 8        var t1=setTimeout("document.getElementById('txt').value='6秒'",6000);
 9   }
10   
11 </script>
12 </body>

    模拟时钟

    Javascript中：小时钟t=setTimeout('startTime()',500)为什么隔500毫秒就刷新页面而不是每隔1000毫秒（即1秒）再刷新一次页面？

    原因：
            这里的setTimeout是递归执行的。也就是在执行一次后，时间更新以后，才会设置下次的setTimeout，这里执行更新时间的代码也是要耗费时间的，因为javascript是脚本语言，又基于浏览器，性能比较差，而且更新时间是dome操作，比较慢。所以设置500能保证精度，避免延迟。
             如果设置1000毫秒刷新页面，由于程序的执行还需要时间，所有刷新页面的时间必然大于1000毫秒=1秒（假如是1.3秒（夸张点哈哈哈.....）），此时就有可能出现秒数不是依次增加1秒，例如：在开始执行程序时时间是12点30分30.9秒，而页面是精确到1秒，所有页面上显示的是12:30:30，如果设置1000毫秒（实际上是1.3秒）更新一次，则下次页面显示的时间是12点30分32秒（因为30.9+1.3=32.2）,直接跳过12点30分31秒，这样更新就不及时了，对吧？
               设置500毫秒更新一次页面是通常做法，但是也不能设置太小，刷新太频繁会造成浏览器负载的浪费。
     1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5 </head>
 6 <body onload="myfunction()">
 7 <div id="txt"></div>
 8 <script type="text/javascript">
 9 function myfunction(){
10    var today=new Date();
11    var h=today.getHours();
12    var m=today.getMinutes();
13    var s=today.getSeconds();
14    m=checkTime(m);
15    s=checkTime(s);
16    // document.write(h+":"+m+":"+s);
17    document.getElementById('txt').innerHTML=h+":"+m+":"+s;
18    var t;
19    t=setTimeout("myfunction()",500);
20 
21 
22 }
23 function checkTime(i){
24    if(i<10){
25        i="0"+i;
26    }
27    return i;
28 }
29    
30 </script>
31 </body>
32 </html>

    JS cookies

    cookie 用来识别用户。

    有关cookie的例子：

    名字 cookie 当访问者首次访问页面时，他或她也许会填写他/她们的名字。名字会存储于 cookie 中。当访问者再次访问网站时，他们会收到类似 "Welcome John Doe!" 的欢迎词。而名字则是从 cookie 中取回的。
    密码 cookie 当访问者首次访问页面时，他或她也许会填写他/她们的密码。密码也可被存储于 cookie 中。当他们再次访问网站时，密码就会从 cookie 中取回。
    日期 cookie 当访问者首次访问你的网站时，当前的日期可存储于 cookie 中。当他们再次访问网站时，他们会收到类似这样的一条消息："Your last visit was on Tuesday August 11, 2005!"。日期也是从 cookie 中取回的。
    1.创建和存储cookie
     1 <html>
 2 <head>
 3 <script type="text/javascript">
 4 function getCookie(c_name)
 5 {
 6 if (document.cookie.length>0)
 7   {
 8   c_start=document.cookie.indexOf(c_name + "=")
 9   if (c_start!=-1)
10     { 
11     c_start=c_start + c_name.length+1 
12     c_end=document.cookie.indexOf(";",c_start)
13     if (c_end==-1) c_end=document.cookie.length
14     return unescape(document.cookie.substring(c_start,c_end))
15     } 
16   }
17 return ""
18 }
19 
20 function setCookie(c_name,value,expiredays)
21 {
22 var exdate=new Date()
23 exdate.setDate(exdate.getDate()+expiredays)
24 document.cookie=c_name+ "=" +escape(value)+
25 ((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
26 }
27 
28 function checkCookie()
29 {
30 username=getCookie('username')
31 if (username!=null && username!="")
32   {alert('Welcome again '+username+'!')}
33 else 
34   {
35   username=prompt('Please enter your name:',"")
36   if (username!=null && username!="")
37     {
38     setCookie('username',username,365)
39     }
40   }
41 }
42 </script>
43 </head>
44 
45 <body onLoad="checkCookie()">
46 </body>
47 </html>
  • 相关阅读:
    痞子衡嵌入式：在IAR开发环境下RTThread工程自定义函数段重定向失效分析
    痞子衡嵌入式：深扒IAR启动函数流程之段初始化实现中可用的压缩选项
    痞子衡嵌入式：深扒IAR启动函数流程及其__low_level_init设计对函数重定向的影响
    《痞子衡嵌入式半月刊》 第 44 期
    痞子衡嵌入式：再测i.MXRT1060,1170上的普通GPIO与高速GPIO极限翻转频率
    痞子衡嵌入式：把玩i.MXRT1062 TencentOS Tiny EVB_AIoT开发板（1） 开发环境搭建与点灯
    痞子衡嵌入式：嵌入式CortexM系统中断延迟及其测量方法简介
    痞子衡嵌入式：把玩i.MXRT1062 TencentOS Tiny EVB_AIoT开发板（2） 在Flash调试及离线启动
    痞子衡嵌入式：利用GPIO模块来测量i.MXRT1xxx的系统中断延迟时间
    痞子衡嵌入式：在i.MXRT1170上启动含DQS的Octal Flash可不严格设Dummy Cycle (以MT35XU512为例)
  • 原文地址：https://www.cnblogs.com/jieyi/p/8399589.html
Copyright © 2011-2022 走看看