JavaScript自学代码--（四）

时间：2015-03-04 12:23:19 阅读：149 评论：0 收藏：0 [点我收藏+]
标签：
//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自学代码--（四）
标签：
原文地址：http://www.cnblogs.com/blogofwyl/p/4312811.html
踩
(0)
评论一句话评论（0）
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行