//JavaScript Window - 浏览器对象模型

window.document.getElementById("header");

//等价于

document.getElementById("header");

/*

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

实用的 JavaScript 方案（涵盖所有浏览器）：

* */

function get_Browser(){

    var w=window.innerWidth

    || document.documentElement.clientWidth

    || document.body.clientWidth;

    var h=window.innerHeight

    || document.documentElement.clientHeight

    || document.body.clientHeight;

    x=document.getElementById("demo");

    x.innerHTML="Browser inner window width: " + w + ", height: " + h + "."

}

/*

其他 Window 方法

一些其他方法：

window.open() - 打开新窗口

window.close() - 关闭当前窗口

window.moveTo() - 移动当前窗口

window.resizeTo() - 调整当前窗口的尺寸

* */

function Screen(){

    //可用宽度

    document.write("Available Width: " + screen.availWidth);

    //可用高度

    document.write("Available Height: " + screen.availHeight);

    //    Window Location Pathname

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

    document.write(location.pathname);

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

    function newDoc()

    {

        window.location.assign("www.baidu.com");

        //window.history 对象包含浏览器的历史。

        window.history.back();  //返回

        /*

        <html>

        <head>

        <script>

        function goBack()

          {

          window.history.back()

          }

        </script>

        </head>

        <body>

        <input type="button" value="Back" onclick="goBack()">

        </body>

        </html>

        */

        window.history.forward();//前进

        /*

        <html>

        <head>

        <script>

        function goForward()

          {

          window.history.forward()

          }

        </script>

        </head>

        <body>

        <input type="button" value="Forward" onclick="goForward()">

        </body>

        </html>

         */

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

        function Get_Browser(){

            txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";

            txt+= "<p>Browser Name: " + navigator.appName + "</p>";

            txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";

            txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";

            txt+= "<p>Platform: " + navigator.platform + "</p>";

            txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";

            txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";

            document.getElementById("example").innerHTML=txt;

            /*

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

            navigator 数据可被浏览器使用者更改

            一些浏览器对测试站点会识别错误

            浏览器无法报告晚于浏览器发布的新操作系统

             */

            //JavaScript 弹窗

            //警告框

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

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

            function myFunction(){

                alert("Confirm!");

            }

            /*

            确认框

            确认框通常用于验证是否接受用户操作。

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

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

             */

            function myFunction()

            {

            var x;

            var r=confirm("Press a button!");

            if (r==true)

            {

                  x="You pressed OK!";

            }

            else

            {

                 x="You pressed Cancel!";

            }

                document.getElementById("demo").innerHTML=x;

            }

            /*

            提示框

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

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

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

             */

            function myFunction()

            {

            var x;

            var person=prompt("请输入你的名字","Harry Potter");

            if (person!=null)

              {

              x="你好 " + person + "! 今天感觉如何?";

              document.getElementById("demo").innerHTML=x;

              }

            }

            /*

            JavaScript 计时事件

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

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

            setInterval() - 间隔指定的毫秒数不停地执行指定的代码。

            setTimeout() - 暂停指定的毫秒数后执行指定的代码

            Note: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。

             */

            //每三秒弹出 "hello" ：

            setInterval(function(){alert("Hello")},3000);

            //动态时钟显示

            var myVar=setInterval(function(){myTimer()},1000);

            function myTimer()

            {

            var d=new Date();

            var t=d.toLocaleTimeString();

            document.getElementById("demo").innerHTML=t;

            }

        }

    }

}

            //clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。

            function StopTime(){

                var myVar=setInterval(function(){myTimer()},1000);

                function myTimer()

                {

                    var d=new Date();

                    var t=d.toLocaleTimeString();

                    document.getElementById("demo").innerHTML=t;

                }

                function myStopFunction()

                {

                     clearInterval(myVar);

                }

            }

//JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookies。

//创建cookies

document.cookie = "userName = Jone";

//您还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：

document.cookie = "username = jone;expres = Thu,18,Dec 2013 12:00:00 GMT";

//您可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。

document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

//使用 JavaScript 读取 Cookie

var x = document.cookie;

//document.cookie 将以字符串的方式返回所有的 cookies，类型格式： cookie1=value; cookie2=value; cookie3=value;

//使用 JavaScript 修改 Cookie

//在 JavaScript 中，修改 cookies 类似于创建 cookies，如下所示：

document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

//旧的 cookie 将被覆盖。

//使用 JavaScript 删除 Cookie

//删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可，如下所示，设置为 Thu, 01 Jan 1970 00:00:00 GMT:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

//注意，当您删除时不必指定 cookie 的值。

//Cookies操作函数

function setCookie(cname,cvalue,exdays)

{

    var d = new Date();

    d.setTime(d.getTime()+(exdays*24*60*60*1000));

    var expires = "expires="+d.toGMTString();

    document.cookie = cname + "=" + cvalue + "; " + expires;

}

function getCookie(cname)

{

    var name = cname + "=";

    var ca = document.cookie.split(';');

    for(var i=0; i<ca.length; i++)

      {

      var c = ca[i].trim();

      if (c.indexOf(name)==0) return c.substring(name.length,c.length);

}

    return "";

}

function checkCookie()

{

    var user=getCookie("username");

    if (user!="")

      {

      alert("Welcome again " + user);

      }

    else

      {

      user = prompt("Please enter your name:","");

      if (user!="" && user!=null)

        {

        setCookie("username",user,365);

        }

      }

}

JavaScript自学代码--（四）的更多相关文章

  1. JavaScript自学代码--（三）

    //通过 id 查找 HTML 元素 var x = document.getElementById("demo"); //通过标签名查找 HTML 元素 //本例查找 id=&q ...

  2. JavaScript框架设计(四) 字符串选择器(选择器模块结束)

    JavaScript框架设计(四) 字符串选择器(选择器模块结束) 经过前面JavaScript框架设计(三) push兼容性和选择器上下文的铺垫,实现了在某一元素下寻找,现在终于进入了字符串选择器 ...

  3. javascript常用代码大全

    http://caibaojian.com/288.html    原文链接 jquery选中radio //如果之前有选中的,则把选中radio取消掉 $("#tj_cat .pro_ca ...

  4. Javascript多线程引擎(四)

    Javascript多线程引擎(四)--之C语言单继承 因为使用C语言做为开发语言, 而C语言在类的支持方面几乎为零, 而Javascript语言的Object类型是一个非常明显的类支持对象,所以这里 ...

  5. 32、可以拿来用的JavaScript实用功能代码

    可以拿来用的JavaScript实用功能代码(可能会有些bug,用时稍微修改下,我用了几个还可以) 转载自 1.原生JavaScript实现字符串长度截取 function cutstr(str, l ...

  6. JavaScript standard 代码规范的全文

    这是 JavaScript standard 代码规范的全文. 掌握本规范的最好方法是安装并在自己的代码中使用它. 细则 使用两个空格进行缩进. eslint: indent function hel ...

  7. Javascript特效代码大全(420个)（转）

    转载自:Javascript特效代码大全(420个) 收集资料,以便使用+面试+学习  ├ Cookie脚本 ├ 随访问次数变提示 ├ 集成Cookies ├ 使窗口仅弹出一次 ├ 签名提示程序 ├ ...

  8. JavaScript学习记录四

    title: JavaScript学习记录四 toc: true date: 2018-09-16 20:31:22 --<JavaScript高级程序设计(第2版)>学习笔记 要多查阅M ...

  9. How Javascript works (Javascript工作原理) (四) 事件循环及异步编程的出现和 5 种更好的 async/await 编程方式

    个人总结: 1.讲解了JS引擎,webAPI与event loop合作的机制. 2.setTimeout是把事件推送给Web API去处理,当时间到了之后才把setTimeout中的事件推入调用栈. ...

随机推荐

  1. C#泛型对类型参数的推断

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  2. JavaScript实现回到顶部

    HTML页面使用一个a标签,href内填写JavaScript:;以阻止默认行为,在学习实例的时候添加一个大的div来充实页面. demo: <a href="javascript:; ...

  3. asp.net下载的方法1

    1. 首先新建一个用于进行下载处理的page页,如download.aspx,里面什么东西也没有. 2. 添加一个DownloadHandler类,它继承于IHttpHandler接口,可以用来自定义 ...

  4. java学习粗略路线

    首先是JAVA基础JAVA SE(用于开发和部署桌面.服务器以及嵌入设备和实时环境中的Java应用程序.) 之后是JAVA EE(java企业级标准开发),先学习Servlet(控制器).JSP(在h ...

  5. [置顶] 读取pdf并且在web页面中显示

    读取pdf并且在web页面中显示 if (System.IO.File.Exists(f)) { Response.ContentType = "applicationpdf"; ...

  6. JVM笔记7：类加载器

    虚拟机设计团队把类加载阶段中的"通过一个类的全限定名来获取描述此类的二进制字节流"这个动作放到Java虚拟机外部实现,以便让应用程序自己决定如何去获取所需要的类,实现这个动作的代码 ...

  7. Android 頁面中有 EditText ，進入時取消自動彈出鍵盤

    Android 畫面裡的 EditText 被 Focus 時 會自動彈出鍵盤 這是方便使用者習慣的設計 不過筆者在開發時發現 有時候方便過頭了 原因 一開始進入有 EditText 的頁面時 Edi ...

  8. magento性能优化的教程(非常详细)

    Magento是一套专业开源的电子商务系统,Magento设计得非常灵活,具有模块化架构体系和丰富的功能但有朋友会发现此模块用到了会发现非常的缓慢了,那么下面我们来看关于magento性能优化的例子. ...

  9. hbuilder用自己的服务

    2016-03-10 以后写测试demo用Sublime3 http://docs.emmet.io/cheat-sheet/ 更多炫酷信息和emmet语法请参见: 视频demo 语法文档 2016- ...

  10. android 中在CMD中查看sqlite

    今天第一次学习Sqlite,在代码中执行了sql,但是不知道在上面地方才能直观的查看sqlite中的数据,下面是查看资料后的找到的查看方法: 通过上述可以从cmd进入数据库查看原文地址:http:// ...