分类目录归档：前端HTML及JS

javascript中 visibility和display的区别

发表评论

大多数人很容易将CSS属性display和visibility混淆，它们看似没有什么不同，其实它们的差别却是很大的。

visibility属性用来确定元素是显示还是隐藏的，这用visibility=”visible|hidden”来表示（visible表示显示，hidden表示隐藏）。

当visibility被设置为”hidden”的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。例：

<script language="JavaScript"> 
function toggleVisibility(me){
 if (me.style.visibility=="hidden"){ 
    me.style.visibility="visible"; 
  } 
  else { 
    me.style.visibility="hidden"; 
  } 
} 
</script> 

<div onclick="toggleVisibility(this)" style="position:relative">

第一行文本将会触发”hidden”和”visible”属性，注意第二行的变化。</div> <div>因为visibility会保留元素的位置，所以虽然第一行看不见了但位置还在，第二行内容不会上下移动。</div>

[Ctrl+A 全部选择进行拷贝 提示：可先修改部分代码，再点击运行]

注意到，当元素被隐藏之后，就不能再接收到其它事件了，所以在第一段代码中，当其被设为”hidden”的时候，就不能再接收响应到事件了，因此也就无法通过鼠标点击第一段文本令其显示出来。

另一方面，display属性就有一点不同了。visibility属性是隐藏元素但保持元素的浮动位置，而display实际上是设置元素的浮动特征。

当display被设置为block(块)时，容器中所有的元素将会被当作一个单独的块，就像<div>元素一样，它会在那个点被放入到页面中。(实际上你可以设置<span>的display:block，使其可以像<div>一样工作。

将display设置为inline，将使其行为和元素inline一样—即使它是普通的块元素如<div>，它也将会被组合成像<span>那样的输出流。

下面看我实例的代码和效果：

<script language="JavaScript"> 
function toggleDisplay(me){ 
  if (me.style.display=="block"){ 
    me.style.display="inline"; 
    alert("文本现在是：'inline'.");
  }  
  else { 
    if (me.style.display=="inline"){ 
      me.style.display="none";  
      alert("文本现在是:'none'. 3秒钟后自动重新显示。"); 
      window.setTimeout("blueText.style.display='block';",3000,"JavaScript"); 
    } else { me.style.display="block"; alert("文本现在是:'block'."); } } } </script> 
 
<div>在<span id="blueText" onclick="toggleDisplay(this)" style="color:blue;position:relative;cursor:hand;">蓝色</span>文字上点击来查看效果.</div>

[Ctrl+A 全部选择进行拷贝 提示：可先修改部分代码，再点击运行]

最后是display被设置：none，这时元素实际上就从页面中被移走，它下面所在的元素就会被自动跟上填。（此时应用display: none;的元素相当于消失，而visibility: hidden;则只表示隐藏，位置还在。）

display 属性分别为block, inline, none 值及使用visibility: hidden;的情况调试示例：

<h1>display 属性分别为block, inline, none 值及使用visibility: hidden;的情况调试</h1> 
<P><SPAN id="oSpan" style="">This is a SPAN</SPAN> in a sentence.</P> 
<P> 
<input type=button value="Inline" onclick="oSpan.style.display='inline'"> 
<input type=button value="Block" onclick="oSpan.style.display='block'">
<input type=button value="None" onclick="oSpan.style.display='none'"> 
<input type=button value="Hidden" onclick="oSpan.style.visibility='hidden'">
<input type=button value="Visible" onclick="oSpan.style.visibility='visible'"> 
</P> 
<UL> 
  <LI>将元素设为 block，会在该元素后换行。</LI> 
  <LI>将元素设为 inline，会消除元素换行。</LI> 
  <LI>将元素设为 none，隐藏该元素内容。</LI> 
</UL>

js获取当前时间，并格式化为”yyyy-MM-dd HH:mm:ss”

发表评论 
function getFormatDate() {
    var date = new Date();
    var month = date.getMonth() + 1;
    var strDate = date.getDate();
    if (month >= 1 && month <= 9) {
        month = "0" + month;
    }
    if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
    }
    var currentDate = date.getFullYear() + "-" + month + "-" + strDate
            + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
    return currentDate;
}

//将时间戳转换成 yyyy-MM-dd HH:mm:ss

      
    //inputTime 参数是毫秒级时间戳
    formatDate(inputTime) {
        var date = new Date(inputTime);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? ('0' + m) : m;
        var d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        var h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        var minute = date.getMinutes();
        var second = date.getSeconds();
        minute = minute < 10 ? ('0' + minute) : minute;
        second = second < 10 ? ('0' + second) : second;
        return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;
      },

js 弹出确认-取消对话框

发表评论

一种：

<a href="javascript:if(confirm('确实要删除该内容吗?'))location='http://www.google.com'">弹出窗口</a>

二种：

<script language="JavaScript">            
function delete_confirm(e)
{
    if (event.srcElement.outerText == "删除")
    {
        event.returnValue = confirm("删除是不可恢复的，你确认要删除吗？");
    }
}
document.onclick = delete_confirm;
</script>
<a href="Delete.aspx" onClick="delete_confirm">删除</a>

三种：

if(window.confirm('你确定要取消交易吗？')){
                 //alert("确定");
                 return true;
              }else{
                 //alert("取消");
                 return false;
             }

四种：

<!--调用方法--> 
<script language="JavaScript">             
function delete_confirm() 
{
    event.returnValue = confirm("删除是不可恢复的，你确认要删除吗？");
}
</script>

Input类型是checkbox时checked属性获取

发表评论

记录一下checkbox 的 checked 属性的获取办法，以备忘记：

假如你的一个HTML页中有这么一段代码：

       <input name="chbRem" id="chbRem" type="checkbox" checked="checked"> 

那么如何通过JQuery获得chbRem的checked状态呢：

错误的写法如下：

      alert(  $("#chbRem").attr("checked")   );

正确的获取方式应该是：

      alert(  $("#chbRem")[0].checked   );

此时，会输出ture。

js获取当前域名、Url、相对路径和参数

发表评论

用 Javascript 可以单独获取当前域名、Url、相对路径和参数，所谓单独获取，即域名不包括网页文件的路径和参数、参数不包括域名和网页文件路径，下面分别介绍。

一、js获取当前域名有2种方法

1、方法一

var domain = document.domain;

2、方法二

var domain = window.location.host;

3、注意问题

由于获取到的当前域名不包括 http://，所以把获取到的域名赋给 a 标签的 href 时，别忘了加上 http://，否则单击链接时导航会出错。

二、获取当前Url的4种方法

var url = window.location.href;

var url = self.location.href;

var url = document.URL;

var url = document.location;

浏览器地址栏显示的是什么，获取到的 url 就是什么。

三、获取当前相对路径的方法

首先获取 Url，然后把 Url 通过 // 截成两部分，再从后一部分中截取相对路径。如果截取到的相对路径中有参数，则把参数去掉。

function GetUrlRelativePath()
  {
    var url = document.location.toString();
    var arrUrl = url.split("//");

   var start = arrUrl[1].indexOf("/");
    var relUrl = arrUrl[1].substring(start);//stop省略，截取从start开始到结尾的所有字符

 if(relUrl.indexOf("?") != -1){
      relUrl = relUrl.split("?")[0];
    }
    return relUrl;
  }

调用方法：GetUrlRelativePath();

举例：假如当前 Url 是 http// www. liangshunet. com/pub/item.aspx?t=osw7，则截取到的相对路径为：/pub/item.aspx。

四、获取当前Url参数的方法

1、获取Url参数部分

function GetUrlPara()
  {
    var url = document.location.toString();
    var arrUrl = url.split("?");

   var para = arrUrl[1];
    return para;
  }

调用方法：GetUrlPara()

举例：假如当前 Url 是 http// www. liangshunet. com/pub/item.aspx?t=osw7，则截取到的参数部分为：t=osw7。

2、获取Url中指定参数的值

在 C#、PHP、JSP 中，都有直接获取 Url 中指定参数的方法，但 Javascript 却没有这样的现在方法，得自己写一个。在 Web 的开发过程中，获取 Url 中的参数是十分常用的操作，所以很有必要把它封装成一个可直接调用的方法。下面先介绍具体的实现过程，再分享代码。

1) 直接获取 Url 中指定参数的实现过程

首先通过 document.location 获得当前访问网页的网址，其次用 split 方法通过“？”把网址分为两部分。如果网址中有参数（arrObj.length > 1）；再用 split 方法通过 “&”把每个参数分开；接着用 for 循环检查参数中是否有与要找的参数相同参数，如果有，则返回参数的值；如果没有，继续循环直到找完所有参数。如果网址中没有参数和没有找到参数，都返回空。

2)实现代码如下：

//paraName 寻找参数的名称
  function GetUrlParam(paraName) {
    var url = document.location.toString();
    var arrObj = url.split("?");
   
   if (arrObj.length > 1) {
      var arrPara = arrObj[1].split("&");
      var arr;
      for (var i = 0; i < arrPara.length; i++) {
        arr = arrPara[i].split("=");
       if (arr != null && arr[0] == paraName) {
          return arr[1];
        }
      }
      return "";
    }
    else {
      return "";
    }
  }

调用方法：GetUrlParam(“id”);

举例说明：

假如当网页的网址有这样的参数 test.htm?id=896&s=q&p=5，则调用 GetUrlParam(“p”)，返回 5。