html css js php常用网页代码汇总合集(二)网页设计入门代码知识汇总2

body标签 禁止复制,鼠标拖动选取,禁用右键,禁止鼠标右键
<body οndragstart=window.event.returnValue=false οncοntextmenu=window.event.returnValue=false onselectstart=event.returnValue=false>

js标签 全文锁定鼠标右键菜单 复制 代码

<script type="text/javascript">document.οncοntextmenu=function(e){return false;};document.onselectstart=function(e){return false;};</script>

//指定9秒循环刷新本页面一次
<Script language="javascript">function myrefresh(){window.location.reload()}setTimeout("myrefresh()",9000);</Script>


1秒后只刷新页面一次
<script type="text/javascript">function fresh() {if(location.href.indexOf("?reload=true") < 0) {location.href += "?reload=true";} } setTimeout("fresh()",1000);</script>

只刷新一次
<body οnlοad="if (location.href.indexOf('reload')==-1) {location.replace(location.href)}">


5秒之后刷新1次 五秒之后刷新一次
<script type="text/javascript">function fresh() {if(location.href.indexOf("?reload=true") < 0) {location.href += "?reload=true";} } setTimeout("fresh()",5000);</script>


开窗时刷新
<body οnlοad="opener.location.reload()">


点击刷新一次
<div style="cursor:pointer;text-align:center;" class="load-box"><a style="font-size:32px;font-weight:bold;" href="javascript:window.location.reload()"><br>如果一直转圈圈不显示<br>点击这儿刷新一下<br>快~快~快~戳我两下~</a></div>

<b>音乐播放器</b><br><embed src="midi3.mid" autostart="true" loop="true" width="70" height="30">


Js实现复制动作方法:实现点击按钮,复制文本框中的的内容

<script type="text/javascript">
function copyUrl2()
{
var Url2=document.getElementById("biao1");
Url2.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
alert("已复制好,可贴粘。");
}
</script>
<textarea cols="20" rows="10" id="biao1">用户定义的代码区域</textarea>
<input type="button" onClick="copyUrl2()" value="点击复制代码" />

直接复制 url 地址

<input type="button" name="anniu2" onClick='copyUrl()' value="复制URL地址">
<script language="javascript">
function copyUrl()
{
var clipBoardContent=this.location.href;
window.clipboardData.setData("Text",clipBoardContent);
alert("复制成功!");
}
</script>

点击文本框时,复制文本框里面的内容

<input οnclick="oCopy(this)" value="你好.要copy的内容!">
<script language="javascript">
function oCopy(obj){
obj.select();
js=obj.createTextRange();
js.execCommand("Copy")
alert("复制成功!");
}
</script>


复制文本框或者隐藏域中的内容

<script language="javascript">
function CopyUrl(target){
target.value=myimg.value;
target.select(); 
js=myimg.createTextRange(); 
js.execCommand("Copy");
alert("复制成功!");
}
function AddImg(target){
target.value="[IMG]"+myimg.value+"[/ img]";
target.select();
js=target.createTextRange(); 
js.execCommand("Copy");
alert("复制成功!");
}
</script>

复制 span 标记中的内容

<script type="text/javascript">
</script>
<br />
<br />
<script type="text/javascript">function copyText(obj) 
{
var rng = document.body.createTextRange();
rng.moveToElementText(obj);
rng.scrollIntoView();
rng.select();
rng.execCommand("Copy");
rng.collapse(false);
alert("复制成功!");
}
</script>


浏览器兼容  copyToClipboard("拷贝内容")


function copyToClipboard(txt) {
      if (window.clipboardData) {
        window.clipboardData.clearData();
        clipboardData.setData("Text", txt);
        alert("复制成功!");
  
      } else if (navigator.userAgent.indexOf("Opera") != -1) {
        window.location = txt;
      } else if (window.netscape) {
        try {
          netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
        } catch (e) {
          alert("被浏览器拒绝!\n请在浏览器地址栏输入'about:config'并回车\n然后将 'signed.applets.codebase_principal_support'设置为'true'");
        }
        var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
        if (!clip)
          return;
        var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
        if (!trans)
          return;
        trans.addDataFlavor("text/unicode");
        var str = new Object();
        var len = new Object();
        var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
        var copytext = txt;
        str.data = copytext;
        trans.setTransferData("text/unicode", str, copytext.length * 2);
        var clipid = Components.interfaces.nsIClipboard;
        if (!clip)
          return false;
        clip.setData(trans, null, clipid.kGlobalClipboard);
        alert("复制成功!");
      }
    }

兼容各大浏览器的复制代码(结合ZeroClipboard.js)

<html>
<head>
<title>Zero Clipboard Test</title>
<script type="text/javascript" src="ZeroClipboard.js"></script>
<script language="JavaScript">
 var clip = null; 
 function $(id) { return document.getElementById(id); } 
 function init() {
     clip = new ZeroClipboard.Client();
     clip.setHandCursor(true);     
     clip.addEventListener('mouseOver', function (client) {
  // update the text on mouse over
  clip.setText( $('fe_text').value );
     });
      
     clip.addEventListener('complete', function (client, text) {
  //debugstr("Copied text to clipboard: " + text );
  alert("该地址已经复制,你可以使用Ctrl+V 粘贴。");
     });
     clip.glue('clip_button', 'clip_container' );
 }
</script>
</head>
<body onLoad="init()">
<input id="fe_text" cols=50 rows=5 value=复制内容文本1 >
<span id="clip_container"><span id="clip_button"><b>复制</b></span></span>
</body>
</html>

js锁定解锁鼠标右键代码:

========================================================js禁用右键
<script type="text/javascript">

function doProhibit()
{
    if(window.Event) 
           document.captureEvents(Event.MOUSEUP);
        
    function nocontextmenu() 
    {
           event.cancelBubble = true 
           event.returnvalue = false;
           return false;
    }
    
    function norightclick(e) 
    {
           if (window.Event)
           {
              if (e.which == 2 || e.which == 3)
              return false;
           }
           else if (event.button == 2 || event.button == 3) 
           {
            event.cancelBubble = true 
            event.returnvalue = false;
            return false;
           }
    }
    document.oncontextmenu = nocontextmenu;  // for IE5+ 
    document.onmousedown = norightclick;  // 
}

</script> 
===================================================js禁用右键

===================================================js解除禁用右键

<script type="text/javascript">

if (document.layers) 
{
    document.captureEvents(Event.MOUSEDOWN);
}
document.onmousedown = click;
document.oncontextmenu = new Function("return false;")
function click(e) 
{
      e = e || event;
      if (e.button == 2) 
    {
           var tag = e.srcElement || e.target;
          if (tag.type == "text" || tag.type == "textarea") 
        {
            document.oncontextmenu = new Function("return true;")
         }
          else 
          {
             document.oncontextmenu = new Function("return false;")
          }
      }
}

</script> 

===================================================js解除禁用右键

使用overflow: hidden来禁用页面滚动条,overflow:hidden

禁用页面滚动条的方法有很多,但最简单、最快的也就数overflow: hidden了,下面是禁用html及body滚动条的方法,兼容IE6、7

CSS代码如下:


html 

overflow: hidden; 

body 

overflow: hidden; 

在IE6,7下需要设置html有效,在其它标准浏览器下设置body就可以

怎禁止网页滚动条 下面的答案来自网络:

<body scoll=no> 全禁止

<body style="overflow:scroll;overflow-y:hidden"> 禁止纵向滚动条

<body style="overflow:scroll;overflow-x:hidden"> 禁止纵向滚动条

overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容

overflow: auto; 在需要时内容会自动添加滚动条
overflow: scroll; 总是显示滚动条
overflow-x: hidden; 禁止横向的滚动条
overflow-y: scroll; 总是显示纵向滚动条

例子:style="overflow:scroll;overflow-y:hidden;overflow-x:hidden"

input 输入框参数设置类:

1.文本框只能输入数字代码(小数点也不能输入)
<input οnkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">
2.只能输入数字,能输小数点.
<input οnkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')">
<input name=txt1 οnchange="if(/\D/.test(this.value)){alert('只能输入数字');this.value='';}">
3.数字和小数点方法二
<input type=text t_value="" o_value="" οnkeypress="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?/))this.value=this.tvalue;elsethis.tvalue=this.value;if(this.value.match(/(?:[\+\-]?\d+(?:\.\d+)?)?/))this.o_value=this.value" οnkeyup="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?/))this.value=this.tvalue;elsethis.tvalue=this.value;if(this.value.match(/(?:[\+\-]?\d+(?:\.\d+)?)?/))this.o_value=this.value" οnblur="if(!this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/))this.value=this.o_value;else{if(this.value.match(/^\.\d+/))this.value=0+this.value;if(this.value.match(/\./))this.value=0;this.o_value=this.value}">
4.只能输入字母和汉字
<input οnkeyup="value=value.replace(/[\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[\d]/g,''))" maxlength=10 name="Numbers">
5.只能输入英文字母和数字,不能输入中文
<input οnkeyup="value=value.replace(/[^\w\.\/]/ig,'')">
6.只能输入数字和英文<font color="Red">chun</font>
<input onKeyUp="value=value.replace(/[^\d|chun]/g,'')">
7.小数点后只能有最多两位(数字,中文都可输入),不能输入字母和运算符号:
<input onKeyPress="if((event.keyCode<48 || event.keyCode>57) && event.keyCode!=46 || /\.\d\d$/.test(value))event.returnValue=false">
8.小数点后只能有最多两位(数字,字母,中文都可输入),可以输入运算符号:
<input οnkeyup="this.value=this.value.replace(/^(\-)*(\d+)\.(\d\d).*/,′12.3')">

input number类型 长度限制5
<input type="number" οninput="if(value.length>5)value=value.slice(0,5)">
<input οnkeyup="value=value.replace(/[^\d\.]/g,'')">
<input   type=text     οnkeypress="return   event.keyCode>=65"     style="ime-mode:disabled">
<input type=text t_value="" o_value="" οnkeypress="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?/))this.value=this.tvalue;elsethis.tvalue=this.value;if(this.value.match(/(?:[\+\-]?\d+(?:\.\d+)?)?/))this.o_value=this.value" οnkeyup="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?/))this.value=this.tvalue;elsethis.tvalue=this.value;if(this.value.match(/(?:[\+\-]?\d+(?:\.\d+)?)?/))this.o_value=this.value" οnblur="if(!this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/))this.value=this.o_value;else{if(this.value.match(/^\.\d+/))this.value=0+this.value;if(this.value.match(/\./))this.value=0;this.o_value=this.value}">
<input    οnkeyup="this.value=this.value.replace(/\D/g,'')"    onafterpaste="this.value=this.value.replace(/\D/g,'')"> 
<input    name=txt1    οnchange="if(/\D/.test(this.value)){alert('只能输入数字');this.value='';}">     
<input    οnkeyup="if(isNaN(value))execCommand('undo')"    onafterpaste="if(isNaN(value))execCommand('undo')">
限制文本框只能输入数字包括小数点
<input οnkeyup="value=value.replace(/[^\d\.]/g,'')">
有关正则表达式 1.只能输入数字和英文的: <input οnkeyup="value=value.replace(/[\W]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" ID="Text1" NAME="Text1">
2.只能输入数字的: <input οnkeyup="value=value.replace(/[^\d]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" ID="Text2" NAME="Text2">
3.只能输入全角的: <input οnkeyup="value=value.replace(/[^\uFF00-\uFFFF]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\uFF00-\uFFFF]/g,''))" ID="Text3" NAME="Text3">
4.只能输入汉字的: <input οnkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))" ID="Text4" NAME="Text4">
移到输入框时自动选择: <input type="text" id="text1" name="text1" value="输入检索关键字" οnclick="javascript:this.form.text1.focus();this.form.text1.select();" maxlength="15" />

1.链接到某页 

<input type="button" name="Submit" value="确 定" class="btn" 

οnclick="location.href='filename.html'" /> 

2.返回(等同后退) 

<input name="Submit2" type="button" class="btn" 

οnclick="location.href='javascript:history.go(-1);'" value="返 回" /> 

3.打开新网页 

<input type="button" name="Submit2" value="确 定" class="btn" 

οnclick="window.open('filename.html')" /> 

4.打开无边框的新窗口 

<input type="button" name="Submit2" value="确 定" class="btn" οnclick="javascript:window.open('filename.html','','width=720,height=500,resizable=yes,scrollbars=yes,status=no')" /> 

5.打开新网页同时指向另一页 

<input type="button" name="Submit2" value="确 定" class="btn" οnclick="window.open('filename.html');location.href='http://blog.csdn.net'" /> 

6.打开无边框的新窗口同时指向另一页 

<input type="button" name="Submit2" value="确 定" class="btn" οnclick="javascript:window.open('http://blog.csdn.net','','width=720,height=500,resizable=yes,scrollbars=yes,status=no'); window.location='filename.html';" /> 

7.点击按钮弹出确认alert窗口 

方式一: 
<input type="button" name="Submit1" value="确定" class="btn" 
onClick="alert('是否确认提交?');location.href= 'filename.html';return false;" > 
方式二: 
<input type="button" name="Submit2" value="确定" class="btn" 
onClick="if (confirm('是否确认提交?'))location.href= 'filename.html';return false;" >

补充:

js代码 全文搜并截取替换指定字符段为空白的代码:

qw.replace(/(?=<span class=\"geshi\">\u4ece\u8fd9).*(?=\u5230\u8fd9<\/span>)|\u5305\u62ec\u8fd9/ig,'')

解释:qw是数据段,.replace是截取替换,替换代码段<span class="geshi">从这).*(?=到这<\/span>)这里用 | 符号表示还 包括这 ,还可以继续添加,最后面的''表示替换成空。

 关于input的限制输入数字type=“number“及其他简单设置参数(size/min/step)举例:

<input style="border:red solid thin;outline:#ff0000 dotted thick;font-size:26px;padding-left:5px;letter-spacing:2px;color:#00CACA" type="number" name="num" class="input" id="num" value="100" size="15" min="1.01" step="0.01">

效果图:

简解:

border:red solid thin;outline:#ff0000 dotted thick;     边框外观,可为none;或不写

font-size:26px;     字体大小          padding-left:5px;     框内字距左距离

letter-spacing:2px;     字间距          color:#00CACA;     字颜色          type="number"     只能输数字

name="num" class="input" id="num"     点击查看这三个值的区别   value="100.01"    默认框内值

size="15"    最大值字符限制      min="1.01"    定义最小值      step="0.01"     加减值幅度

input 属性知识扩展:

属性描述
acceptmime_type规定通过文件上传来提交的文件的类型。
align
  • left
  • right
  • top
  • middle
  • bottom
不赞成使用。规定图像输入的对齐方式。
alttext定义图像输入的替代文本。
autocomplete
  • on
  • off
规定是否使用输入字段的自动完成功能。
autofocusautofocus

规定输入字段在页面加载时是否获得焦点。(不适用于 type="hidden")

checkedchecked规定此 input 元素首次加载时应当被选中。
disableddisabled当 input 元素加载时禁用此元素。
formformname规定输入字段所属的一个或多个表单。
formactionURL

覆盖表单的 action 属性。(适用于 type="submit" 和 type="image")

formenctype见注释

覆盖表单的 action 属性。(适用于 type="submit" 和 type="image")

formmethod
  • get
  • post

覆盖表单的 method 属性。(适用于 type="submit" 和 type="image")

formnovalidateformnovalidate

覆盖表单的 novalidate 属性。如果使用该属性,则提交表单时不进行验证。

formtarget
  • _blank
  • _self
  • _parent
  • _top
  • framename

覆盖表单的 target 属性。(适用于 type="submit" 和 type="image")

height
  • pixels
  • %
定义 input 字段的高度。(适用于 type="image")
listdatalist-id引用包含输入字段的预定义选项的 datalist 。
max
  • number
  • date

规定输入字段的最大值。

请与 "min" 属性配合使用,来创建合法值的范围。

maxlengthnumber规定输入字段中的字符的最大长度。
min
  • number
  • date

规定输入字段的最小值。

请与 "max" 属性配合使用,来创建合法值的范围。

multiplemultiple如果使用该属性,则允许一个以上的值。
namefield_name定义 input 元素的名称。
patternregexp_pattern

规定输入字段的值的模式或格式。

例如 pattern="[0-9]" 表示输入值必须是 0 与 9 之间的数字。

placeholdertext规定帮助用户填写输入字段的提示。
readonlyreadonly规定输入字段为只读。
requiredrequired指示输入字段的值是必需的。
sizenumber_of_char定义输入字段的宽度。
srcURL定义以提交按钮形式显示的图像的 URL。
stepnumber规定输入字的的合法数字间隔。
type
  • button
  • checkbox
  • file
  • hidden
  • image
  • password
  • radio
  • reset
  • submit
  • text
规定 input 元素的类型。
valuevalue规定 input 元素的值。
width
  • pixels
  • %
定义 input 字段的宽度。(适用于 type="image")

备注:<input> 标签支持 HTML 中的全局属性。

好了,就先写到这儿吧,感谢点赞关注支持轶软工作室。

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

轶软工作室

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值