Article Detail

常用html、demo代码

暗网网址导航hidden wikihttp://zqktlwi4fecvo6ri.onion HTML特殊字符编码对照表 console.log(allnum)...

HTML 阅读 2804.6万 14 分钟阅读 2015-10-15 14:45

暗网网址导航hidden wiki

http://zqktlwi4fecvo6ri.onion

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">

<!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>

$.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();
	}
});

<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" />

I('post.id',0,'intval'); // 用intval过滤$_POST['id']
I('get.title','','strip_tags'); // 用strip_tags过滤$_GET['title']

移动端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 仍然保留之。

$("p").css("color","red");
//同时设置字体大小和背景色   
$("p").css({"fontSize":"30px" ,"backgroundColor":"#ccc"});
$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

header('Content-Type:text/html;charset=utf-8'); //避免输出乱码 

<img  title="点击刷新" src="cache/yzm.php" align="absbottom" onclick="this.src='cache/yzm.php?'+Math.random();" />

<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>

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

Chrome提供了一个简单的方法。首先，按“F12”打开控制台，然后输入：

document.designMode = "on"

添加到收藏夹URL填写下面的即可在当前页面点击收藏夹编辑页面

javascript:(function(){document.designMode = "on" })();

接下来，你就可以编辑屏幕上的文本内容了。

编辑器

data:text/html, <html contenteditable>

如果你想找回不小心关闭的Tab页面，只需要同时按下“Control"（Mac用户请按“Command”）、“Shift"和“T”。

js随机数

function getRandom(n){
        return Math.floor(Math.random()*n+1)
        }

top.location.href 和 localtion.href 有什么不同

top.location.href=”url”

在顶层页面打开url（跳出框架）

self.location.href=”url”

仅在本页面打开url地址

parent.location.href=”url”

在父窗口打开Url地址

this.location.href=”url”

用法和self的用法一致
if (top.location == self.location) 判断当前location 是否为顶层来禁止frame引用　如果页面当中有自定义的frame的话，也可以将parent self top换为自定义frame的名称效果就是在自定义frame窗口打开url地址

实际中可能这样使用

if(top !== self){             top.location.href = location.href;         }

禁止frame引用
以下是从网上找到的一个例子，不是很直观，我加了上面那三行代码，可以先去掉，再加上，看一下效果，就很清楚了以下是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();>

以下是一个随意文件名的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>

你自己试试,我想你要的可能就是这样的效果!

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>

修改ID增加ID属性，修改class同理
$('.div').attr('id','newid');

如果是给标签添加class样式可以这样
$('#div').addClass('css类名');

strtotime("-1 week")， strtotime("-n days");可以很方便的获取当前日期的前n天、周、月的时间戳

舒适网页配色方案
 px像素转换rem单位工具

Comments 评论区

广西南宁市 2018-01-20 18:42

h5页面，关闭手机键盘

document.activeElement.blur();

		<script>
			//图片取消上传
			$("body").on("mousemove touchstart tap",function(){
			//$("body").mousemove(function(){
				<?php
					if($Applessss) echo'document.activeElement.blur();';
				?>
				//if($("input").is(":focus")) $("input").focus();
				var sdfdsunmppsss=$('#sdfdsunmpp dot').text();
				//console.log(sdfdsunmppsss);
				if(sdfdsunmppsss=='select') $('#sdfdsunmpp').html('<a href="javascript:;" onclick="$(\'#sdfdsunmpp\').html(\'<dot>select</dot>\');if ((navigator.userAgent.indexOf(\'MSIE\') >= 0) && (navigator.userAgent.indexOf(\'Opera\') < 0)) alert(\'请更换你的破浏览器！\');path.click();" style="cursor: pointer;color: #666;text-decoration: underline;">UpImg</a>');
				
			});
		</script>

#⁰

广西南宁市 2018-01-22 14:17

<html>中<textarea>在显示时开头的空格

<label class="regboxlabe">
备注：
</label>
<textarea rows="3" cols="25" name="pi.pi_message">
</textarea>

这样显示出来开头就会有很多空格，但是如果给<textarea>放在一行显示出来的数据开头就没有空格。如：

<textarea rows="3" cols="25" name="pi.pi_message"></textarea>

不知道为什么！

广西南宁市2018-01-25 10:11:18

		<div class="editor">
		<script>
		var editor = editor('content');
		document.write (editor);
		</script>
		<div class="editor_text">
		    <textarea name='content' id='content' style="height: 366px;">
			
<?=$article['content']?>

</textarea>
		 </div>
	    </div>

#⁰

广西南宁市 2018-01-24 11:45

canvas圆圆圈圈的动态效果

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,shrink-to-fit=no" />
  <title> 上下班路上的那一幅静态广告 </title>
  <style>
    .stage{position:absolute;left:0;top:0;bottom:0;right:0;margin:auto;width:800px;max-width:100%;border:1px solid #CCC;}
  </style>
 </head>
 <body>
  <canvas class="stage" width="800" height="500"></canvas>
  <script>
    "use strict";
	(function(query){
	    var ARC=0.004,
		    ANGLE=10,
			PI2=Math.PI*2,
			NUM=150,
			VELOCITY=3;

	    function Scene(ctx,width,height){
		   this.ctx=ctx;
		   this.width=width;
		   this.height=height;
		   this.sprites=[];
		   ctx.globalCompositeOperation="lighter";

		   this.render=this.render.bind(this);
		}

		Scene.prototype={
		   add:function(sprite){
		      this.sprites.push(sprite);
		   },
		   render:function(timer){
		      var sprites=this.sprites,ii=sprites.length,i=ii,ctx=this.ctx,w=this.width,h=this.height;
			  
			  ctx.clearRect(0,0,width,height);
		      requestAnimationFrame(this.render);

              while(i){
			    sprites[--i].update(timer,w,h);
			  }
			  for(;i<ii;i++){
			    sprites[i].draw(ctx);
			  }

			  this.make(ii);
		   },
		   start:function(){
		     this.render();
		   },
		   make:function(num){
		      if(num<NUM){
			   var radius=getRadius();
				   num++;
				   this.add(new BallArtist("",-radius,height/2,radius,getColor(),getAngle()));
			  }
		   }
		};

		function Sprite(draw,behaviors){
		   this.draw=draw;
		   this.behaviors=behaviors||[];
		}

		Sprite.prototype.update=function(timer,w,h){
		    var behaviors=this.behaviors,
			    i=0,
				ii=behaviors.length;

			for(;i<ii;i++){
			   behaviors[i].call(this,timer,w,h);
			}
		};

		function BallArtist(name,x,y,radius,color,angle){
		   this.name=name,
		   this.x=x;
		   this.y=y;
		   this.v=Math.random()*VELOCITY+VELOCITY;
		   this.radius=radius;
		   this.color=color;
		   this.angle=angle;
		   this.vr=Math.random()*ARC*(angle>0?1:angle<0?-1:0);
		}

		BallArtist.prototype=new Sprite(function(ctx){
		    ctx.beginPath();
			ctx.fillStyle=this.color;
			ctx.arc(this.x,this.y,this.radius,0,PI2);
			ctx.fill();
		   
		},[function(timer,width,height){
		    if(this.x>width+this.radius || this.y<-this.radius || this.y>height+this.radius){
              var radius=getRadius();
			  this.reset(-radius,height/2,radius,getColor(),getAngle());
			  return;
			}
			this.angle+=this.vr;

			var sin=Math.sin(this.angle),
			    cos=Math.cos(this.angle);
			
			this.x+=cos*this.v;
			this.y+=sin*this.v;
		}]);

		BallArtist.prototype.reset=function(x,y,radius,color,angle){
		   this.x=x;
		   this.y=y;
		   this.v=Math.random()*VELOCITY+VELOCITY;
		   this.radius=radius;
		   this.color=color;
		   this.angle=angle;
		   this.vr=Math.random()*ARC*(angle>0?1:angle<0?-1:0);
		};		

		var cvs=document.querySelector(query),
		    ctx=cvs.getContext("2d"),
			width=cvs.width,
			height=cvs.height,
			num=0,
			scene=new Scene(ctx,width,height),
			color=["hsla(",0,",100%,30%,.8)"],
			angle=Math.PI/180*ANGLE,
			radius;

			function getColor(){
			   color[1]=Math.random()*360;
			   return color.join("");
		    }

			function getAngle(){
			  return Math.random()*angle-(angle/2);
			}

			function getRadius(){
			  return 20*Math.random()+5;
			}


			scene.start();


	})("canvas");
  </script>
 </body>
</html>

#⁰

广西南宁市 2018-01-24 14:23

跨浏览器检测视窗大小

var winWidth = 0; 
var winHeight = 0; 
function findDimensions() //函数：获取尺寸 
{ 
//获取窗口宽度 
if (window.innerWidth) 
winWidth = window.innerWidth; 
else if ((document.body) && (document.body.clientWidth)) 
winWidth = document.body.clientWidth; 
//获取窗口高度 
if (window.innerHeight) 
winHeight = window.innerHeight; 
else if ((document.body) && (document.body.clientHeight)) 
winHeight = document.body.clientHeight; 
//通过深入Document内部对body进行检测，获取窗口大小 
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) 
{ 
winHeight = document.documentElement.clientHeight; 
winWidth = document.documentElement.clientWidth; 
} 
//结果输出至两个文本框 （在这里对获取到的参数进一步使用）
document.form1.availHeight.value= winHeight; 
document.form1.availWidth.value= winWidth; 
} 
findDimensions(); 
//调用函数，获取数值 
window.onresize=findDimensions;

#⁰

广西南宁市 2018-01-24 14:25

原生js轮播图（原创）

<style>
html,body,div,ul,li {
	padding:0;
	margin:0;
}
ul,li,ol {
	list-style:none;
}
.box {
	position:relative;
	width:600px;
	height:300px;
	margin:20px auto;
}
.picture {
	width:600px;
	height:300px;
	overflow:hidden;
	position:absolute;
}
.picture ul {
	position:absolute;
	width:2400px;
	height:300px;
}
.picture ul li {
	float:left;
	width:600px;
	height:300px;
}
.control {
	position:absolute;
	bottom:0px;
	left:450px;
}
.control li {
	cursor:pointer;
	float:left;
	width:20px;
	height:20px;
	text-align:center;
	line-height:20px;
	background:lightblue;
	margin:4px;
	border-radius:5px
}
.control .active {
	background:yellow;
}
</style>
<div class="box" id="box">
    <div class="picture">
        <ul id="picture">
            <li><img src="http://www.jq22.com/img/cs/500x300-1.png" width="600px" height="300px"></li>
            <li><img src="http://www.jq22.com/img/cs/500x300-2.png" width="600px" height="300px"></li>
            <li><img src="http://www.jq22.com/img/cs/500x300-3.png" width="600px" height="300px"></li>
            <li><img src="http://www.jq22.com/img/cs/500x300-1.png" width="600px" height="300px"></li>
        </ul>
    </div>
    <ol class="control" id="control">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
    </ol>
</div>
<script>
var box = document.getElementById("box");
var picture = document.getElementById("picture").children;
var control = document.getElementById("control").children;
var ul = document.getElementById("picture");

for (var i = 0; i < control.length; i++) {
    control[i].index = i;
    control[i].onclick = function() {
        for (var j = 0; j < control.length; j++) {
            control[j].className = "";
        }
        this.className = "active";
        animate(ul, -this.index * 600, 10);
    }
}


var k = 0;

function autoPlay() {
    k++;
    if (k > control.length) {
        ul.style.left = 0 + "px";
        k = 1;
    }
    animate(ul, -k * 600, 10);

    for (var i = 0; i < control.length; i++) {
        control[i].className = "";
    }
    var index = k % control.length;
    control[index].className = "active";
}

var tim = setInterval(autoPlay, 2000);

box.onmouseover = function() {
    clearInterval(tim);
}

box.onmouseout = function() {
    tim = setInterval(autoPlay, 2000);
}





function animate(ele, target, ms) {

    clearInterval(ele.timer);
    //方便清除本元素上一次的定时器操作
    ele.timer = setInterval(function() {
        //判断目标元素是向左或者向右（）
        var step = ele.offsetLeft < target ? 10 : -10;
        var result = Math.abs(target - ele.offsetLeft);
        /*到动画最后移动步长时*/
        if (result < 10) {
            clearInterval(ele.timer);
            ele.style.left = target + 'px';
        } else {
            //向目标元素发生位移。
            ele.style.left = ele.offsetLeft + step + 'px';
        }
    }, ms);

}
</script>

广西南宁市2018-01-24 14:31:25

CSS3实现无缝轮播

<style>* {
	padding:0;
	margin:0;
	list-style:none;
}
.banner {
	width:640px;
	height:300px;
	overflow:hidden;
	margin:0 auto;
}
.inner {
	width:9999px;
	position:relative;
	animation:aaa 16s infinite 2s running;
}
@keyframes aaa {
	0% {
	transform:translateX(0px);
}
5% {
	transform:translateX(-640px);
}
25% {
	transform:translateX(-640px);
}
30% {
	transform:translateX(-1280px);
}
50% {
	transform:translateX(-1280px);
}
55% {
	transform:translateX(-1920px);
}
75% {
	transform:translateX(-1920px);
}
80% {
	transform:translateX(-2560px);
}
100% {
	transform:translateX(-2560px);
}
}.inner:hover {
	animation-play-state:paused;
	cursor:pointer;
}
.innerwrapper {
	float:left;
	width:640pxpx;
}
.banner img {
	width:640px;
	height:300px;
}
</style>
<div class="banner">
    <div class="inner">
        <div class="innerwrapper"><img src="http://www.jq22.com/img/cs/500x500-1.png" alt="banner1"></div>
        <div class="innerwrapper"><img src="http://www.jq22.com/img/cs/500x300-1.png" alt="banner2"></div>
        <div class="innerwrapper"><img src="http://www.jq22.com/img/cs/300x500-1.png" alt="banner3"></div>
        <div class="innerwrapper"><img src="http://www.jq22.com/img/cs/500x500-2.png" alt="banner4"></div>
        <div class="innerwrapper"><img src="http://www.jq22.com/img/cs/500x500-1.png" alt="banner1"></div>
    </div>
</div>

#⁰

广西南宁市 2018-01-24 14:37

js计算器

<style>#box {
	margin:50px auto;
	padding:2px;
	background-color:#ebebeb;
}
#title {
	text-align:left;
	font-weight:bold;
	font-size:12px;
}
input[type="button"] {
	width:60px;
	height:45px;
	line-height:20px;
	text-align:center;
}
.num {
	border:0px;
	background-color:#fafafa;
}
.symbol {
	background-color:#f3f3f3;
	border:0px;
}
#zhi {
	height:40px;
	width:250px;
	text-align:right;
	border:0px;
	background-color:#ebebeb;
	font-size:30px;
	font-weight:bold;
}
#count {
	height:20px;
	width:250px;
	text-align:right;
	border:0px;
	background-color:#ebebeb;
}
</style><table id="box">
    <tbody><tr id="title">
        <td colspan="4">计算器</td>
    </tr>
    <tr>
        <td colspan="4"><input type="text" id="count"></td>
    </tr>
    <tr>
        <td colspan="4"><input type="text" id="zhi"></td>
    </tr>
    <tr>
        <td><input type="button" id="CE" value="CE" class="symbol" onclick="CE()"></td>
        <td><input type="button" id="C" value="C" class="symbol" onclick="returnToZero()"></td>
        <td><input type="button" id="delete" value="←" class="symbol" onclick="delete1()"></td>
        <td><input type="button" id="except" value="/" class="symbol" onclick="look(this.value)"></td>
    </tr>
    <tr>
        <td><input type="button" id="num7" value="7" class="num" onclick="display(this.value)"></td>
        <td><input type="button" id="num8" value="8" class="num" onclick="display(this.value)"></td>
        <td><input type="button" id="num9" value="9" class="num" onclick="display(this.value)"></td>
        <td><input type="button" id="cheng" value="*" class="symbol" onclick="look(this.value)"></td>
    </tr>
    <tr>
        <td><input type="button" id="num4" value="4" class="num" onclick="display(this.value)"></td>
        <td><input type="button" id="num5" value="5" class="num" onclick="display(this.value)"></td>
        <td><input type="button" id="num6" value="6" class="num" onclick="display(this.value)"></td>
        <td><input type="button" id="add" value="+" class="symbol" onclick="look(this.value)"></td>
    </tr>
    <tr>
        <td><input type="button" id="num1" value="1" class="num" onclick="display(this.value)"></td>
        <td><input type="button" id="num2" value="2" class="num" onclick="display(this.value)"></td>
        <td><input type="button" id="num3" value="3" class="num" onclick="display(this.value)"></td>
        <td><input type="button" id="minus" value="-" class="symbol" onclick="look(this.value)"></td>
    </tr>
    <tr>
        <td><input type="button" value="±" class="symbol" onclick="contrary()"></td>
        <td><input type="button" id="num0" value="0" class="num" onclick="display(this.value)"></td>
        <td><input type="button" id="point" value="." class="symbol" onclick="look(this.value)"></td>
        <td><input type="button" id="equal" value="=" class="symbol" onclick="start()"></td>
    </tr>
</tbody></table>
<script>
//显示数字
function display(value) {
    var zhi = document.getElementById("zhi");
    var count = document.getElementById("count");
    var countValue = count.value;
    var symbol = countValue.substring(countValue.length - 1);
    var value = value; //点击事件触发放回的value值赋值给变量value
    if (equal == 1) //点击=,*,/,-,+与后,再次点击先归零,再传值
    {
        zhi.value = "";
        zhi.value += value;
        equal = 0;
    } else if (zhi.value == "0") {
        zhi.value = value;
    } else {
        zhi.value += value;
    }


}
//点击+，-，*，时，count的显示
function look(value) {
    var zhi = document.getElementById("zhi");
    var count = document.getElementById("count");
    var value = value;
    count.value += zhi.value + value;
    equal = 1;
}
//计算
function start() {
    var zhi = document.getElementById("zhi");
    var count = document.getElementById("count");
    var value = count.value + zhi.value;
    var return1 = eval("(" + value + ")");
    document.getElementById("count").value = "";
    zhi.value = return1;
    equal = 1;
}
//归零
function returnToZero() {
    document.getElementById("zhi").value = "0";
    document.getElementById("count").value = "";
}
//Backspace
function delete1() {
    var zhi = document.getElementById("zhi");
    var value = zhi.value;
    var return1 = value.substr(0, value.length - 1);
    zhi.value = return1;
}
//CE
function CE() {
    document.getElementById("zhi").value = 0;
}

//contrary取相反数
function contrary() {
    var zhi = document.getElementById("zhi");
    var value = zhi.value;
    zhi.value = parseInt(value * (-1));
}</script>

#⁰

广西南宁市 2018-01-24 14:39

简单时间选择器

<select name="nian" id="nian"></select>年
<select name="nian" id="yue"></select>月
<select name="nian" id="ri"></select>日
<script>$(function() {
    var mydate = new Date();
    var nian = mydate.getFullYear();
    var yue = mydate.getMonth() + 1;
    for (var i = nian; i > 1900; i--) {
        var html_nian = '<option value="' + i + '">' + i + '</option>';
        $('#nian').append(html_nian);
    }
    for (var ii = 1; ii <= 12; ii++) {
        var html_yue = '<option value="' + ii + '">' + ii + '</option>';
        $('#yue').append(html_yue);
    }
    $('#nian').change(function() {
        my_ri($('#nian').val(), $('#yue').val())
    });
    $('#yue').change(function() {
        my_ri($('#nian').val(), $('#yue').val())
    });
})

function my_ri(n, y, r) {
    if (n > 0 && y > 0) {
        $('#ri').html('');
        var mydate_ri = new Date(n, y, 0);
        var ri = mydate_ri.getDate();
        for (var iii = 1; iii <= ri; iii++) {
            var html_ri = '<option value="' + iii + '">' + iii + '</option>';
            $('#ri').append(html_ri);
        }
        $.each($('#nian').find('option'), function(i) {
            if ($('#nian').find('option').eq(i).attr('value') == n) {
                $('#nian').find('option').eq(i).attr('selected', 'selected')
            }
        })
        $.each($('#yue').find('option'), function(i) {
            if ($('#yue').find('option').eq(i).attr('value') == y) {
                $('#yue').find('option').eq(i).attr('selected', 'selected')
            }
        })
        $.each($('#ri').find('option'), function(i) {
            if ($('#ri').find('option').eq(i).attr('value') == r) {
                $('#ri').find('option').eq(i).attr('selected', 'selected')
            }
        })
    }
}</script>

#⁰

广西南宁市 2018-01-24 14:40

文字代码播放效果滚动上下翻转

<style>body {
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: #34495e;
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  height: 160px;
  overflow: hidden;
  font-family: 'Lato', sans-serif;
  font-size: 35px;
  line-height: 40px;
  color: #ecf0f1;
}
.content__container {
  font-weight: 600;
  overflow: hidden;
  height: 40px;
  padding: 0 40px;
}
.content__container:before {
  content: '[';
  left: 0;
}
.content__container:after {
  content: ']';
  position: absolute;
  right: 0;
}
.content__container:after, .content__container:before {
  position: absolute;
  top: 0;
  color: #16a085;
  font-size: 42px;
  line-height: 40px;
  -webkit-animation-name: opacity;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  animation-name: opacity;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
.content__container__text {
  display: inline;
  float: left;
  margin: 0;
}
.content__container__list {
  margin-top: 0;
  padding-left: 110px;
  text-align: left;
  list-style: none;
  -webkit-animation-name: change;
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  animation-name: change;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}
.content__container__list__item {
  line-height: 40px;
  margin: 0;
}

@-webkit-keyframes opacity {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@-webkit-keyframes change {
  0%, 12.66%, 100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  16.66%, 29.32% {
    -webkit-transform: translate3d(0, -25%, 0);
            transform: translate3d(0, -25%, 0);
  }
  33.32%,45.98% {
    -webkit-transform: translate3d(0, -50%, 0);
            transform: translate3d(0, -50%, 0);
  }
  49.98%,62.64% {
    -webkit-transform: translate3d(0, -75%, 0);
            transform: translate3d(0, -75%, 0);
  }
  66.64%,79.3% {
    -webkit-transform: translate3d(0, -50%, 0);
            transform: translate3d(0, -50%, 0);
  }
  83.3%,95.96% {
    -webkit-transform: translate3d(0, -25%, 0);
            transform: translate3d(0, -25%, 0);
  }
}
@keyframes opacity {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes change {
  0%, 12.66%, 100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  16.66%, 29.32% {
    -webkit-transform: translate3d(0, -25%, 0);
            transform: translate3d(0, -25%, 0);
  }
  33.32%,45.98% {
    -webkit-transform: translate3d(0, -50%, 0);
            transform: translate3d(0, -50%, 0);
  }
  49.98%,62.64% {
    -webkit-transform: translate3d(0, -75%, 0);
            transform: translate3d(0, -75%, 0);
  }
  66.64%,79.3% {
    -webkit-transform: translate3d(0, -50%, 0);
            transform: translate3d(0, -50%, 0);
  }
  83.3%,95.96% {
    -webkit-transform: translate3d(0, -25%, 0);
            transform: translate3d(0, -25%, 0);
  }
}
</style>
<div class="content">
  <div class="content__container">
    <p class="content__container__text">
      Hello
    </p>
    
    <ul class="content__container__list">
      <li class="content__container__list__item">world !</li>
      <li class="content__container__list__item">bob !</li>
      <li class="content__container__list__item">users !</li>
      <li class="content__container__list__item">everybody !</li>
    </ul>
  </div>
</div>

#⁰

广西南宁市 2018-01-24 14:42

简单的拖拽示例

<span id="span1"></span>
<br><span id="span2"></span><br>
<div id="div1" style="background-color: Green; border: 1px solid red; height: 100px;  
        top: 100px; left: 100px; width: 100px; position: absolute;" onmousedown="mouseDown(this,event)" onmousemove="mouseMove(event)" onmouseup="mouseUp(event)">
</div>
<script>
 var mouseX, mouseY;
 var objX, objY;
 var isDowm = false; //是否按下鼠标  
 function mouseDown(obj, e) {
     obj.style.cursor = "move";
     objX = div1.style.left;
     objY = div1.style.top;
     mouseX = e.clientX;
     mouseY = e.clientY;
     isDowm = true;
 }

 function mouseMove(e) {
     var div = document.getElementById("div1");
     var x = e.clientX;
     var y = e.clientY;
     if (isDowm) {
         div.style.left = parseInt(objX) + parseInt(x) - parseInt(mouseX) + "px";
         div.style.top = parseInt(objY) + parseInt(y) - parseInt(mouseY) + "px";
         document.getElementById("span1").innerHTML = "x:" + div.style.top + "  " + "y:" + div.style.left;
     }
 }

 function mouseUp(e) {
     if (isDowm) {
         var x = e.clientX;
         var y = e.clientY;
         var div = document.getElementById("div1");
         div.style.left = (parseInt(x) - parseInt(mouseX) + parseInt(objX)) + "px";
         div.style.top = (parseInt(y) - parseInt(mouseY) + parseInt(objY)) + "px";
         document.getElementById("span2").innerHTML = "x:" + div.style.top + "  " + "y:" + div.style.left;
         mouseX = x;
         rewmouseY = y;
         div1.style.cursor = "default";
         isDowm = false;
     }
 }</script>

#⁰

广西南宁市 2018-01-24 14:43

Load加载页面
加载页面等待界面 css3

<style>body {
	display:flex;
	font-size:2rem;
	overflow:hidden;
}
.Box {
	position:absolute;
	width:100vw;
	height:100vh;
	background-color:#fff;
	filter:blur(4vmin) contrast(100);
}
.BigCircle,.SmallCircle {
	position:absolute;
	top:50%;
	left:50%;
	background-color:#000;
}
.BigCircle {
	width:30vmin;
	height:30vmin;
	margin:-15vmin;
	border-radius:50%;
}
.SmallCircle {
	width:15vmin;
	height:15vmin;
	margin:-7.5vmin;
	background-color:#000;
	border-radius:50%;
	animation:move 1.5s infinite alternate cubic-bezier(0.18,0,0.26,1);
}
.SmallCircle:nth-child(1) {
	--degree:0deg;
	animation-delay:0s;
	background-color:red;
}
.SmallCircle:nth-child(2) {
	--degree:45deg;
	animation-delay:-0.375s;
	background-color:#ffbf00;
}
.SmallCircle:nth-child(3) {
	--degree:90deg;
	animation-delay:-0.75s;
	background-color:#80ff00;
}
.SmallCircle:nth-child(4) {
	--degree:135deg;
	animation-delay:-1.125s;
	background-color:#00ff40;
}
.SmallCircle:nth-child(5) {
	--degree:180deg;
	animation-delay:-1.5s;
	background-color:cyan;
}
.SmallCircle:nth-child(6) {
	--degree:225deg;
	animation-delay:-1.875s;
	background-color:#0040ff;
}
.SmallCircle:nth-child(7) {
	--degree:270deg;
	animation-delay:-2.25s;
	background-color:#8000ff;
}
.SmallCircle:nth-child(8) {
	--degree:315deg;
	animation-delay:-2.625s;
	background-color:#ff00bf;
}
.SmallCircle:nth-child(9) {
	--degree:360deg;
	animation-delay:-3s;
	background-color:red;
}
@keyframes move {
	0% {
	transform:rotate(var(--degree)) translateY(0);
}
70%,100% {
	transform:rotate(var(--degree)) translateY(-30vmin);
}
}</style><div class="Box">
    <div class="BigCircle"></div>
    <div class="SmallCircle"></div>
    <div class="SmallCircle"></div>
    <div class="SmallCircle"></div>
    <div class="SmallCircle"></div>
    <div class="SmallCircle"></div>
    <div class="SmallCircle"></div>
    <div class="SmallCircle"></div>
    <div class="SmallCircle"></div>
</div>

#⁰

广西南宁市 2018-01-25 00:31

jquery获取select选中的值

$(".select").change(function(){
     console.log($(this).val())
});
//操作被选中的元素

广西南宁市2018-01-25 00:32:11

JavaScript获得获取input元素value值

<html>  
 <head>  
 <script language="javascript">  
  function print(){  
   var a=myform.name.value;  
   alert(a);  
  }  
 </script>  
 </head>  
 <body>  
  <form name="myform">  
   <input type="text" name="name" id="nn" />  
   <input type="button" name="button" value="获取" onclick="print()" />  
  </form>    
 </body>  
</html>

<html>  
 <head>  
 <script language="javascript">  
  function print(){  
   var a=document.getElementById("nn").value;  
   alert(a);  
  }  
 </script>  
 </head>  
 <body>  
  <form>  
   <input type="text" name="name" id="nn" />  
   <input type="button" name="button" value="获取" onclick="print()" />  
  </form>    
 </body>  
</html>

#⁰

广西南宁市 2018-01-25 00:35

thinkphp or 复合查询组合查找 and 条件查询 like

$where['name']  = array('like', '%thinkphp%');
$where['title']  = array('like','%thinkphp%');
$where['_logic'] = 'or';
$map['_complex'] = $where;
$map['id']  = array('gt',1);

查询条件是

( id > 1) AND ( ( name like '%thinkphp%') OR ( title like '%thinkphp%') )

	//获取文章列表
	public function new_list($classname,$cid,$p,$m,$img,$k,$hyid){
		
		
		$where[$classname]=$cid;
		$where['hyfl']=array('like','%,'.$cid.',%');
		$where['_logic'] = 'or';
		$w['_complex'] = $where;
		
		if($img) $w['imgurl']=array('neq','');
		if($k) $w['title']=array('like','%'.$k.'%');
		if($hyid) $w['gz_headeryjhhyy']=$hyid;
		
		$w['displaytype']=1;
		$p=$p+0;
		if($p<0) $p=0;
		$n=$p*$m;
		if($p>0) $n=($p-1)*$m;
		//dump($w);exit;
		$l=M('news')->where($w)->order('com_ok desc,no_order asc,id desc')->limit($n,$m)->select();
	//print_r($l);exit();
		return $l;
	}

#⁰

广西南宁市 2018-01-26 11:56

//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>

#⁰

广西南宁市 2018-02-06 14:29

canvasTime.js 炫彩时钟时间彩色

<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>

#⁰

广西河池市宜州市 2018-02-23 12:07

template.js

<!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:'我是换行'}";
?>

广西河池市宜州市2018-02-23 12:08:36

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";

广西河池市宜州市2018-02-23 12:10:12

					var newdata=JSON.parse(xhr.responseText);
					success && success(newdata);

广西河池市宜州市2018-02-23 12:29:15

js模板引擎

#⁰

广西河池市宜州市 2018-02-24 14:30

基于jQuery实现的数字滚动插件

<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>

#⁰

广西河池市宜州市 2018-02-24 15:51

鼠标点击文字冒泡动画特效果

(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;}}}}());

广西河池市宜州市2018-02-24 15:53:08

dz论坛返回顶部的代码

_attachEvent(window, 'scroll', function () { showTopLink(); });checkBlind();

广西河池市宜州市2018-02-24 16:34:45

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);
        });
    }
}

广西河池市宜州市2018-03-05 16:47:35

手机端无效解决办法

(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;}}}}());

广西河池市宜州市2018-03-05 16:48:44

手机e.pageX和e.pageY无效的原因

手机端拖拽事件：

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节点目标。

广西河池市宜州市2018-03-05 16:50:08

touch事件中的touches、targetTouches和changedTouches详解

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()
}

广西河池市宜州市2018-03-05 16:53:06

巧用cssText属性批量操作样式
使用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;
}

广西河池市宜州市2018-03-05 16:55:07

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() 方法用于把数组中的所有元素放入一个字符串
如果省略该参数，则使用逗号作为分隔符。

#⁰

广西河池市宜州市 2018-02-28 10:54

管理员取得所有权.reg

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"

#⁰

广西河池市宜州市 2018-03-01 17:20

水平垂直居中之table-cell篇

<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>

#⁰

广西河池市宜州市 2018-03-01 17:53

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%);
}

#⁰

第 13 / 14 页 当前展示 241 - 260 条，共 279 条评论

Comment Form 留下评论

正在回复 #0

粘贴图片、拖拽文件，或点上面的按钮上传 图片会自动插入 [img] 标签，其他附件会自动插入 [attach] 标签。

正在上传...

提交前会先拉起旧项目同款第三方人机验证。

不再要求填写昵称；reply 会生成一条带楼层回链的新评论，quote 会附带完整引用块，并保持评论锚点跳转。