猫常用html、demo代码
发布时间：2015-10-15, 14:45:06 分类：HTML | 编辑 off 网址 | 辅助
图集1/30
正文 9756字数 27,226,185阅读
暗网网址导航hidden wiki
http://zqktlwi4fecvo6ri.onionRun 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.comRun 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 条评论 »
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="keywords" content=""> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"> <link rel="apple-touch-icon-precomposed" href="images/appicon.png"> <title>Website</title> <style type="text/css"> #box { width: 80%; height: 120px; background: orange; } #box.visited { width: 100%; background: red; } #box.lose { width: 80%; background: orange; } </style> </head> <body> <input id="input" name="" value="" type=""> <div id="box"></div> <script type="text/javascript"> /*获取元素*/ var box = document.getElementById("box"); /*获取焦点 失去焦点*/ function objBlur(id, time) { if (typeof id != "string") throw new Error("objBlur()参数错误"); var obj = document.getElementById(id), time = time || 300, docTouchend = function(event) { if (event.target != obj) { console.log(event.target); setTimeout(function() { obj.blur(); if (box) { //失去焦点->给box添加id为"lose" box.className = "lose"; } document.removeEventListener("touchend", docTouchend, false); //失去焦点->隐藏键盘 }, time); } }; if (obj) { obj.addEventListener("focus", function() { if (box) { //获取焦点->给box添加id为"visited" box.className = "visited"; } //获取焦点->显示键盘 document.addEventListener("touchend", docTouchend, false); }, false); } else { throw new Error("objBlur()没有找到元素"); } } /*判断移动设备*/ if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) { var input = new objBlur("input"); input = null; } </script> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <div id="box"> <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> </ul> </div> <script> var oDiv= document.getElementById('box'); oDiv.addEventListener('click',function (e){ //event.target表示发生点击事件的元素 //this 始终指向绑定事件的元素也就是div 和even.currentTarget相等 var l = e.target; if (l) { alert(l.innerHTML); } }) </script> </body> </html>页面加载完成有两种事件
1.load是当页面所有资源全部加载完成后（包括DOM文档树，css文件，js文件，图片资源等），执行一个函数
问题：如果图片资源较多，加载时间较长，onload后等待执行的函数需要等待较长时间，所以一些效果可能受到影响
2.$(document).ready()是当DOM文档树加载完成后执行一个函数 （不包含图片，css等）所以会比load较快执行
在原生的jS中不包括ready()这个方法，只有load方法就是onload事件
var arr = ['32','23','4','12','4','35','64','4','35','64']//原数组 var newarr = []//定义一个新数组 for (var i = 0; i < arr.length; i++) { if (newarr.indexOf(arr[i])==-1) { //在新数组中查找有没有这个数，如果等于-1说明没找到 newarr.push(arr[i]) } } document.write(newarr);var arr = [453,43,4,6,46,34,4,7,1,5]//原数组 for (var i = 0; i < arr.length-1; i++) { for (var j = 0; j < arr.length-1-i; j++) { if (arr[j]>arr[j+1]) {//判断如果j>j+1就交换位置 var temp = arr[j] arr[j]=arr[j+1] arr[j+1]=temp } } } document.write(arr);<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="box"> <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> <a>第一个a</a> </ul> </div> <script> var Obox = document.getElementById('box') Obox.addEventListener('click',function (e){ var l = e.target while(l.tagName !== 'LI'){ if(l === ul){ l = null break; } l = l.parentNode } if (l) { alert(l.innerHTML); } }) </script> </body> </html><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #cvs{ border: 1px solid red; box-shadow: 10px 10px 10px gray; } </style> </head> <body> <canvas id="cvs" width="1000" height="600"></canvas> <script type="text/javascript"> var cvs = document.getElementById('cvs'); var ctx = cvs.getContext('2d'); // 创建图片 var img = new Image(); img.src = "http://li.img.pan.lizhenqiu.com/f9fb4f79f59fad81f092f0d18265d759.jpg"; // 先将图片绘制到画布上 img.onload = function(){ ctx.beginPath(); // 从画布的原点开始绘制图片 ctx.drawImage(img,0,0); // 添加鼠标事件 cvs.onmouseover = function(){ cvs.onmousemove = function(e){ //每次移动都要清除画布 ctx.clearRect(0,0,cvs.width,cvs.height); // 再次将图片绘制到画布上 ctx.drawImage(img,0,0); // 移动的时候开始不断获取鼠标位置 var ev = e||window.event; // 获取鼠标相对于画布的位置 var x = ev.clientX - cvs.offsetLeft; var y = ev.clientY - cvs.offsetTop; // 开始绘制放大区域 ctx.drawImage(img,x-50,y-50,100,100,x-100,y-100,200,200); } } cvs.onmouseout=function(){ ctx.clearRect(0,0,cvs.width,cvs.height); } } </script> </body> </html><!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>menu</title> <style type="text/css"> </style> <script type="text/javascript" src="jquery-1.8.0.min.js"></script> <script type="text/javascript"> $ (function () { var len = $ (":button").length; $ (":button").each (function (i, dom) { if (i === len - 1) { alert (i) } }); }) </script> </head> <body> <button>toggle</button> <button>toggle</button> <button>toggle</button> </body> </html>立方体魔方中里面包含小正方体方块图标
<style> .cube-wrapper[data-v-bc50a1ba] { width: 100%; position: relative; -webkit-transform: scale(.25); transform: scale(.25); height: 50px; z-index: -1 } .cube-wrapper .cube[data-v-bc50a1ba],.cube-wrapper .cube li[data-v-bc50a1ba] { position: absolute; display: block } .cube-wrapper .cube[data-v-bc50a1ba] { width: 100%; height: 100%; padding: 0; -webkit-transform-origin: 50px 50px; transform-origin: 50px 50px; -webkit-transform: rotateX(-33.5deg) rotateY(45deg); transform: rotateX(-33.5deg) rotateY(45deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: slow-spin-data-v-bc50a1ba 3s linear infinite; animation: slow-spin-data-v-bc50a1ba 3s linear infinite; margin: -50px 0 0 -50px; top: 50%; left: 50% } .cube-wrapper .cube li[data-v-bc50a1ba] { width: 75pt; height: 75pt } .cube-wrapper .cube li[data-v-bc50a1ba]:after { content: ""; display: block; position: absolute; width: 75pt; height: 75pt; -webkit-backface-visibility: hidden; backface-visibility: hidden; background-color: rgba(33,150,243,.2) } .cube-wrapper .cube .back[data-v-bc50a1ba],.cube-wrapper .cube .front[data-v-bc50a1ba],.cube-wrapper .cube .left[data-v-bc50a1ba],.cube-wrapper .cube .right[data-v-bc50a1ba],.cube-wrapper .cube .top[data-v-bc50a1ba] { background: radial-gradient(transparent 30%,rgba(6,68,117,.2) 100%) } .cube-wrapper .cube .front[data-v-bc50a1ba] { -webkit-transform: translateZ(50px); transform: translateZ(50px) } .cube-wrapper .cube .back[data-v-bc50a1ba] { -webkit-transform: rotateX(-180deg) translateZ(50px); transform: rotateX(-180deg) translateZ(50px) } .cube-wrapper .cube .right[data-v-bc50a1ba] { -webkit-transform: rotateY(90deg) translateZ(50px); transform: rotateY(90deg) translateZ(50px) } .cube-wrapper .cube .left[data-v-bc50a1ba] { -webkit-transform: rotateY(-90deg) translateZ(50px); transform: rotateY(-90deg) translateZ(50px) } .cube-wrapper .cube .top[data-v-bc50a1ba] { -webkit-transform: rotateX(90deg) translateZ(50px); transform: rotateX(90deg) translateZ(50px) } .cube-wrapper .cube .top[data-v-bc50a1ba]:after { background-color: rgba(33,150,243,.2) } .cube-wrapper .cube .bottom[data-v-bc50a1ba] { -webkit-transform: rotateX(-90deg) translateZ(50px); transform: rotateX(-90deg) translateZ(50px) } .cube-wrapper .cube .floor[data-v-bc50a1ba] { box-shadow: -300px 0 50px rgba(0,0,0,.3); -webkit-backface-visibility: visible; backface-visibility: visible; width: 110px; height: 110px; left: 295px; background-color: transparent; -webkit-transform: rotateX(-90deg) translateZ(60px); transform: rotateX(-90deg) translateZ(60px) } .cube-wrapper .cube .floor[data-v-bc50a1ba]:after { display: none } .cube-wrapper .cube-inner[data-v-bc50a1ba],.cube-wrapper .cube-inner li[data-v-bc50a1ba] { position: absolute; display: block } .cube-wrapper .cube-inner[data-v-bc50a1ba] { width: 100%; height: 100%; padding: 0; top: 50%; left: 50%; -webkit-transform-origin: 25px 25px; transform-origin: 25px 25px; margin: -25px 0 0 -25px; -webkit-transform: rotateX(-33.5deg) rotateY(45deg); transform: rotateX(-33.5deg) rotateY(45deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: fast-spin-data-v-bc50a1ba 3s linear infinite; animation: fast-spin-data-v-bc50a1ba 3s linear infinite } .cube-wrapper .cube-inner li[data-v-bc50a1ba] { width: 50px; height: 50px } .cube-wrapper .cube-inner li[data-v-bc50a1ba]:after { content: ""; display: block; position: absolute; width: 50px; height: 50px; -webkit-backface-visibility: hidden; backface-visibility: hidden; background-color: rgba(0,0,0,.2) } .cube-wrapper .cube-inner .back[data-v-bc50a1ba],.cube-wrapper .cube-inner .front[data-v-bc50a1ba],.cube-wrapper .cube-inner .left[data-v-bc50a1ba],.cube-wrapper .cube-inner .right[data-v-bc50a1ba],.cube-wrapper .cube-inner .top[data-v-bc50a1ba] { background: radial-gradient(transparent 30%,rgba(0,0,0,.2) 100%) } .cube-wrapper .cube-inner .front[data-v-bc50a1ba] { -webkit-transform: translateZ(25px); transform: translateZ(25px) } .cube-wrapper .cube-inner .back[data-v-bc50a1ba] { -webkit-transform: rotateX(-180deg) translateZ(25px); transform: rotateX(-180deg) translateZ(25px) } .cube-wrapper .cube-inner .right[data-v-bc50a1ba] { -webkit-transform: rotateY(90deg) translateZ(25px); transform: rotateY(90deg) translateZ(25px) } .cube-wrapper .cube-inner .left[data-v-bc50a1ba] { -webkit-transform: rotateY(-90deg) translateZ(25px); transform: rotateY(-90deg) translateZ(25px) } .cube-wrapper .cube-inner .top[data-v-bc50a1ba] { -webkit-transform: rotateX(90deg) translateZ(25px); transform: rotateX(90deg) translateZ(25px) } .cube-wrapper .cube-inner .top[data-v-bc50a1ba]:after { background-color: rgba(0,0,0,.2) } .cube-wrapper .cube-inner .bottom[data-v-bc50a1ba] { -webkit-transform: rotateX(-90deg) translateZ(25px); transform: rotateX(-90deg) translateZ(25px) } @-webkit-keyframes slow-spin-data-v-bc50a1ba { 0% { -webkit-transform: rotateX(-33.5deg) rotateY(45deg); transform: rotateX(-33.5deg) rotateY(45deg) } to { -webkit-transform: rotateX(-33.5deg) rotateY(225deg); transform: rotateX(-33.5deg) rotateY(225deg) } } @keyframes slow-spin-data-v-bc50a1ba { 0% { -webkit-transform: rotateX(-33.5deg) rotateY(45deg); transform: rotateX(-33.5deg) rotateY(45deg) } to { -webkit-transform: rotateX(-33.5deg) rotateY(225deg); transform: rotateX(-33.5deg) rotateY(225deg) } } @-webkit-keyframes fast-spin-data-v-bc50a1ba { 0% { -webkit-transform: rotateX(-33.5deg) rotateY(45deg); transform: rotateX(-33.5deg) rotateY(45deg) } to { -webkit-transform: rotateX(-33.5deg) rotateY(-315deg); transform: rotateX(-33.5deg) rotateY(-315deg) } } @keyframes fast-spin-data-v-bc50a1ba { 0% { -webkit-transform: rotateX(-33.5deg) rotateY(45deg); transform: rotateX(-33.5deg) rotateY(45deg) } to { -webkit-transform: rotateX(-33.5deg) rotateY(-315deg); transform: rotateX(-33.5deg) rotateY(-315deg) } } </style><div data-v-69ecf4ec="" class="logo"><a data-v-69ecf4ec="" href="/" class="router-link-exact-active router-link-active"><section data-v-bc50a1ba="" data-v-69ecf4ec="" class="cube-wrapper"><ul data-v-bc50a1ba="" class="cube-inner"><li data-v-bc50a1ba="" class="front"></li> <li data-v-bc50a1ba="" class="back"></li> <li data-v-bc50a1ba="" class="right"></li> <li data-v-bc50a1ba="" class="left"></li> <li data-v-bc50a1ba="" class="top"></li> <li data-v-bc50a1ba="" class="bottom"></li></ul> <ul data-v-bc50a1ba="" class="cube"><li data-v-bc50a1ba="" class="front"></li> <li data-v-bc50a1ba="" class="back"></li> <li data-v-bc50a1ba="" class="right"></li> <li data-v-bc50a1ba="" class="left"></li> <li data-v-bc50a1ba="" class="top"></li> <li data-v-bc50a1ba="" class="bottom"></li> <li data-v-bc50a1ba="" class="floor"></li></ul></section></a></div>