zoukankan      html  css  js  c++  java
  • JS Window窗口

    一、window.screen

    包含有关用户屏幕的信息。

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

    一些属性:

    • screen.availWidth - 可用的屏幕宽度
    • screen.availHeight - 可用的屏幕高度
    <script>
    document.write("可用宽度:" + screen.availWidth);
    document.write("可用高度:" + screen.availHeight);
    </script>

    二、Window Location

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

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

    一些例子:

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

    三、Window History

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

    一些方法:

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

    Window History Back

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

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

    复制代码
    <script>
    function Back()
      {
      window.history.back()
      }
    </script>
    <input type="button" value="返回" onclick="Back()">
    复制代码

    Window History Forward

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

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

    实例

    在页面上创建一个向前的按钮:

    复制代码
    <script>
    function goForward()
      {
      window.history.forward()
      }
    </script>
    
    
    <input type="button" value="向前" onclick="goForward()">
    复制代码

    四、消息框

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

    1)警告框  alert

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

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

    复制代码
    <script>
    function disp_alert()
    {
    alert("我是警告框!!")
    }
    </script>
    
    <input type="button" onclick="disp_alert()" value="显示警告框" />
    复制代码

    image

    2)确认框  confirm

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

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

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

    复制代码
    <script type="text/javascript">
    function show()
    {
    var r=confirm("是否提交?");
    if (r==true)
      {
      alert("提交!");
      /*return true*/
      }
    else
      {
      alert("未提交");
      /*return false*/
      }
    }
    </script>
    <p>
    <input type="button" onclick="return show()" value="点击提交" />
    <!-- 上文中的注释 :在表单调用时需要添加 return -->
    复制代码

    image

    imageimage

    3)提示框   promt

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

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

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

    复制代码
    <script type="text/javascript">
    function disp_prompt()
      {
      var name=prompt("请输入您的名字","某某")
      if (name!=null && name!="")
        {
        document.write("你好!" + name + " 今天过得怎么样?")
        }
      }
    </script>
    <input type="button" onclick="disp_prompt()" value="显示提示框" />
    复制代码

    image

    image

    五、计时

    setTimeout() (时间间隔的动态效果)

    语法
    var t=setTimeout("javascript语句",毫秒)

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

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

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

    提示:1000 毫秒等于一秒。

    1)点击按钮后两秒后弹框

    复制代码
    <script type="text/javascript">
    function timedMsg()
     {
     var t=setTimeout("alert('2 秒!')",2000)
     }
    </script>
    
    <form>
    <input type="button" value="点击2秒后弹框" onClick="timedMsg()">
    </form>
    复制代码

    image

    2)点击按钮后开始计时

    复制代码
    <script type="text/javascript">
    var c=0
    var t
    function timedCount()
     {
     document.getElementById('txt').value=c
     c=c+1
     t=setTimeout("timedCount()",1000)
     }
    </script>
    
    <form>
    <input type="button" value="开始计时" onClick="timedCount()">
    <input type="text" id="txt">
    </form>
    复制代码

    image

    image

    框内的数字每秒变动一次

  • 相关阅读:
    解决SharePoint 文档库itemadded eventhandler导致的上传完成后,编辑页面保持报错的问题,错误信息为“该文档已经被编辑过 the file has been modified by...”
    解决SharePoint 2013 designer workflow 在发布的报错“负载平衡没有设置”The workflow files were saved but cannot be run.
    随机实例,随机值
    Spring4笔记
    struts2笔记(3)
    struts2笔记(2)
    获取文本的编码类型(from logparse)
    FileUtil(from logparser)
    DateUtil(SimpleDateFormat)
    struts2笔记
  • 原文地址:https://www.cnblogs.com/dlexia/p/4505058.html
Copyright © 2011-2022 走看看