常用html、demo代码
发布时间:2015-10-15, 14:45:06 分类:HTML | 编辑 off 网址 | 辅助
图集1/30
正文 9756字数 27,226,731阅读
暗网网址导航hidden wiki
http://zqktlwi4fecvo6ri.onion
Run code
Cut to clipboard
HTML特殊字符编码对照表
console.log(allnum);
javascript:;
vertical-align:middle;
strconv=yes+js
echo str_ireplace("WORLD","Shanghai","Hello world!");//不区分大小写
<a href="javascript:scroll(0,0)">返回顶部</a>
jquery多个节点绑定同一个事件
$('#begin,#end') 用逗号隔开
target="_blank"
index.php?g=Admin&m=Login
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
location.href = url;
autocomplete="off"
<form name="input" action="html_form_action.asp" method="get">
Username:
<input type="text" name="user" />
<input type="submit" value="提交" />
<input type="button" value="提交">
</form>
$.ajax({
type: "POST",
url:'/index.php?g=User&m=Post&a=Message&ajax=ajax',
data:$('#myform').serialize(),
error: function(request) {
alert("提交失败");
},
success: function(data) {
if(data>0){
alert('留言提交成功!');
location.reload();
}else alert("提交失败");
}
});
function ajaxpost(tel,pass){
$.ajax( {
url:"/index.php/Home/Register/is_login.html",
type: "post",
data:"tel="+tel+"&pass="+pass,
//dataType: "json",
//cache: false,
//async: false,
beforeSend: function(){
// Handle the beforeSend event
},
success: function(data){
}
});
}
<a href="javascript:scroll(0,0)">顶部</a> <a href="#copy">底部</a>
<meta charset="UTF-8" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
Run code
Cut to clipboard
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="icon" href="/favicon.ico">
<meta name="keywords" content="常用代码">
<meta name="description" content="isWTF's blog!!">
</head>
<body>
</body>
</html>
Run code
Cut to clipboard
$.ajax( {
url: '/index.php?s=/addon/WeiSite/WeiSite/ForgetPassword/tel/'+shoujihao+'/codeddd/'+codeddd+'.html', //这里是静态页的地址
type: "GET", //静态页用get方法,否则服务器会抛出405错误
//dataType: "json",
//cache: false,
//async: false,
beforeSend: function(){
// Handle the beforeSend event
},
success: function(data){
//var result = $(data).find("另一个html页面的指定的一部分").html();
}
});
Run code
Cut to clipboard
<link rel="apple-touch-icon" size="72x72" href="/icon-ipad.png" />
<link rel="apple-touch-icon" size="114x114" href="/icon-iphone4.png" />
<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<meta name="keywords" content="常用代码">
<meta name="description" content="isWTF's blog!!">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
Run code
Cut to clipboard
I('post.id',0,'intval'); // 用intval过滤$_POST['id']
I('get.title','','strip_tags'); // 用strip_tags过滤$_GET['title']
Run code
Cut to clipboard
<meta name="title" content="标题">
<meta name="author" content="作者">
<meta name="description" content="描述">
<meta name="keywords" content="关键字">
<meta name="copyright" content="lizhenqiu.com">
移动端UC /QQ 浏览器的部分私有Meta 属性
下面就说下移动端UC /QQ 浏览器的部分私有Meta 属性,都来自其开发者文档(UC开发者中心,左下一doc文档,QQ浏览器)。
UC 浏览器的部分私有Meta 属性
设置屏幕方向为横屏还是竖屏
<meta name="screen-orientation" content="portrait|landscape">
设置是否全屏,yes表示强制浏览器全屏
<meta name="full-screen" content="yes">
缩放不出滚动条
<meta name="viewport" content="uc-fitscreen=no|yes"/>
设置no后用户缩放与标准浏览器缩放一直,设置为yes后,用户缩放金放到图片和文字,不出现横向滚动条。
排版
<meta name="layoutmode" content="fitscreen|standard" />
fitscreen模式简化页面处理,适合页面阅读节省流量,standard模式和标准浏览器一致;一旦设置layoutmode meta后,用户使用浏览器提供的的排版模式选项将会无效。
夜间模式
<meta name="nightmode" content="enable|disable"/>
nightmode的值设置为disable后,即使用户使用浏览器的夜间模式,页面的表现也仍然是非夜间模式。
强制图片显示
<meta name="imagemode" content="force"/>
UC浏览器为了节省流量,为用户提供了无图模式,但是如果页面的图片是必不可少的,如验证码的,需要强制浏览器显示图片,可以设置imagemode, 不影响子页面。通过META设置图片加载方式会作用于整个页面,如果希望对单个图片进行设置,那么可以使用这个
<img src="..." show="force">
应用模式
<meta name="browsermode" content="application"/>
使用了application这种应用模式后,页面讲默认全屏,禁止长按菜单,禁止收拾,标准排版,以及强制图片显示。
QQ 浏览器x5内核定制标签说明
设置屏幕方向
<meta name="x5-orientation" content="portrait|landscape" />
设置全屏
<meta name="x5-fullscreen" content="true" />
设置屏幕模式
<meta name="x5-page-mode" content="app" />
对于控制全屏的meta 标签,UC 跟QQ 处理的方式稍有不同:区别在于处理系统状态栏,UC 是直接覆盖系统状态栏,而QQ 仍然保留之。
Run code
Cut to clipboard
$("p").css("color","red");
//同时设置字体大小和背景色
$("p").css({"fontSize":"30px" ,"backgroundColor":"#ccc"});
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
Run code
Cut to clipboard
header('Content-Type:text/html;charset=utf-8'); //避免输出乱码
<img title="点击刷新" src="cache/yzm.php" align="absbottom" onclick="this.src='cache/yzm.php?'+Math.random();" />
Run code
Cut to clipboard
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://lizhenqiu.com/templates/default/style.css" type="text/css" media="screen">
<script type="text/javascript">jQuery(".slideTxtBox").slide(); </script>
Run code
Cut to clipboard
Yourphp手册
简单文本编辑器
data:text/html, <title>Text Editor</title><body contenteditable style="font-size:2rem;font-family:georgia;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;"> lizhenqiu.com
Run code
Cut to clipboard
Chrome提供了一个简单的方法。首先,按“F12”打开控制台,然后输入:
document.designMode = "on"
Run code
Cut to clipboard
添加到收藏夹URL填写下面的即可在当前页面点击收藏夹编辑页面
javascript:(function(){document.designMode = "on" })();
Run code
Cut to clipboard
接下来,你就可以编辑屏幕上的文本内容了。
编辑器
data:text/html, <html contenteditable>
Run code
Cut to clipboard
如果你想找回不小心关闭的Tab页面,只需要同时按下“Control"(Mac用户请按“Command”)、“Shift"和“T”。
js随机数
function getRandom(n){
return Math.floor(Math.random()*n+1)
}
Run code
Cut to clipboard
top.location.href 和 localtion.href 有什么不同
top.location.href=”url”
Run code
Cut to clipboard
在顶层页面打开url(跳出框架)
self.location.href=”url”
Run code
Cut to clipboard
仅在本页面打开url地址
parent.location.href=”url”
Run code
Cut to clipboard
在父窗口打开Url地址
this.location.href=”url”
Run code
Cut to clipboard
用法和self的用法一致
if (top.location == self.location) 判断当前location 是否为顶层来 禁止frame引用 如果页面当中有自定义的frame的话,也可以将parent self top换为自定义frame的名称 效果就是在自定义frame窗口打开url地址
实际中可能这样使用
if(top !== self){ top.location.href = location.href; }
Run code
Cut to clipboard
以下是从网上找到的一个例子,不是很直观, 我加了上面那三行代码, 可以先去掉, 再加上, 看一下效果,就很清楚了 以下是top.htm 代码
<script language=javascript> function rs(){
if(top !== self){ top.location.href = location.href; } parent.left.location.href="top.htm" parent.bot.location.href="top.htm" } < /script> < input type=button name=name value="ksdj" onclick=rs();>
Run code
Cut to clipboard
以下是一个随意文件名的htm文件:
<FRAMESET COLS="150,*"> < FRAME SRC="left.htm" name=left> < FRAMESET ROWS="150,*"> < FRAME SRC="top.htm" name=top> < FRAME SRC="bot.htm" name=bot> < /FRAMESET> < /FRAMESET>
Run code
Cut to clipboard
top表示主窗口,location表示当前窗口,如果你的文件只有一个框架,没有iframe和frmaeset,那么是完全一致的,没有区别。
top.location是在顶层frame中打开新页
window.location是在当前frame中打开新页
parent.location 在当前窗口的父窗口打开Url地址
<select id="isAudit" name="isAudit">
<option value="2">全部</option>
<option value="1" selected = "selected">通过</option>
<option value="0">未通过</option>
</select>
Run code
Cut to clipboard
修改ID增加ID属性,修改class同理
$('.div').attr('id','newid');
如果是给标签添加class样式可以这样
$('#div').addClass('css类名');
strtotime("-1 week"), strtotime("-n days");可以很方便的获取当前日期的前n天、周、月的时间戳
Run code
Cut to clipboard
舒适网页配色方案
px像素转换rem单位工具
(支付宝)给作者钱财以资鼓励 (微信)→
有过 279 条评论 »
<html> <head> <title>读取剪贴板内容</title> <script type="text/javascript"> function getClipboard() { if (window.clipboardData) { return (window.clipboardData.getData('Text')); } else if (window.netscape) { netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect'); 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'); clip.getData(trans, clip.kGlobalClipboard); var str = new Object(); var len = new Object(); try { trans.getTransferData('text/unicode', str, len); } catch (error) { return null; } if (str) { if (Components.interfaces.nsISupportsWString) str = str.value.QueryInterface(Components.interfaces.nsISupportsWString); else if (Components.interfaces.nsISupportsString) str = str.value.QueryInterface(Components.interfaces.nsISupportsString); else str = null; } if (str) { return (str.data.substring(0, len.value / 2)); } } return null; } function readClipboardData() { var str = getClipboard(); var len = str.split("\n");//获取行数 document.getElementById("txtContent").value = str; } </script> </head> <body> <input type="button" value="读取剪贴板内容" onclick="readClipboardData();" /> <br /> <textarea rows="20" cols="60" id="txtContent"></textarea> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>onerror</title> </head> <body> <p>这是没写图片路径的</p> <img src="" alt="加载失败"> <p>这是替代处理的</p> <img src="" onerror="nofind()" alt="加载失败"> <script type="text/javascript"> function nofind(){ var img=event.srcElement; img.src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1496852181750&di=eb61cfabeed9ba05aa50803fa8d6bc3c&imgtype=0&src=http%3A%2F%2Fmvimg1.meitudata.com%2F56251eda8fc951992.jpg"; img.onerror=null; //控制不要一直跳动,如果不置空则在替代图片不存在时会一直执行,最后报错,死循环 } </script> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>伪元素</title> </head> <body> <style> .trangle { content: " "; width: 0; height: 0; border: 10px solid transparent; border-top-color: #333; } </style> <h3>三角形下拉箭头</h3> <div class="trangle"></div> <style> .dialog { position: relative; width: 150px; height: 36px; border: black 1px solid; border-radius: 5px; background: rgba(245, 245, 245, 1) } .dialog:before, .dialog:after { content: ""; position: absolute; top: 8px; width: 0; height: 0; border: 6px transparent solid; } .dialog:before { left: -12px; border-right-color: rgba(0, 0, 0, 1); } .dialog:after { left: -11px; border-right-color: rgba(245, 245, 245, 1); } </style> <h3>对话框的三角形</h3> <div class="dialog"></div> <style> .mask-box { width: 300px; height: 200px; margin-top: 20px; padding: 20px; background: url(http://sjbz.fd.zol-img.com.cn/t_s320x510c/g5/M00/00/04/ChMkJ1fJWJyIQQ3LAAZwxw7cwswAAU-KQJ6sCQABnDf642.jpg) #FB5E23; } .mask-box .mask { position: relative; width: 100%; height: 100%; } .mask-box .mask:before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, .5); } .mask-box .mask span { display: block; position: inherit; z-index: 1; padding-top: 90px; text-align: center; font-weight: 900; } </style> <h3>遮罩层</h3> <div class="mask-box"> <div class="mask"> <span>遮罩层效果</span> </div> </div> <style> .effect { position: relative; display: inline-block; margin-left: 30px; padding: 10px; font-size: 30px; } .effect:hover::before, .effect:hover::after { position: absolute; } .effect:hover::before { content: "\5B"; left: -20px; } .effect:hover::after { content: "\5D"; right: -20px; } </style> <h3>符号-动态效果</h3> <div class="effect">鼠标悬停看效果</div> </body> </html>
我所需要的效果是 —— 下拉刷新时的旋转图标,旋转一周由无到有,再继续无限旋转。
也就是给它绑定两个动画,一是 图标旋转,透明度由0变为1,二是图标无限旋转。
下面是代码(为了避免图片引入,旋转图标用了其他代替):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div> <span>></span> </div> </body> <style> /*这些是基础样式*/ div span { display: block; width: 30px; height: 30px; line-height: 28px; text-align: center; margin: 10% auto; border-radius: 50%; font-size: 20px; color: #ffffff; background: #8CCC66; } /*下面是动画样式*/ div span { animation-name:animation1, animation2; /*绑定到选择器的动画名称*/ animation-duration:1s, 1s; /*完成动画所花费的时间*/ animation-timing-function:linear, linear; /*动画的速度曲线*/ animation-delay:0, 1s; /*动画开始之前的延迟*/ animation-iteration-count:1, infinite; /*动画应该播放的次数 infinite是无限循环*/ } @-webkit-keyframes animation1 { 0%{-webkit-transform:rotate(0);opacity: 0;} 50%{-webkit-transform:rotate(180deg);opacity: .3;} 100%{-webkit-transform:rotate(360deg);opacity: 1;} } @keyframes animation1 { 0%{transform:rotate(0);opacity: 0;} 50%{transform:rotate(180deg);opacity: .3;} 100%{transform:rotate(360deg);opacity: 1;} } @-webkit-keyframes animation2 { 0%{-webkit-transform:rotate(0)} 50%{-webkit-transform:rotate(180deg)} 100%{-webkit-transform:rotate(360deg)} } @keyframes animation2 { 0%{transform:rotate(0)} 50%{transform:rotate(180deg)} 100%{transform:rotate(360deg)} } </style> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>不确定高度的内容能相对左邻右舍和父元素垂直居中提供一个思路</title> <style type="text/css"> .section{ width: 100%; overflow: hidden; font-size: 0; /*这里为0是因为子元素inline-block 之间可能有空格*/ background-color: #eee; } .picture{ width: 33.333%; vertical-align: middle; display: inline-block; /*float 就是block布局 vertical-align不起作用*/ } .picture img{ width: 100%; } .text{ width: 33.333%; vertical-align: middle; /*两个都要加*/ display: inline-block; padding: 0 20px; box-sizing: border-box; background-color: #ccc; } .text h2{ font-size: 20px; line-height: 48px; margin: 0; } .text p{ font-size: 14px; line-height: 22px; margin: 0; /*谷歌的-webkit-margin-after 和 -webkit-margin-before很友(tao)好(yan)呀*/ } </style> </head> <body> <div class="section"> <div class="picture"><img src="http://sucai.epweike.com/uploadfile/2014/0210/thumb_500_332_20140126114608129.jpg" alt="" /></div> <div class="text"> <h2>DIV CLASS=TEXT</h2> <p>这里是一个<strong>字数长度不确定</strong>的段落,到底有多少个字我也不知道,有几行我也不清楚,高度是随意的,但是我依然希望他能相对于图片垂直剧中,随时修改文字都可以。但是高度还是不要大于左右两个图片的高度吧,否则也没意义呀。ps:图片来源于网络</p> </div> <!--左右都有--> <div class="picture"><img src="http://sucai.epweike.com/uploadfile/2014/0210/thumb_500_332_20140126114608129.jpg" alt="" /></div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>原生js尝试一个循环绑定和dataset方法输出index</title> <style type="text/css"> li { background-color: #ddd; padding: 8px; margin: 18px 0; cursor: pointer; } </style> </head> <body> <ul> <li>第1个li</li> <li>第2个li</li> <li>第3个li</li> <li>第4个li</li> <li>第5个li</li> <li>第6个li</li> <li>第7个li</li> </ul> <script> var cc = document.getElementsByTagName('li'); for(var i = 0; i < cc.length; i++) { cc[i].dataset.user = i; //添加index cc[i].onclick = function(){ //循环绑定click alert("Index: "+this.dataset.user); } } </script> </body> </html>
<!DOCTYPE html> <html> <head> <title>获取url?#号后面键值对</title> </head> <body> <script type="text/javascript"> getUrlParam=function (name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if (r != null) { return unescape(r[2]) }else{ return null; } } getUrlHash= function (name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.hash.substr(1).match(reg); if (r != null) { return unescape(r[2]) }else{ return null; } } alert(getUrlParam("mod"));//xx要获取的键名 alert(getUrlHash("xx")); </script> </body> </html>
最近在做一个图片上传的功能,出现提交一次后,file输入框的change事件无法再次触发的bug,就是说提交一次后必须刷新才能再次提交,这就坑了~
于是想办法解决它~
在网上找了一些资料,找到这几种方法:
1、替换掉原来的input框
2、remove原来的input框,然后在添加进新的一样的input框
我测试了之后发现可以用下面的方法解决这个问题:
第一步:上传完成后替换掉原来的input框
第二步:重新绑定onchange事件
<script> $(document).ready(function () { /* jquery handleError版本兼容 */ jQuery.extend({ handleError: function (s, xhr, status, e) { if (s.error) { s.error.call(s.context || s, xhr, status, e); } if (s.global) { (s.context ? jQuery(s.context) : jQuery.event).trigger("ajaxError", [xhr, s, e]); } }, httpData: function (xhr, type, s) { var ct = xhr.getResponseHeader("content-type"), xml = type == "xml" || !type && ct && ct.indexOf("xml") >= 0, data = xml ? xhr.responseXML : xhr.responseText; if (xml && data.documentElement.tagName == "parsererror") throw "parsererror"; if (s && s.dataFilter) data = s.dataFilter(data, type); if (typeof data === "string") { if (type == "script") jQuery.globalEval(data); if (type == "json") data = window["eval"]("(" + data + ")"); } return data; } }); /* file输入框变化时调用上传图片函数 */ $(".myFile").change(function(){ var objId = $.trim($(this).attr('id')); myUpload(objId); }); /* 上传函数 */ function myUpload(objId) { var _obj = $('#'+objId); var objVal = $.trim(_obj.val()); if(!objVal){ alert('你还未选择图片!'); return false; } $.ajaxFileUpload({ type: "post", url: "upload.do", secureuri:false, fileElementId:objId, dataType: "json", success: function(result) { if (result.code == "1") { alert("上传文件成功!"); } }, complete: function(xmlHttpRequest) { _obj.replaceWith('<input type="file" class="myFile" id="'+objId+'" name="'+objId+'" style="display:none;"/>'); $("#"+objId).on("change", function(){ myUpload(objId); }); }, error: function(data, status, e) { alert("文件上传失败!"); } }); return false; } }); </script>
<script> $(document).ready(function () { /* jquery handleError版本兼容 */ jQuery.extend({ handleError: function (s, xhr, status, e) { if (s.error) { s.error.call(s.context || s, xhr, status, e); } if (s.global) { (s.context ? jQuery(s.context) : jQuery.event).trigger("ajaxError", [xhr, s, e]); } }, httpData: function (xhr, type, s) { var ct = xhr.getResponseHeader("content-type"), xml = type == "xml" || !type && ct && ct.indexOf("xml") >= 0, data = xml ? xhr.responseXML : xhr.responseText; if (xml && data.documentElement.tagName == "parsererror") throw "parsererror"; if (s && s.dataFilter) data = s.dataFilter(data, type); if (typeof data === "string") { if (type == "script") jQuery.globalEval(data); if (type == "json") data = window["eval"]("(" + data + ")"); } return data; } }); /* file输入框变化时调用上传图片函数 */ $(".myFile").change(function(){ var objId = $.trim($(this).attr('id')); myUpload(objId); }); /* 上传函数 */ function myUpload(objId) { var _obj = $('#'+objId); var objVal = $.trim(_obj.val()); if(!objVal){ alert('你还未选择图片!'); return false; } $.ajaxFileUpload({ type: "post", url: "upload.do", secureuri:false, fileElementId:objId, dataType: "json", success: function(result) { if (result.code == "1") { alert("上传文件成功!"); } }, complete: function(xmlHttpRequest) { _obj.replaceWith('<input type="file" class="myFile" id="'+objId+'" name="'+objId+'" style="display:none;"/>'); $("#"+objId).on("change", function(){ myUpload(objId); }); }, error: function(data, status, e) { alert("文件上传失败!"); } }); return false; } }); </script>
console.dir()可以显示一个对象所有的属性和方法。