html页面传值问题

更新时间：2016年9月20日 19:06 点击：1864

有时候在浏览网页的时候会发现：有的网站用html来传值，根据传值的不同显示不同的内容。其代码
  <script language="JavaScript" type="text/javascript">
  
  </script>

<div style="width:100%; overflow-x:hidden;overflow-y:scroll;height:100px;" id="nono" onClick="go()">
<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院
</div>
<script>
function go(){
alert(document.getElementById('nono').scrollTop);
}
</script>

效果：使用Windows系统的用户在关机的时候，出现的界面只允许用户选择关机、注销或取消动作，而桌面上的程序都不能使用，并且屏幕呈现灰色状态。Windows关机效果如图22.1所示。

网页中使用此效果好处：在网页上运用这种关机效果有什么好处呢？首先，由于单击某一链接后，将用户此时不可用的操作隐藏在后台，将可用的操作放在屏幕最上层，并高亮显示，可以避免用户的误操作。其次，将信息高亮显示，也可以提醒用户应该注意的事项。

原理：在网页中实现这种效果的原理很简单。创建两个图层，一个为遮盖层，覆盖整个页面，并且显示为灰色；另一个图层作为高亮显示的部分，在遮盖层的上方，这可通过设置图层的z-index属性来设置。当取消关机效果后，只需将这两个图层元素在页面中删除即可。

代码：
<html>
<head>
<title>ajax关机效果</title>
<style type="text/css">
#lightbox {/*该层为高亮显示层*/
       BORDER-RIGHT: #fff 1px solid;
       BORDER-TOP: #fff 1px solid;
       DISPLAY: block;
       Z-INDEX: 9999; /*设置该层在网页的最上端,设置足够大*/
       BACKGROUND: #fdfce9; /*设置背景色*/
       LEFT: 50%;
       MARGIN: -220px 0px 0px -250px;
       BORDER-LEFT: #fff 1px solid;
       WIDTH: 500px;
       BORDER-BOTTOM: #fff 1px solid;
       POSITION: absolute;
       TOP: 50%;
       HEIGHT: 400px;
       TEXT-ALIGN: left
}
#overlay {/*该层为覆盖层*/
      DISPLAY: block;
      Z-INDEX: 9998; /*设置高亮层的下方*/
      FILTER: alpha(opacity=20); /*设置成透明*/
      LEFT: 0px;
      WIDTH: 100%;
      POSITION: absolute;
      TOP: 0px;
      HEIGHT: 100%;
      BACKGROUND-COLOR: #000;
      moz-opacity: 0.8;
      opacity: .80
}
</style>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">百度</a>

<div id="overlay"></div>

<div id="lightbox"><a href="#" onclick="javascript:f()">关闭</a> <a href="#" onclick="javascript:f1()">打开</a></div>
</body>
</html>
<script>
function f()
{
  document.getElementById("overlay").style.display="none";
}
function f1()
{
document.getElementById("overlay").style.display="block";
}
</script>

注意：在IE浏览器中如果有<select>标记，则该标记不能被覆盖层覆盖，但在其他浏览器中则可以覆盖。图22.3所示的是IE浏览器中<select>标记的效果，图22.4所示的是Mozzila Firefox中<select>标记的效果。

图22.3  IE浏览器中<select>标记

图22.4  Mozzila Firefox浏览器中<select> 标记
所以在使用IE浏览器时，要先将网页中的<select>元素隐藏起来。如以下代码可以用于隐藏页面所有的<select>元素。
selects = document.getElementsByTagName('select');
for(i = 0; i < selects.length; i++) {
       selects[i].style.visibility = visibility;
}

<DIV id=demo onmouseover=ii=1 style="OVERFLOW: hidden; HEIGHT: 500px" onmouseout=ii=0>
<DIV id=demo1>
<div align="center">
<a href='#' target='_blank'><img src='images/k.jpg' width='125' height='125' vspace='5' border='0' class='tu'></a><br><a href='#' target='_blank'>图片1</a><br>
<a href='#' target='_blank'><img src='images/j.jpg' width='125' height='125' vspace='5' border='0' class='tu'></a><br><a href='#' target='_blank'>图片2</a><br>
<a href='#' target='_blank'><img src='images/I.jpg' width='125' height='125' vspace='5' border='0' class='tu'></a><br><a href='#' target='_blank'>图片3</a><br>
<a href='#' target='_blank'><img src='images/h.jpg' width='125' height='125' vspace='5' border='0' class='tu'></a><br><a href='#' target='_blank'>图片4</a><br>
<a href='#' target='_blank'><img src='images/g.jpg' width='125' height='125' vspace='5' border='0' class='tu'></a><br><a href='#' target='_blank'>图片5</a><br>
</div>
</DIV>
<DIV id=demo2></DIV>
<SCRIPT>
var ii=0;t=demo.scrollTop
demo2.innerHTML=demo1.innerHTML
function qswhMarquee(){
if (ii==1)return
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else
demo.scrollTop++
}
setInterval(qswhMarquee,20)
</SCRIPT>

先用IE打开他的网站，然后在同一IE的地址栏中粘贴以下代码

javascript:{clipboardData.setData("text",frames[0].document.documentElement.outerHTML);alert("请查看您的剪贴板")}

然后打开记事本，选择“编辑”--“粘贴”，看到了吗？

[!--infotagslink--]

上一篇: flash动画挡掉其他层的解决方法

下一篇: 在Web网页上使用VBScript和JScript二

微信小程序页面传值详解
这篇文章主要介绍了微信小程序页面传值详解的相关资料,需要的朋友可以参考下...2017-03-13
PHP传值到不同页面的三种常见方式及php和html之间传值问题
在项目开发中经常见到不同页面之间传值在web工作中，本篇文章给大家列出了三种常见的方式。接触PHP也有几个月了，本文总结一下这段日子中，在编程过程里常用的3种不同页面传值方法，希望可以给大家参考。有什么意见也希望大...2015-11-24
js修改input的type属性问题探讨
js修改input的type属性有些限制。当input元素还未插入文档流之前，是可以修改它的值的，在ie和ff下都没问题。但如果input已经存在于页面，其type属性在ie下就成了只读属性了，不可以修改。...2013-10-19
Mysql常见问题集锦
1，utf8_bin跟utf8_general_ci的区别 ci是 case insensitive, 即 "大小写不敏感", a 和 A 会在字符判断中会被当做一样的; bin 是二进制, a 和 A 会别区别对待. 例如你运行: SELECT * FROM table WHERE txt = 'a'...2013-10-04
jQuery实现切换页面过渡动画效果
直接为大家介绍制作过程，希望大家可以喜欢。HTML结构该页面切换特效的HTML结构使用一个<main>元素来作为页面的包裹元素，div.cd-cover-layer用于制作页面切换时的遮罩层，div.cd-loading-bar是进行ajax加载时的loading进...2015-10-30
Mysql大小写敏感的问题
一、1 CREATE TABLE NAME(name VARCHAR(10)); 对这个表，缺省情况下，下面两个查询的结果是一样的：复制代码代码如下: SELECT * FROM TABLE NAME WHERE name='clip'; SELECT * FROM TABLE NAME WH...2015-03-15
解决vue刷新页面以后丢失store的数据问题
这篇文章主要介绍了解决vue刷新页面以后丢失store的数据问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-12
linux mint 下mysql中文支持问题
一.mysql默认不支持中文,它的server和db默认是latin1编码.所以我们要将其改变为utf-8编码,因为utf-8包含了地球上大部分语言的二进制编码 1.关闭mysql服务 sudo /etc/init.d/mysql stop 2.修改mysql配置文件 mysql配...2015-10-21
PHP页面转UTF-8中文编码乱码的解决办法
对于乱码这个问题php开发者几乎都会有碰到过，我们下面主要是介绍了php文件乱码和页面乱码。PHP页面转UTF-8编码问题 1.在代码开始出加入一行： header("Content-Type: text/html;charset=utf-8"); 2.PHP文件编码问题...2015-10-21
解决vuex数据页面刷新后初始化操作
这篇文章主要介绍了解决vuex数据页面刷新后初始化操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-26
java后台实现js关闭本页面,父页面指定跳转或刷新操作
这篇文章主要介绍了java后台实现js关闭本页面,父页面指定跳转或刷新操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-16
JavaScript 获取滚动条位置并将页面滑动到锚点
这篇文章主要介绍了JavaScript 获取滚动条位置并将页面滑动到锚点的的相关资料，帮助大家更好的理解和学习使用JavaScript，感兴趣的朋友可以了解下...2021-02-09
vue实现在进行增删改操作后刷新页面
这篇文章主要介绍了vue实现在进行增删改操作后刷新页面，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-05
Pycharm 跳转回之前所在页面的操作
这篇文章主要介绍了Pycharm 跳转回之前所在页面的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-05
Vue父子组件传值的一些坑
这篇文章主要介绍了Vue父子组件传值的一些坑，帮助大家更好的理解和使用vue父子组件，感兴趣的朋友可以了解下...2020-09-16
C#使用队列(Queue)解决简单的并发问题
这篇文章主要介绍了使用队列(Queue)解决简单的并发问题，讲解的很细致，喜欢的朋友们可以了解一下...2020-06-25
Bootstrap页面缩小变形的快速解决办法
bootstrap布局是应用得很广泛的一种网页布局方法，下面通过本文给大家介绍bootstrap页面缩小变形的快速解决办法，需要的朋友参考下吧...2017-02-08
微信小程序教程之注册页面
这篇文章主要介绍了微信小程序注册页面的相关资料,需要的朋友可以参考下...2016-10-20
C#窗体间常用的几种传值方式及委托与事件详解
这篇文章主要给大家介绍了关于C#窗体间常用的几种传值方式及委托与事件的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧...2020-06-25
C# WPF 通过委托实现多窗口间的传值的方法
这篇文章主要介绍了C# WPF 通过委托实现多窗口间的传值的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2020-06-25

html页面传值问题

相关文章

阁下可能感兴趣的内容

推荐阅读