因为遮罩层需要遮住整个页面,希望能够给需要

2019-07-13 作者:小鱼儿主页高手论坛   |   浏览(74)

弹出层效果是一个很实用的效果,相当多网址都选取了这种办法达成登入和注册,举例百度:

在某个场景下,须求网页在钦赐的时刻后,网页能够活动跳转到钦赐页面,比方在不或者找到钦点网页的气象下,就能来得在此之前安装好的404页面,何况跳转到钦定的页面,下边就是一段代码达成了此作用。

本文为大家介绍了一段出自互连网上的代码实例,能够合併单元格,上面和大家大饱眼福一下,希望能够给急需的对象或多或少带来一定的帮忙。
代码实比方下:

概念和用法

图片 1

代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>表格单元格合并代码</title>
<script type="text/javascript"> 
function autoRowSpan(tb,row,col){ 
 var lastValue=""; 
 var value=""; 
 var pos=1; 
 for(var i=row;i<tb.rows.length;i  ){ 
 value=tb.rows[i].cells[col].innerText; 
 if(lastValue==value){ 
  tb.rows[i].deleteCell(col); 
  tb.rows[i-pos].cells[col].rowSpan=tb.rows[i-pos].cells[col].rowSpan 1; 
  pos  ; 
 }
 else{ 
  lastValue=value; 
  pos=1; 
 } 
 } 
} 
window.onload=function(){
 var tb=document.getElementById("tb");
 autoRowSpan(tb,0,0)
}
</script>
</head>
<body>
<table id="tb" border="1">
 <thead>
 <tr >
  <td>国家</td>
  <td>地区</td>
 </tr>
 </thead>
 <tr>
 <td>中国</td>
 <td>河南</td>
 </tr>
 <tr>
 <td>中国</td>
 <td>四川</td>
 </tr>
 <tr>
 <td>中国</td>
 <td>北京</td>
 </tr>
 <tr>
 <td>美国</td>
 <td>纽约</td>
 </tr>
 <tr>
 <td>美国</td>
 <td>洛杉矶</td>
 </tr>
 <tr>
 <td>英国</td>
 <td>伦敦</td>
 </tr>
</table>
</body>
</html>

replace() 方法用于在字符串中用一些字符替换另一对字符,或沟通贰个与正则说明式相配的子串。

弹出层的个性:点击登陆或注册的时候在页面包车型大巴中级部分弹出二个报到或注册区域还要页面有二个遮罩层,并且登陆框在遮罩层之上,也正是登入框的z-index值要大于遮罩层的z-index值。当点击关闭可能遮罩层时关闭登陆依旧注册框(有的网页未有兑现点击遮罩层关闭登入或注册区域的成效。)。

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//www.jb51.net/" />
<title>js指定时间之后跳转到指定页面代码实例</title> 
<script type="text/javascript">
function redirect()
{
if(second<0)
{
location.href='http://wwww.jb51.net';
} 
else
{
if(navigator.appName.indexOf("Explorer")>-1)
{
document.getElementById('totalSecond').innerText=second--;
} 
else
{
document.getElementById('totalSecond').textContent=second--;
}
}
}
window.onload=function()
{
var second=document.getElementById('totalSecond').textContent;
if(navigator.appName.indexOf("Explorer")>-1)
{
second=document.getElementById('totalSecond').innerText;
} 
else
{
second = document.getElementById('totalSecond').textContent;
}
setInterval("redirect()",1000);
}
</script>
</head>
<body>
<h1>找不到指定的页面</h1>
3秒后自动跳转到指定页面
</body>
</html>

在为咱们分享一段:

stringObject.replace(regexp/substr,replacement)

近来也做了三个近乎的弹出层的效果,先出示一下结尾效果:

以上代码,能够在三秒以往跳转到钦定的页面,上面简要介绍一下贯彻进程。

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>合并表格</title> 
<script> 
/////////////////////////////////////////////// 
//功能:合并表格 
//参数:tb-需要合并的表格ID 
//参数:colLength--需要对前几列进行合并,比如, 
//想合并前两列,后面的数据列忽略合并,colLength应为2 
//缺省表示对全部列合并 
//data:2011.11.06 
/////////////////////////////////////////////// 
function uniteTable(tb,colLength){ 
//检查表格是否规整 
if(!checkTable(tb)) return; 
var i=0; 
var j=0; 
var rowCount=tb.rows.length; //行数 
var colCount=tb.rows[0].cells.length; //列数 
var obj1=null; 
var obj2=null; 
//为每个单元格命名 
for(i=0;i<rowCount;i  ){ 
for(j=0;j<colCount;j  ){ 
tb.rows[i].cells[j].id="tb__"   i.toString()   "_"   j.toString(); 
} 
} 
//逐列检查合并 
for(i=0;i<colCount;i  ){ 
if(i==colLength) return; 
obj1=document.getElementById("tb__0_" i.toString()) 
for(j=1;j<rowCount;j  ){ 
obj2=document.getElementById("tb__" j.toString() "_" i.toString()); 
if(obj1.innerText==obj2.innerText){ 
obj1.rowSpan  ; 
obj2.parentNode.removeChild(obj2); 
}else{ 
obj1=document.getElementById("tb__" j.toString() "_" i.toString()); 
} 
} 
} 
} 

///////////////////////////////////////// 
//功能:检查表格是否规整 
//参数:tb--需要检查的表格ID 
//data: 2011.11.06
///////////////////////////////////////// 
function checkTable(tb){ 
if(tb.rows.length==0) return false; 
if(tb.rows[0].cells.length==0) return false; 
for(var i=0;i<tb.rows.length;i  ){ 
if(tb.rows[0].cells.length!=tb.rows[i].cells.length) return false; 
} 
return true; 
} 
</script> 
</head> 
<body> 
<table width="400" border="1" id="table1"> 
<tr> 
<td>a</td> 
<td>for</td> 
<td>100</td> 
<td>200</td>
<td>1</td> 
</tr> 
<tr> 
<td>a</td> 
<td>for</td> 
<td>100</td> 
<td>300</td> 
<td>2</td> 
</tr> 
<tr> 
<td>a</td> 
<td>if</td> 
<td>100</td> 
<td>200</td> 
<td>3</td> 
</tr> 
<tr> 
<td>a</td> 
<td>if</td> 
<td>300</td> 
<td>230</td> 
<td>4</td> 
</tr> 
<tr> 
<td>a</td> 
<td>if</td> 
<td>320</td> 
<td>230</td> 
<td>5</td> 
</tr> 
</table> 
<br><input type="button" value="合并表格" onClick="uniteTable(table1,4)"> 
</body> 
</html>
参数 描述
regexp/substr

必需。规定子字符串或要替换的模式的 RegExp 对象。

请注意,如果该值是一个字符串,则将它作为要检索的直接量文本模式,而不是首先被转换为 RegExp 对象。

replacement 必需。一个字符串值。规定了替换文本或生成替换文本的函数。

图片 2

一.实现原理:

期望本文所述对大家学习javascript程序设计有所扶助。

返回值

简轻松单的说一下贯彻的进度。

利用停车计时器函数,每隔一秒修改一次span成分中的数字,当数字达到零过后,就能够将页面跳转到钦点的链接,原理大致这么,这里就相当少介绍了,具体能够参见代码注释。

你恐怕感兴趣的小说:

  • Javascript合併报表中持有同等内容单元格示例
  • JavaScript动态操作表格实例(增添,删除行,列及单元格)
  • js生成动态表格并为每一种单元格加多单击事件的不二法门
  • JavaScript动态改造表格单元格内容的方法
  • JS达成向表格行增添新单元格的点子
  • JS获取表格内钦命单元格html内容的章程

多少个新的字符串,是用 replacement 替换了 regexp 的第二回匹配或有所相称之后获得的。

先是是遮罩层。遮罩层是在页面动态加载的长河中开创的,因为遮罩层必要遮住整个页面,所以遮罩层的莫大是经过在JavaScript测算得到,而它的上升的幅度是成套页面包车型地铁上升的幅度,那一个也很轻易获取。还需求给它设二个z-index值,尽恐怕十分的大,因为须要遮住整个页面。当然发光度也是必须的。

二.代码注释:

正则字符

#mask{ 
background: #000;
opacity: .6;
filter:alpha(opacity=60);
position:absolute;
left:0;
top:0;
width:100%;
height:1000px;/*动态获取,这里设置高度是为了测试*/
z-index:1000;
}

1.function redirect(){},声美赞臣(Meadjohnson)个含糊,用于跳转。
2.if(second<0) {location.href=' ,借使数字小于零,那么就能跳转。
3.else{},不然实行倒计时效果。
4.if(navigator.appName.indexOf("Explorer")>-1),判定是还是不是是IE浏览器。
5.document.getElementById('totalSecond').innerText=second--,如若是IE浏览器则使用innerText属性设置span成分中的数字值。
6.document.getElementById('totalSecond').textContent=second--,别的浏览器选择textContent属性设置span成分中的数字值。
7.window.onload=function(){},当文书档案完全加载达成再去实施函数中的代码。
8.if(navigator.appName.indexOf("Explorer")>-1){},假使是IE浏览器则动用innerText属性获取span成分中的内容。
9.second = document.getElementById('totalSecond').textContent,其余职业浏览器接纳textContent属性获取span成分值。
10.setInterval("redirect()",一千),每隔一秒实行贰次放大计时器函数。

replaceValue能够是字符串。要是字符串中有多少个特定字符的话,会被转移为特定字符串。

透过JavaScript动态创建遮罩层,然后增加到页面中:  

三.相关阅读:

字符

//创建遮罩层节点
var oMask = document.createElement('div');
oMask.id = 'mask';
oMask.style.width = pageWidth   'px';
oMask.style.height = pageHeight   'px';
document.body.appendChild(oMask);

1.indexof()函数能够参照JavaScript中的lastIndexOf()方法运用详解一章节。
2.setInterval()函数能够参谋setInterval()和setTimeout()的用法和界别示范介绍一章节。

轮换文本

地点代码中的pageWidth和pageHeight就会页面包车型地铁幅度和中度值,通过

上述内容是我给我们享用的基于JavaScript达成定期跳转到内定页面包车型大巴漫天呈报,希望大家欢跃。

$$

//获取页面的高度和宽度
var pageHeight = document.documentElement.scrollHeight;
var pageWidth = document.documentElement.scrollWidth;

您只怕感兴趣的篇章:

  • JS在必然时间内跳转页面及各类刷新页面包车型客车落实形式
  • ASP.NET中至极JS完结页面计时(按期)自动跳转
  • javascript使用定期函数实现跳转到某些页面
  • 选拔javascript达成页面定时跳转总括篇
  • 等候指按期期后自动跳转或关闭当前页面包车型大巴js代码
  • JS定期刷新页面及跳转页面的格局
  • Javascript倒计时(定期)试行跳转事件的代码
  • js跳转页面方法达成聚焦
  • js实现页面跳转重定向的二种方法
  • js跳转页面方法总计
  • js 3秒后跳转页面包车型大巴落成代码
  • JavaScript贯彻定期页面跳转职能示例

直接量符号(正是作为'$$'字符用)

赢得。这样遮罩层就成功了。

$&

再来讲说弹出层的意义。

与正则相相配的字符串

弹出层在页面包车型地铁高级中学级某个显得(那也是重大的步骤),也正是弹出层距离页面侧边和右边手的距离相等,距离页面顶上部分的离开和距离下面的偏离相等。注意是在可是区域中。

$`

本文由小鱼儿玄机30码发布于小鱼儿主页高手论坛,转载请注明出处:因为遮罩层需要遮住整个页面,希望能够给需要

关键词: 小鱼儿玄机30码

小鱼儿主页高手论坛推荐