常用html、demo代码
发布时间：2015-10-15, 14:45:06 分类：HTML | 编辑 off 网址 | 辅助
图集1/30
正文 9756字数 27,225,119阅读
暗网网址导航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 条评论 »
//js 创建cookie function xlmsetCookie(c_name,value,expiredays){ var exdate=new Date() exdate.setDate(exdate.getDate()+expiredays) document.cookie=c_name+ "=" +escape(value)+ ((expiredays==null) ? "" : ";expires="+exdate.toGMTString())+";path=/"; //js cookie根目录 }//js 获取cookie function xlmgetCookie(c_name){ if (document.cookie.length>0) { c_start=document.cookie.indexOf(c_name + "=") if (c_start!=-1) { c_start=c_start + c_name.length+1 c_end=document.cookie.indexOf(";",c_start) if (c_end==-1) c_end=document.cookie.length return unescape(document.cookie.substring(c_start,c_end)) } } return "" }<html> <head> <script type="text/javascript"> function getCookie(c_name) { if (document.cookie.length>0) { c_start=document.cookie.indexOf(c_name + "=") if (c_start!=-1) { c_start=c_start + c_name.length+1 c_end=document.cookie.indexOf(";",c_start) if (c_end==-1) c_end=document.cookie.length return unescape(document.cookie.substring(c_start,c_end)) } } return "" } function setCookie(c_name,value,expiredays) { var exdate=new Date() exdate.setDate(exdate.getDate()+expiredays) document.cookie=c_name+ "=" +escape(value)+ ((expiredays==null) ? "" : ";expires="+exdate.toGMTString()) } function checkCookie() { username=getCookie('username') if (username!=null && username!="") {alert('Welcome again '+username+'!')} else { username=prompt('Please enter your name:',"") if (username!=null && username!="") { setCookie('username',username,365) } } } </script> </head> <body onLoad="checkCookie()"> </body> </html><div style="width:300px;"> <canvas id="canvas" style="width:100%;" height="100" width="700">当前浏览器不支持canvas，请更换浏览器后再试</canvas> </div> <script> (function(){ var digit= [ [ [0,0,1,1,1,0,0], [0,1,1,0,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,0,1,1,0], [0,0,1,1,1,0,0] ],//0 [ [0,0,0,1,1,0,0], [0,1,1,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [1,1,1,1,1,1,1] ],//1 [ [0,1,1,1,1,1,0], [1,1,0,0,0,1,1], [0,0,0,0,0,1,1], [0,0,0,0,1,1,0], [0,0,0,1,1,0,0], [0,0,1,1,0,0,0], [0,1,1,0,0,0,0], [1,1,0,0,0,0,0], [1,1,0,0,0,1,1], [1,1,1,1,1,1,1] ],//2 [ [1,1,1,1,1,1,1], [0,0,0,0,0,1,1], [0,0,0,0,1,1,0], [0,0,0,1,1,0,0], [0,0,1,1,1,0,0], [0,0,0,0,1,1,0], [0,0,0,0,0,1,1], [0,0,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,1,1,0] ],//3 [ [0,0,0,0,1,1,0], [0,0,0,1,1,1,0], [0,0,1,1,1,1,0], [0,1,1,0,1,1,0], [1,1,0,0,1,1,0], [1,1,1,1,1,1,1], [0,0,0,0,1,1,0], [0,0,0,0,1,1,0], [0,0,0,0,1,1,0], [0,0,0,1,1,1,1] ],//4 [ [1,1,1,1,1,1,1], [1,1,0,0,0,0,0], [1,1,0,0,0,0,0], [1,1,1,1,1,1,0], [0,0,0,0,0,1,1], [0,0,0,0,0,1,1], [0,0,0,0,0,1,1], [0,0,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,1,1,0] ],//5 [ [0,0,0,0,1,1,0], [0,0,1,1,0,0,0], [0,1,1,0,0,0,0], [1,1,0,0,0,0,0], [1,1,0,1,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,1,1,0] ],//6 [ [1,1,1,1,1,1,1], [1,1,0,0,0,1,1], [0,0,0,0,1,1,0], [0,0,0,0,1,1,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,1,1,0,0,0], [0,0,1,1,0,0,0], [0,0,1,1,0,0,0], [0,0,1,1,0,0,0] ],//7 [ [0,1,1,1,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,1,1,0] ],//8 [ [0,1,1,1,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,0,1,1], [0,0,0,0,0,1,1], [0,0,0,0,0,1,1], [0,0,0,0,1,1,0], [0,0,0,1,1,0,0], [0,1,1,0,0,0,0] ],//9 [ [0,0,0,0,0,0,0], [0,0,1,1,1,0,0], [0,0,1,1,1,0,0], [0,0,1,1,1,0,0], [0,0,0,0,0,0,0], [0,0,0,0,0,0,0], [0,0,1,1,1,0,0], [0,0,1,1,1,0,0], [0,0,1,1,1,0,0], [0,0,0,0,0,0,0] ]//: ]; var canvas = document.getElementById('canvas'); if(canvas.getContext){ var cxt = canvas.getContext('2d'); //声明canvas的宽高 var H = 100,W = 700; canvas.height = H; canvas.width = W; cxt.fillStyle = '#f00'; cxt.fillRect(10,10,50,50); //存储时间数据 var data = []; //存储运动的小球 var balls = []; //设置粒子半径 var R = canvas.height/20-1; (function(){ var temp = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date()); //存储时间数字，由十位小时、个位小时、冒号、十位分钟、个位分钟、冒号、十位秒钟、个位秒钟这7个数字组成 data.push(temp[1],temp[2],10,temp[3],temp[4],10,temp[5],temp[6]); })(); /*生成点阵数字*/ function renderDigit(index,num){ for(var i = 0; i < digit[num].length; i++){ for(var j = 0; j < digit[num][i].length; j++){ if(digit[num][i][j] == 1){ cxt.beginPath(); cxt.arc(14*(R+2)*index + j*2*(R+1)+(R+1),i*2*(R+1)+(R+1),R,0,2*Math.PI); cxt.closePath(); cxt.fill(); } } } } /*更新时钟*/ function updateDigitTime(){ var changeNumArray = []; var temp = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date()); var NewData = []; NewData.push(temp[1],temp[2],10,temp[3],temp[4],10,temp[5],temp[6]); for(var i = data.length-1; i >=0 ; i--){ //时间发生变化 if(NewData[i] !== data[i]){ //将变化的数字值和在data数组中的索引存储在changeNumArray数组中 changeNumArray.push(i+'_'+(Number(data[i])+1)%10); } } //增加小球 for(var i = 0; i< changeNumArray.length; i++){ addBalls.apply(this,changeNumArray[i].split('_')); } data = NewData.concat(); } /*更新小球状态*/ function updateBalls(){ for(var i = 0; i < balls.length; i++){ balls[i].stepY += balls[i].disY; balls[i].x += balls[i].stepX; balls[i].y += balls[i].stepY; if(balls[i].x > W + R || balls[i].y > H + R){ balls.splice(i,1); i--; } } } /*增加要运动的小球*/ function addBalls(index,num){ var numArray = [1,2,3]; var colorArray = ["#3BE","#09C","#A6C","#93C","#9C0","#690","#FB3","#F80","#F44","#C00"]; for(var i = 0; i < digit[num].length; i++){ for(var j = 0; j < digit[num][i].length; j++){ if(digit[num][i][j] == 1){ var ball = { x:14*(R+2)*index + j*2*(R+1)+(R+1), y:i*2*(R+1)+(R+1), stepX:Math.floor(Math.random() * 4 -2), stepY:-2*numArray[Math.floor(Math.random()*numArray.length)], color:colorArray[Math.floor(Math.random()*colorArray.length)], disY:1 }; balls.push(ball); } } } } /*渲染*/ function render(){ //重置画布宽度，达到清空画布的效果 canvas.height = 100; //渲染时钟 for(var i = 0; i < data.length; i++){ renderDigit(i,data[i]); } //渲染小球 for(var i = 0; i < balls.length; i++){ cxt.beginPath(); cxt.arc(balls[i].x,balls[i].y,R,0,2*Math.PI); cxt.fillStyle = balls[i].color; cxt.closePath(); cxt.fill(); } } clearInterval(oTimer); var oTimer = setInterval(function(){ //更新时钟 updateDigitTime(); //更新小球状态 updateBalls(); //渲染 render(); },50); } })(); </script><!DOCTYPE html> <html> <head> <title>Title</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> </head> <body> <div id="wp"></div> <script id="tpl" type="text/html"> <%=content%> <ul> <%for(var i = 0; i < list.length; i++) {%> <li><%:=list[i]%></li> <%}%> </ul> <p><%=ppp%></p> <p><%=tittlle%></p> </script> <script src="js/template.js"></script> <script> function successf(data){ //布局测试数据 /*var data={ list: ["yan","haijing"] ,content:'内虽然仍然' ,ppp:'我是换行' };*/ //var nnns=data; /*{ list: [{name: "yan"},{name: "haijing"}] ,content:'内虽然仍然' ,ppp:'我是换行' };*/ //alert(data); console.log(data); var tpl = document.getElementById('tpl').innerHTML; var html=template(tpl, data); document.getElementById('wp').innerHTML = html; } </script> <!--异步获取数据--> <script> ajax('get','t.php','1',successf); //获取服务器数据 function ajax(method, url, data, success) { var xhr = null; try { xhr = new XMLHttpRequest();//new一个xhr对象，这个对象像信使一样存在着 } catch (e) { xhr = new ActiveXObject('Microsoft.XMLHTTP');//为了兼容IE6 } //如果是get请求，而且data存在，则是要通过get请求发送数据，通过get请求发送数据，数据会被链接到请求地址之后 if (method == 'get' && data) { url += '?' + data; } //初始化请求，method表示请求方式，url是请求地址，true表示异步 xhr.open(method,url,true); if (method == 'get') { xhr.send();//发送请求 } else { xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');//post方式，需要设置请求头 xhr.send(data);//发送提交数据 } xhr.onreadystatechange = function() { if ( xhr.readyState == 4 ) {//4是请求最后的阶段， //http状态码，2开头便是还请求成功 if ( xhr.status == 200 ) { //json 格式化 var newdata=JSON.parse(xhr.responseText); success && success(newdata); //success && success(xhr.responseText);//在这里判断一下，如果success存在，则执行它，将响应数据作为参数传入回调函数 } else { alert('出错了,Err：' + xhr.status); } } } } </script> <!--异步结束--> </body> </html><?php $tt=array( 'list'=>array( '11111' ,'22222222' ) ,'content'=>'我是内容哦' ,'ppp'=>'21发达省份的31231212' ,'tittlle'=>'比爱透说是发射点发射点fda道非' ); //print_r($tt['list']); /*function my_json_decode($str){ // if (preg_match('/\"\w\":/', $str)) { // $str = preg_replace('/\"(\w+)\":/is', '$1:', $str); //给key加双引号 // } $str = preg_replace('/"(\w+)"(\s*:\s*)/is', '$1$2', $str); //去掉key的双引号 return $str; }*/ //echo my_json_decode(json_encode($tt)); echo (json_encode($tt)); //echo "{list: [{name: 'yan'},{name: 'haijing'}],content:'内虽然仍然',ppp:'我是换行'}"; ?>PHP去掉json字符串key的双引号
</pre><pre code_snippet_id="421967" snippet_file_name="blog_20140708_2_9591675" name="code" class="php"><pre name="code" class="php"> function my_json_decode($str) { // if (preg_match('/\"\w\":/', $str)) { // $str = preg_replace('/\"(\w+)\":/is', '$1:', $str); //给key加双引号 // } $str = preg_replace('/"(\w+)"(\s*:\s*)/is', '$1$2', $str); //去掉key的双引号 return $str; } $str = '{"test":[{"testName":"哈哈","Url":"http://www.test.com"}]}'; $str = my_json_decode($str); echo "$str";var newdata=JSON.parse(xhr.responseText); success && success(newdata);<script> //数字滚动 (function($){ $.fn.numberRock=function(options){ var defaults={ lastNumber:100, duration:2000, easing:'swing' //swing(默认 : 缓冲 : 慢快慢) linear(匀速的) }; var opts=$.extend({}, defaults, options); $(this).animate({ num : "numberRock", // width : 300, // height : 300, },{ duration : opts.duration, easing : opts.easing, complete : function(){ console.log("success"); }, step : function(a,b){ //可以检测我们定时器的每一次变化 //console.log(a); //console.log(b.pos); //运动过程中的比例值(0~1) $(this).html(parseInt(b.pos * opts.lastNumber)); } }); } })(jQuery); $(function(){ $("#read-count").numberRock({ lastNumber:6666, duration:5000, easing:'swing', //慢快慢 }); }); </script>(function() {var coreSocialistValues = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"], index = Math.floor(Math.random() * coreSocialistValues.length);document.body.addEventListener('click', function(e) {if (e.target.tagName == 'A') {return;}var x = e.pageX, y = e.pageY, span = document.createElement('span');span.textContent = coreSocialistValues[index];index = (index + 1) % coreSocialistValues.length;span.style.cssText = ['z-index: 9999999; position: absolute; font-weight: bold; color: #ff6651; top: ', y - 20, 'px; left: ', x, 'px;'].join('');document.body.appendChild(span);animate(span);});function animate(el) {var i = 0, top = parseInt(el.style.top), id = setInterval(frame, 16.7);function frame() {if (i > 180) {clearInterval(id);el.parentNode.removeChild(el);} else {i+=2;el.style.top = top - i + 'px';el.style.opacity = (180 - i) / 180;}}}}());_attachEvent(window, 'scroll', function () { showTopLink(); });checkBlind();discuz论坛左边栏头像信息滚动自动固定js
function ctrlLeftInfo(sli_staticnum) { var sli = $('scrollleftinfo'); var postlist_bottom = parseInt($('postlist').getBoundingClientRect().bottom); var sli_bottom = parseInt(sli.getBoundingClientRect().bottom); if (postlist_bottom < sli_staticnum && postlist_bottom != sli_bottom) { sli.style.top = (postlist_bottom - sli.offsetHeight - 5) + 'px'; } else { sli.style.top = 'auto'; } } function fixed_avatar(pids, fixednv) { var fixedtopnv = fixednv ? new fixed_top_nv('nv', true) : false; if (fixednv) { fixedtopnv.init(); } function fixedavatar(e) { var avatartop = fixednv ? fixedtopnv.run() : 0; for (var i = 0; i < pids.length; i++) { var pid = pids[i]; var posttable = $('pid' + pid); var postavatar = $('favatar' + pid); if (!$('favatar' + pid)) { return; } var nextpost = $('_postposition' + pid); if (!postavatar || !nextpost || posttable.offsetHeight - 100 < postavatar.offsetHeight) { if (postavatar.style.position == 'fixed') { postavatar.style.position = ''; } continue; } var avatarstyle = postavatar.style; posttabletop = parseInt(posttable.getBoundingClientRect().top); nextposttop = parseInt(nextpost.getBoundingClientRect().top); if (nextposttop > 0 && nextposttop <= postavatar.offsetHeight) { if (BROWSER.firefox) { if (avatarstyle.position != 'fixed') { avatarstyle.position = 'fixed'; } avatarstyle.top = -(postavatar.offsetHeight - nextposttop) + 'px'; } else { postavatar.parentNode.style.position = 'relative'; avatarstyle.top = ''; avatarstyle.bottom = '0px'; avatarstyle.position = 'absolute'; } } else if (posttabletop < 0 && nextposttop > 0) { if (postavatar.parentNode.style.position != '') { postavatar.parentNode.style.position = ''; } if (avatarstyle.position != 'fixed' || parseInt(avatarstyle.top) != avatartop) { avatarstyle.bottom = ''; avatarstyle.top = avatartop + 'px'; avatarstyle.position = 'fixed'; } } else if (avatarstyle.position != '') { avatarstyle.position = ''; } } } if (!(BROWSER.ie && BROWSER.ie < 7)) { _attachEvent(window, 'load', function () { _attachEvent(window, 'scroll', fixedavatar); }); } }手机端无效解决办法
(function() {var coreSocialistValues = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"], index = Math.floor(Math.random() * coreSocialistValues.length);document.body.addEventListener('<?php if($Applessss){ echo 'touchstart'; }else echo 'click'; ?>', function(e) {if (e.target.tagName == 'A') {return;} <?php if($Applessss){ echo 'var x=e.targetTouches[0].pageX,y=e.targetTouches[0].pageY'; }else echo 'var x = e.pageX, y = e.pageY;'; ?>; var span = document.createElement('span');span.textContent = coreSocialistValues[index];index = (index + 1) % coreSocialistValues.length;span.style.cssText = ['z-index: 9999999; position: absolute; font-weight: bold; color: #ff6651; top: ', y - 20, 'px; left: ', x, 'px;'].join('');document.body.appendChild(span);animate(span);});function animate(el) {var i = 0, top = parseInt(el.style.top), id = setInterval(frame, 16.7);function frame() {if (i > 180) {clearInterval(id);el.parentNode.removeChild(el);} else {i+=2;el.style.top = top - i + 'px';el.style.opacity = (180 - i) / 180;}}}}());手机端拖拽事件： touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。 touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。 touchend事件：当手指从屏幕上离开的时候触发。 touchcancel事件：当系统停止跟踪触摸的时候触发。 调用方法： （1）jquery方法：$(document).bind("touchend", function(e){}）； （2）javascript方法：document.addEventListener("touchend",function(e){}); 手机端获取pageX和pageY: touchstart事件下获取：e.originalEvent.targetTouches[0].pageX。 touchmove事件下获取：e.originalEvent.targetTouches[0].pageX。 touchend事件的下获取：e.originalEvent.changedTouches[0].pageX 。 每个Touch对象包含的属性如下。 clientX：触摸目标在视口中的x坐标。 clientY：触摸目标在视口中的y坐标。 identifier：标识触摸的唯一ID。 pageX：触摸目标在页面中的x坐标。 pageY：触摸目标在页面中的y坐标。 screenX：触摸目标在屏幕中的x坐标。 screenY：触摸目标在屏幕中的y坐标。 target：触目的DOM节点目标。touches: 当前屏幕上所有触摸点的列表; targetTouches: 当前对象上所有触摸点的列表; changedTouches: 涉及当前(引发)事件的触摸点的列表 通过一个例子来区分一下触摸事件中的这三个属性： 1. 用一个手指接触屏幕，触发事件，此时这三个属性有相同的值。 2. 用第二个手指接触屏幕，此时，touches有两个元素，每个手指触摸点为一个值。当两个手指触摸相同元素时， targetTouches和touches的值相同，否则targetTouches 只有一个值。changedTouches此时只有一个值， 为第二个手指的触摸点，因为第二个手指是引发事件的原因 3. 用两个手指同时接触屏幕，此时changedTouches有两个值，每一个手指的触摸点都有一个值 4. 手指滑动时，三个值都会发生变化 5. 一个手指离开屏幕，touches和targetTouches中对应的元素会同时移除，而changedTouches仍然会存在元素。 6. 手指都离开屏幕之后，touches和targetTouches中将不会再有值，changedTouches还会有一个值， 此值为最后一个离开屏幕的手指的接触点。 2. 触点坐标选取 touchstart和touchmove使用: e.targetTouches[0].pageX 或 (jquery)e.originalEvent.targetTouches[0].pageX touchend使用: e.changedTouches[0].pageX 或 (jquery)e.originalEvent.changedTouches[0].pageX 3.touchmove事件对象的获取 想要在touchmove:function(e,参数一)加一个参数，结果直接使用e.preventDefault()就会 e 报错，处理方法为使用arguments[0]获取event参数 touchmove:function(e,参数一){ var e=arguments[0] e.preventDefault() }使用cssText时应该采用叠加的方式以保留原有的样式
function setStyle(el, strCss){ var sty = el.style; sty.cssText = sty.cssText + strCss; }使用该方法在IE9/Firefox/Safari/Chrome/Opera中没什么问题，但由于 IE6/7/8中cssText返回值少了分号 会让你失望。
因此对IE6/7/8还需单独处理下，如果cssText返回值没";"则补上
function setStyle(el, strCss){ function endsWith(str, suffix) { var l = str.length - suffix.length; return l >= 0 && str.indexOf(suffix, l) == l; } var sty = el.style, cssText = sty.cssText; if(!endsWith(cssText, ';')){ cssText += ';'; } sty.cssText = cssText + strCss; }cssText
js pageX手机无效
js join
<script type="text/javascript"> var arr = new Array(3) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" document.write(arr.join(".")) //输出： //George.John.Thomas </script>join() 方法用于把数组中的所有元素放入一个字符串
如果省略该参数，则使用逗号作为分隔符。
Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\*\shell\runas] @="管理员取得所有权" "NoWorkingDirectory"="" [HKEY_CLASSES_ROOT\*\shell\runas\command] @="cmd.exe /c takeown /f \"%1\" && icacls \"%1\" /grant administrators:F" "IsolatedCommand"="cmd.exe /c takeown /f \"%1\" && icacls \"%1\" /grant administrators:F" [HKEY_CLASSES_ROOT\exefile\shell\runas2] @="管理员取得所有权" "NoWorkingDirectory"="" [HKEY_CLASSES_ROOT\exefile\shell\runas2\command] @="cmd.exe /c takeown /f \"%1\" && icacls \"%1\" /grant administrators:F" "IsolatedCommand"="cmd.exe /c takeown /f \"%1\" && icacls \"%1\" /grant administrators:F" [HKEY_CLASSES_ROOT\Directory\shell\runas] @="管理员取得所有权" "NoWorkingDirectory"="" [HKEY_CLASSES_ROOT\Directory\shell\runas\command] @="cmd.exe /c takeown /f \"%1\" /r /d y && icacls \"%1\" /grant administrators:F /t" "IsolatedCommand"="cmd.exe /c takeown /f \"%1\" /r /d y && icacls \"%1\" /grant administrators:F /t"<style> .container{ display: table; width: 800px; height: 500px; background-color: red; } .container.item{ display: table-cell; vertical-align: middle; padding: 0 20px; } </style> <div class="container"> <div class="item"></div> </div><div class=“box”> <img /> </div>1.水平居中：
1）box设置 text-align:center ; text-align:center可以实现子元素字体，图片的水平居中。 2）img设置 margin:0 auto;display:block ; margin:0 auto是针对块元素的水平居中方法，所以要加上display：block。2.垂直居中：
1）图片使用padding，用box的高度减去图片的高度再除以2，就是padding-top的值，这样也可以实现图片在div里居中。也可以在设置margin：0 auto时，把0改为刚才padding-top的值也可以。 2）img{ position:relative; top:50%; left:50%; margin-top:负图片height的一半； margin-left：负图片width的一半； }3）box设置 display: table-cell;vertical-align: middle; display: table-cell 相当于是把标签元素当作一个单元格来处理。但是唯一的缺点就是IE6/7不兼容。 注意：vertical-align: middle;这个垂直属性，只对 inline 或者 inline-block 元素有效 ☆垂直和水平居中的另外种方法：table的宽高自己设置html:
<table class="img_meng_show"> <tr> <td> <img src=""> </td> </tr> </table>css:
.img_meng_show td{ vertical-align: middle; text-align: center; }这样图片就在table里面水平和垂直居中了
DIV水平和垂直居中的方法：
HTML:
<div class="box></div>css:
.box{ position:absolute(或者是fixed); top:0; left:0; bottom:0; right:0; margin:auto; width:100px; height:200px; }这个能实现div垂直和水平居中，但是必要条件就是宽高必须加上，margin也必须加上。如果想里面的图片也水平和垂直居中，可以参照上面图片用margin-left这种方式；
如果只想垂直居中，只要top与bottom，然后 margin:auto 0;
同理，只想水平居中，只要top与bottom，然后 margin: 0 auto;
但是这种方法不支持ie8以下。
还有一种使用css3 translate的方法，能让div垂直水平居中：
.box{ position: fixed（或者absolute）; top: 50%; left: 50%; width: 100px; /*height: 100px;*/高度可以不定死 background: skyblue; transform: translate(-50%,-50%); }1.一行显示并出现省略号
1）三个属性：
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow: hidden和white-space: nowrap都是必须的否则不会显示省略号；2）网上张大神想出来的margin-top负值的办法：
<div class="box"> <div class="wz">文字内容</div> <div class="dot">...</div> </div>CSS:
.box{ width:设定宽度； height:设定高度； overflow:hidden; } .wz{ float:left; height:设定同样的高度； margin-right:这里的大小是给省略号留的空间； } .dot{ float:right; width:刚才留的空间大小； height：设定同样的高度； margin-top:与高度一样的值的负数； }这种方法应该是兼容所有的浏览器。
还有用js或者插件来解决的方法，感觉有点麻烦。
2.两行显示，第二行出现省略号
当文字强制两行显示，并且在第二行才出现省略号。解决办法：
text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;这个是使用的是-webkit-的私有属性，只有在谷歌浏览器上才能正确显示出来，其它浏览器无效果,多用于手机端。-webkit-line-clamp: 3;就是表示第几行才显示省略号。