常用网页特效[不断更新中...]-前端-MiThink 记事本

常用网页特效[不断更新中...]

DATE: 2016-11-10 / VIEWS: 644

搜集的一集常用网页代码:
禁止左键,右键,和一些键盘事件，防复制:

HTML代码



禁止左键,右键,和一些键盘事件，防复制

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

加入收藏,设为首页代码
<span style="CURSOR: hand" onClick="window.external.addFavorite('http://www.huison.cn','懒鱼的池塘')" title="懒鱼的池塘">收藏本页</span>
<span onclick="var strHref=window.location.href;this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.huison.cn');" style="CURSOR: hand">设为首页</span>

Javascript操作剪贴板

HTML代码


测试操作剪贴板















下面是另一个例子实现页面中选中字符，并拖拉到文本区功能
注意其中的window.event.dataTransfer对象也可处理剪贴板内容，不过只能用在 drag-and-drop 操作中


测试操作剪贴板2


选择我们并把我们拖到下面的textarea

</textarea>

</BODY>
</HTML></pre><br/><INPUT onclick="runEx('temp36957')"  type="button" value="运行此代码"/> <INPUT onclick="doCopy('temp36957')"  type="button" value="复制此代码"/><br/> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</div></div><br/><br/><strong>链接确认:</strong><br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.huison.cn/blog/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent"><a href="<a href="http://www.huison.cn" target="_blank">http://www.huison.cn</a>" onclick=return(confirm("确定要打开吗？"))>打开</a></div></div><br/><br/><strong>控制横向和纵向滚动条的显隐？</strong><br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.huison.cn/blog/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent"><body style="overflow-y:hidden"> 去掉x轴<br/><body style="overflow-x:hidden"> 去掉y轴<br/><body scroll="no">不显</div></div><br/><br/><strong>字号缩放:</strong><br/>越来越多的人长时间的泡网，眼镜的普及率也越来越高，让文字大点，让更多的用户看的更清楚。<br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.huison.cn/blog/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent"><script type="text/javascript"><br/>function doZoom(size)<br/>{document.getElementById('zoom').style.fontSize=size+'px';}<br/></script><br/><span id="zoom">需要指定大小的文字</span><br/><a href="javascript:doZoom(16)">大</a> <a href="javascript:doZoom(14)">中</a> <a href="javascript:doZoom(12)">小</a> </div></div><br/><br/><strong>iframe自适应高度:</strong><br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.huison.cn/blog/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent"><iframe name="pindex" src="index.asp" frameborder=false scrolling="auto" width="100%" height="100%" <br/>frameborder=no onload="document.all['pindex'].style.height=pindex.document.body.scrollHeight" ></iframe> </div></div><br/><br/><strong>文本框的N种限定:</strong><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.huison.cn/blog/images/html.gif" style="margin:0px 2px -3px 0px"> HTML代码</div><div class="UBBContent"><pre class='prettyprint linenums lang-html'>ENTER键可以让光标移到下一个输入框
<input onkeydown="if(event.keyCode==13)event.keyCode=9" > <br>
只能是中文<input onkeyup="value=value.replace(/[ -~]/g,'')" onkeydown="if(event.keyCode==13)event.keyCode=9"> <br>
只能是英文和数字.屏蔽了输入法<input style="ime-mode:disabled" onkeydown="if(event.keyCode==13)event.keyCode=9"> <br>
只能输入英文和数字<input onkeyup="value=value.replace(/[\W]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" onkeydown="if(event.keyCode==13)event.keyCode=9"> <br>
只能是数字<input onkeyup="value=value.replace(/[^\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"><br>
只能显示，不能修改的文本框<input readOnly value="只能显示，不能修改"></pre><br/><INPUT onclick="runEx('temp79942')"  type="button" value="运行此代码"/> <INPUT onclick="doCopy('temp79942')"  type="button" value="复制此代码"/><br/> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</div></div><br/><strong>清空内存,防止复制抓屏操作</strong><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.huison.cn/blog/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent"><SCRIPT language=javascript><br/><!--<br/>function testclip(){<br/> try {<br/>  if(clipboardData.getData("Text")||clipboardData.getData("HTML")||<br/><br/>clipboardData.getData("URL")) <br/>   {<br/>   null;<br/>   }<br/>  }<br/> catch(e){<br/>  clipboardData.setData("Text","懒鱼的池塘!")<br/>  }<br/> setTimeout("testclip()",500)<br/>}<br/>testclip();<br/>//--><br/></SCRIPT><br/></div></div>    </div>
    <footer class="entry-footer">
        <div class="entry-meta"> <span class="entry-terms category" itemprop="articleSection">Posted in: <a href="/list/html" title="查看 前端 中的全部文章" rel="tag">前端</a></span> <span class="entry-terms post_tag" itemprop="keywords">Tagged: </span> </div>
    </footer>
  </article>
        </main>
        <aside id="sidebar" class="sidebar sidebar-primary widget-area">
    <section id="category-1" class="widget widget-category">
    <ul>
        <li><a href="/">所有</a></li>
        <li><a href="/list/code">后端</a>
                            </li><li><a href="/list/html">前端</a>
                            </li><li><a href="/list/server">服务器</a>
                            </li><li><a href="/list/notes">随记</a>
                            </li>        <li><a href="/favorite">网址收藏</a></li>
    </ul>
    </section>
    <section id="calendar-2" class="widget widget-2 odd widget_calendar">
        <div class="widget-wrap">
            <div id="calendar_wrap">
                <a href="https://www.aliyun.com/activity/daily/bestoffer?userCode=tlivrwp3" target="_blank"><img src="/Public/images/440-240.jpg" class="img-responsive"></a>
            </div>
        </div>
    </section>
    <section id="recent-posts-2" class="widget widget-3 even widget_recent_entries">
        <div class="widget-wrap">
            <h4 class="widget-title">热门文章</h4>
            <ul>
            <li> <a href="/blog/52">kevent() reported that connect() failed (61: Connection refused) while connecting to upstream</a> </li><li> <a href="/blog/41">echarts如何异步加载图表数据？</a> </li><li> <a href="/blog/67">ECharts  X轴分组实现</a> </li><li> <a href="/blog/49">kindeditor编辑器全角空格失效的解决办法</a> </li><li> <a href="/blog/54">oh-my-zsh中文乱码问题</a> </li><li> <a href="/blog/1156">laravel的filter()方法的使用</a> </li><li> <a href="/blog/1163">Laravel学习笔记之Model Observer模型观察者</a> </li><li> <a href="/blog/39">编写一个能将给定的非负整数列表中的数字排列成最大数字的函数</a> </li><li> <a href="/blog/1169">select2异步获取(ajax)数据带记忆功能</a> </li><li> <a href="/blog/1155">Laravel事件Event初尝试</a> </li>   
            </ul>
        </div>
    </section>
    <section id="tag_cloud-2" class="widget widget-5 even widget-last widget_tag_cloud">
        <div class="widget-wrap">
            <h4 class="widget-title">标签</h4>
            <div class="tagcloud">
            <a href="/tag/phpok" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">phpok</a><a href="/tag/unserialize" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">unserialize</a><a href="/tag/serialize" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">serialize</a><a href="/tag/implode" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">implode</a><a href="/tag/explode" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">explode</a><a href="/tag/数组" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">数组</a><a href="/tag/博客" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">博客</a><a href="/tag/Kindeditor" title="共包含 4 篇文章" class="tag-link-66" style="font-size:13px">Kindeditor</a><a href="/tag/jquery" title="共包含 0 篇文章" class="tag-link-66" style="font-size:12px">jquery</a><a href="/tag/prop()" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">prop()</a><a href="/tag/attr()" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">attr()</a><a href="/tag/array_flip()" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">array_flip()</a><a href="/tag/shuffle()" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">shuffle()</a><a href="/tag/重载" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">重载</a><a href="/tag/HTTP_USER_AGENT" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">HTTP_USER_AGENT</a><a href="/tag/微信" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">微信</a><a href="/tag/$_SERVER" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">$_SERVER</a><a href="/tag/String" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">String</a><a href="/tag/表单" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">表单</a><a href="/tag/YII" title="共包含 4 篇文章" class="tag-link-66" style="font-size:13px">YII</a><a href="/tag/echarts" title="共包含 3 篇文章" class="tag-link-66" style="font-size:13px">echarts</a><a href="/tag/datepicker" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">datepicker</a><a href="/tag/fseek" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">fseek</a><a href="/tag/tail" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">tail</a><a href="/tag/file" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">file</a><a href="/tag/WampServer" title="共包含 2 篇文章" class="tag-link-66" style="font-size:12px">WampServer</a><a href="/tag/日期" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">日期</a><a href="/tag/随机" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">随机</a><a href="/tag/ucenter" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">ucenter</a><a href="/tag/discuz" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">discuz</a><a href="/tag/extract()" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">extract()</a><a href="/tag/json" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">json</a><a href="/tag/artdialog" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">artdialog</a><a href="/tag/sublime" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">sublime</a><a href="/tag/Package Control" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">Package Control</a><a href="/tag/启动管理器" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">启动管理器</a><a href="/tag/Windows" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">Windows</a><a href="/tag/空格" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">空格</a><a href="/tag/Case When Then" title="共包含 2 篇文章" class="tag-link-66" style="font-size:12px">Case When Then</a><a href="/tag/explain" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">explain</a><a href="/tag/批量排序" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">批量排序</a><a href="/tag/图片裁切" title="共包含 2 篇文章" class="tag-link-66" style="font-size:12px">图片裁切</a><a href="/tag/保存截图" title="共包含 0 篇文章" class="tag-link-66" style="font-size:12px">保存截图</a><a href="/tag/base64" title="共包含 0 篇文章" class="tag-link-66" style="font-size:12px">base64</a><a href="/tag/Mysql" title="共包含 7 篇文章" class="tag-link-66" style="font-size:14px">Mysql</a><a href="/tag/自动备份" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">自动备份</a><a href="/tag/round" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">round</a><a href="/tag/ceil" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">ceil</a><a href="/tag/floor" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">floor</a><a href="/tag/状态码" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">状态码</a><a href="/tag/thinkphp" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">thinkphp</a><a href="/tag/编程" title="共包含 3 篇文章" class="tag-link-66" style="font-size:13px">编程</a><a href="/tag/程序员" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">程序员</a><a href="/tag/冒泡排序" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">冒泡排序</a><a href="/tag/截图" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">截图</a><a href="/tag/索引" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">索引</a><a href="/tag/Rules" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">Rules</a><a href="/tag/分页" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">分页</a><a href="/tag/nginx" title="共包含 3 篇文章" class="tag-link-66" style="font-size:13px">nginx</a><a href="/tag/php-fpm" title="共包含 2 篇文章" class="tag-link-66" style="font-size:12px">php-fpm</a><a href="/tag/apache" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">apache</a><a href="/tag/oh-my-zsh" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">oh-my-zsh</a><a href="/tag/Git" title="共包含 2 篇文章" class="tag-link-66" style="font-size:12px">Git</a><a href="/tag/算法" title="共包含 3 篇文章" class="tag-link-66" style="font-size:13px">算法</a><a href="/tag/php" title="共包含 2 篇文章" class="tag-link-66" style="font-size:12px">php</a><a href="/tag/CSS" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">CSS</a><a href="/tag/Laravel" title="共包含 5 篇文章" class="tag-link-66" style="font-size:13px">Laravel</a><a href="/tag/filter" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">filter</a><a href="/tag/queue" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">queue</a><a href="/tag/request_slowlog_timeout" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">request_slowlog_timeout</a><a href="/tag/webpack" title="共包含 2 篇文章" class="tag-link-66" style="font-size:12px">webpack</a><a href="/tag/vue" title="共包含 2 篇文章" class="tag-link-66" style="font-size:12px">vue</a><a href="/tag/ajax" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">ajax</a><a href="/tag/preg_replace" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">preg_replace</a><a href="/tag/织梦" title="共包含 0 篇文章" class="tag-link-66" style="font-size:12px">织梦</a><a href="/tag/dede" title="共包含 0 篇文章" class="tag-link-66" style="font-size:12px">dede</a><a href="/tag/select2" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">select2</a><a href="/tag/vscode" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">vscode</a><a href="/tag/数据库" title="共包含 1 篇文章" class="tag-link-66" style="font-size:12px">数据库</a>            </div>
        </div>
    </section>
</aside>

    </div>
</div>
<footer id="footer" class="site-footer">
        <div class="wrap">
            <div class="footer-content footer-insert">
                <p class="copyright">Copyright © 2014-2025 MiThink. <script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "//hm.baidu.com/hm.js?de14e212b6823573cae18de297ef466e";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script></p>
                <p class="credit">本博客文件存储由<a href="https://s.qiniu.com/nYJ3u2">七牛</a>提供服务。</p>
            </div>
        </div>
    </footer>
</div>
<script type="text/javascript">
$(document).ready(function(){
  prettyPrint();
  $('a[href^="http"]').attr("target", "_blank");
});
</script>
</body>
</html>