您的位置：首页 > 编程技术 > html  >  js控制显示与隐藏代码

js控制显示与隐藏代码

 更新时间：2016年9月20日 19:02  点击：2191

js控制显示与隐藏代码,很简单我们就用到style.display 的显示与隐藏 block,none下面我们来看个实例.
<script>
function show(obj) {
 document.getElementById(obj).style.display = "block"
}
function hide(obj) {
 document.getElementById(obj).style.display = "none"
}
</script>

<h3><span>内容</span><a href="javascript:void(0);" onmouseover="show('count');" onmouseout="hide('count')">指上看看</a></h3>

 <div id="count" style="display:none;">
     <h4>退款说明</h4>
        <p>特惠套餐退款金额 = （套餐费用 － 域名费用） × （申请天数 － 已使用天数） / 申请天数</p>
        <p>虚拟主机退款金额 = 虚拟主机费用 × （申请天数 － 已使用天数） / 申请天数</p>
</div>

我们通常会通过单击按钮的操作，将定义好的内容直接复制到剪贴板

对于用户来说点了按钮直接【Ctrl】+【V】就可以了。

其实该功能的核心原理就是用到了window子对象clipboardData的一个方法：setData()

其语法是：clipboardData.setData(sDataFormat, sData)

参数sDataFormat表示要复制的内容的格式；参数sData则要复制的内容。
返回值：复制成功返回true；失败返回false。

比如：

clipboardData.setData("text","www.czz5.com")
<a href="#" onclick=javascript:clipboardData.setData("text","www.czz5.com")>
单击当前链接文本表示复制了内容到本地剪贴板，只需在【Ctrl】+【V】就能显示出定义的内容
</a>

以上是定义了固定的值复制到本地剪贴板，可用在诸如“将本页转阅给朋友”类似的功能需求中，以达到快捷转达网址或信息的目的。

此外，我们还会遇到这样的一些情况：当我们在某网站复制了一段内容之后，在粘贴下来时，发现不自觉的多了一行信息，该信息即是由内容复制到剪贴板同时增加的一行信息。

也就是说我们写入到剪贴板中的值除了拷贝的选择内容外，还有自己定义的值，那么如何获得“拷贝的选择内容”，这就需要使用到 document.selection.createRange() 方法，其中该方法配合 execCommand，在 HTML 编辑器中很有用，比如：文字加粗、斜体、复制、粘贴、创建超链接等。

<textarea cols=40 rows=10>
www.czz5.com 中国站长网
www.tangshanseo.cn 唐山SEO
www.xiaoduzi.com 健康减肥网
</textarea> <br>
<input type=button value="先选择文本框文本再单击本按钮" onclick=alert(document.selection.createRange().text)>
</form>

所以，应用了document.selection.createRange().text就能重新定义剪贴板中的值了。

选择复制本段文本，然后粘贴到文本编辑器中查看是不是多了一些附加信息。

<script type="text/javascript">
document.body.oncopy=function(){
 event.returnValue=false;
 var t=document.selection.createRange().text;
 var s="有关单击按钮将内容复制到剪贴板的原文内容地址： "+location.href;
 clipboardData.setData('Text',t+'rnrn'+s+'rn');
}
</script>

js禁止右击与选择内容

<script>
function onKeyDown()
{
 if ((event.keyCode==116)||(window.event.ctrlKey)||(window.event.shiftKey)||(event.keyCode==122))
 {
 event.keyCode=0;
 event.returnValue=false;
 }
}
</script>

<script>
function yxl() {
if(window.event.altKey)
{
window.event.returnValue=false;
}
}
document.onkeydown=yxl
</script>
<body onkeydown="onKeyDown()" oncontextmenu="return false" onselectstart="return false" ondragstart="return false">

原创:转请注明www.111cn.net

　thead 标签  表示HTML表头
　　表格的头部thead，可以使用单独的样式定义表头，并且在打印时可以在分页的上部打印表头。

　　tbody 标签  表示HTML表体
　　浏览器显示表格时，通常是完全下载表格后，再全部显示，所以当表格很长时，可以使用tbody分段显示。

　　scope 属性  定义了行或列的表头
　　scope可以定义行或列的表头
　　取值
　　col - 定义列表头
　　row - 定义行表头
　　colgroup - 定义列组的表头信息,是column group的缩写
　　rowgroup - 定义行组的表头信息,是row group的缩写

　　summary 属性  代表HTML表格的摘要
　　表格不仅可以有标题caption，还可以有一个摘要说明summary。摘要是不会显示出来的，通常是给一些其它的工具使用的，比如盲人阅读器等。
　　关于caption和th标签可以参考下面的文章。
　　CSS网页布局实例：以合适的标签创建具有语义的表格
　　http://www./article.asp?id=720
　　由于摘要summary不会显示在浏览器中，所以可以尽可能的使摘要描述足够长，这样更有利于那些通过“听”的浏览者了解你的table表格。

看下面的HTML代码：

 
<table id="MrJin_a" summary="关于www.52css.ocm网站的一些数据">
    <thead>
        <tr>
            <th scope="col"></th>
            <th scope="col">IP</th>
            <th scope="col">PV</th>
            <th scope="col">RANK</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> 网站首页</td>
            <td>5000</td>
            <td>47800</td>
            <td>A</td>
        </tr>
        <tr>
            <td>DivCSS教程</td>
            <td>4500</td>
            <td>42000</td>
            <td>A-</td>
        </tr>
        <tr>
            <td>CSS布局实例</td>
            <td>4900</td>
            <td>46300</td>
            <td>A+</td>
        </tr>
        <tr>
            <td>CSS2.0教程</td>
            <td>4200</td>
            <td>41800</td>
            <td>A+</td>
        </tr>
    </tbody>
</table>
　　HTML代码中没有任何表现的部分，不设置边距，定义表格边线，色彩等。所有表现的内容都分离到CSS里去。
　　本文作者： 如需转载请建立本站链接（http://www./），并且不得随意改动文章内容、保留此版权声明文本！

　　看下面的CSS代码：

 
body
{
    line-height: 20px;
}

#MrJin_a
{
    font-size: 12px;
    background: #fff;
    margin: 45px;
    width: 480px;
    border-collapse: collapse;
    text-align: left;
}
#MrJin_a th
{
    font-size: 14px;
    font-weight: normal;
    color: #039;
    padding: 10px 8px;
    border-bottom: 2px solid #6678b1;
}
#MrJin_a td
{
    color: #666;
    padding: 9px 8px 0px 8px;
}
#MrJin_a tbody tr:hover td
{
    color: #03c;
}

<script>
var Acc={
    value:0,/* 缓存权限结果值 */
    add:function(n){/* 添加一个权限 */
        if(this.has(n))return this;/* 避免重复添加 */
       return  this.value+=1<<n,this;
    },
    remove:function(n){/* 删除一个权限 */
        if(!this.has(n))return this;/* 不存在此权限时跳过 */
        return this.value-=1<<n,this;
    },
    has:function(opID){/* 判断是否包含指定权限 */
        return (this.value&(1<<opID))==1<<opID;
    },
    all:function(){/* 列举全部权限 */
        for(var i=0, arr=[];i<this.value;i++){
            if(1<<i>this.value)break;/* 中断不存在的ID */
            if(this.has(i))arr.push(i);
        };
        return arr;
    }
}
var $=Acc;
var ps='浏览,回复,编辑,屏蔽,删除,添加,管理,申诉,举报,其它'.split(',');
$.add(0);//添加浏览权限
$.add(3);//添加屏蔽权限
$.add(4);//添加删除权限
$.add(6);//添加管理权限
$.remove(0);//移除浏览权限
$.remove(3);//移除屏蔽权限
//$.remove(4);//移除删除权限
var r=$.all(), rc=[];
for(var i=0;i<r.length;i++)
{//把权限ID转换为字符串
    rc.push(ps[r[i]]||'其它')
}
alert('您拥有以下权限:nn'+rc.join('nn'));
 //-->
</script>

[!--infotagslink--]

相关文章

  • 不打开网页直接查看网站的源代码

    　　有一种方法，可以不打开网站而直接查看到这个网站的源代码.. 　　这样可以有效地防止误入恶意网站... 　　在浏览器地址栏输入： 　　view-source:http://...2016-09-20

  • php 调用goolge地图代码

    <?php require('path.inc.php'); header('content-Type: text/html; charset=utf-8'); $borough_id = intval($_GET['id']); if(!$borough_id){ echo ' ...2016-11-25

  • JS基于Mootools实现的个性菜单效果代码

    本文实例讲述了JS基于Mootools实现的个性菜单效果代码。分享给大家供大家参考，具体如下：这里演示基于Mootools做的带动画的垂直型菜单，是一个初学者写的，用来学习Mootools的使用有帮助，下载时请注意要将外部引用的mootools...2015-10-23

  • JS+CSS实现分类动态选择及移动功能效果代码

    本文实例讲述了JS+CSS实现分类动态选择及移动功能效果代码。分享给大家供大家参考，具体如下：这是一个类似选项卡功能的选择插件，与普通的TAb区别是加入了动画效果，多用于商品类网站，用作商品分类功能，不过其它网站也可以用，...2015-10-21

  • JS实现自定义简单网页软键盘效果代码

    本文实例讲述了JS实现自定义简单网页软键盘效果。分享给大家供大家参考，具体如下：这是一款自定义的简单点的网页软键盘，没有使用任何控件，仅是为了练习JavaScript编写水平，安全性方面没有过多考虑，有顾虑的可以不用，目的是学...2015-11-08

  • php 取除连续空格与换行代码

    php 取除连续空格与换行代码，这些我们都用到str_replace与正则函数 第一种： $content=str_replace("n","",$content); echo $content; 第二种： $content=preg_replac...2016-11-25

  • php简单用户登陆程序代码

    php简单用户登陆程序代码 这些教程很对初学者来讲是很有用的哦，这款就下面这一点点代码了哦。 <center> <p>&nbsp;</p> <p>&nbsp;</p> <form name="form1...2016-11-25

  • PHP实现清除wordpress里恶意代码

    公司一些wordpress网站由于下载的插件存在恶意代码，导致整个服务器所有网站PHP文件都存在恶意代码，就写了个简单的脚本清除。恶意代码示例...2015-10-23

  • js控制页面控件隐藏显示的两种方法介绍

    javascript控制页面控件隐藏显示的两种方法，方法的不同之处在于控件隐藏后是否还在页面上占位 方法一： 复制代码 代码如下: document.all["panelsms"].style.visibility="hidden"; document.all["panelsms"].style.visi...2013-10-13

  • jQuery实现广告显示和隐藏动画

    这篇文章主要为大家详细介绍了jQuery实现广告显示和隐藏动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-07-05

  • JS实现双击屏幕滚动效果代码

    本文实例讲述了JS实现双击屏幕滚动效果代码。分享给大家供大家参考，具体如下：这里演示双击滚屏效果代码的实现方法，不知道有觉得有用处的没，现在网上还有很多还在用这个特效的呢，代码分享给大家吧。运行效果截图如下：在线演...2015-10-30

  • js识别uc浏览器的代码

    其实挺简单的就是if(navigator.userAgent.indexOf('UCBrowser') > -1) {alert("uc浏览器");}else｛//不是uc浏览器执行的操作｝如果想测试某个浏览器的特征可以通过如下方法获取JS获取浏览器信息 浏览器代码名称：navigator...2015-11-08

  • JS日期加减,日期运算代码

    一、日期减去天数等于第二个日期function cc(dd,dadd){//可以加上错误处理var a = new Date(dd)a = a.valueOf()a = a - dadd * 24 * 60 * 60 * 1000a = new Date(a)alert(a.getFullYear() + "年" + (a.getMonth() +...2015-11-08

  • C#隐式运行CMD命令（隐藏命令窗口）

    这篇文章主要介绍了C#隐式运行CMD命令（隐藏命令窗口）,本文实现在winform窗口中运行CMD命令,需要的朋友可以参考下...2020-06-25

  • PHP开发微信支付的代码分享

    微信支付，即便交了保证金，你还是处理测试阶段，不能正式发布。必须到你通过程序测试提交订单、发货通知等数据到微信的系统中，才能申请发布。然后，因为在微信中是通过JS方式调用API，必须在微信后台设置支付授权目录，而且要到...2014-05-31

  • 基于JavaScript实现文字超出部分隐藏

    这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01

  • 基于JavaScript实现表单密码的隐藏和显示出来

    为了网站的安全性，很多朋友都把密码设的比较复杂，但是如何密码不能明显示，不知道输的是对是错，为了安全起见可以把密码显示的，那么基于js代码如何实现的呢？下面通过本文给大家介绍JavaScript实现表单密码的隐藏和显示，需要的朋友参考下...2016-03-03

  • PHP常用的小程序代码段

    本文实例讲述了PHP常用的小程序代码段。分享给大家供大家参考，具体如下：1.计算两个时间的相差几天$startdate=strtotime("2009-12-09");$enddate=strtotime("2009-12-05");上面的php时间日期函数strtotime已经把字符串...2015-11-24

  • php怎么用拼音 简单的php中文转拼音的实现代码

    小编分享了一段简单的php中文转拼音的实现代码，代码简单易懂，适合初学php的同学参考学习。 代码如下 复制代码 <?phpfunction Pinyin($_String...2017-07-06

  • jQuery 隐藏和显示 input 默认值示例

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht...2014-06-07