评论 - lizhenqiu blog

#⁹⁷⁰

作者：广西南宁市

魔性催眠图形
canvas的ellipse是个很棒的方法，可惜只有chrome和Opera支持
把ellipse中参数随便改改就会出现神奇的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    body{overflow:hidden}
</style>
<body>
  <canvas></canvas>
</body>
</html>
<script>
    var canvas=document.querySelector('canvas'),
        ctx=canvas.getContext('2d');

    canvas.width=window.innerWidth;
    canvas.height=window.innerWidth;

    ctx.lineWidth=1;
    ctx.strokeStyle='black';
    var time=0;

    function draw(){
        time+=0.01;
        ctx.clearRect(0,0,window.innerWidth,window.innerHeight);
        ctx.beginPath();
        for(i=120;i--;)
            ctx.ellipse(window.innerWidth/2,window.innerHeight/2,i*2,100*Math.sin(time+i/50)+100,2*Math.sin(time/4)+i*2,time,6+time)
        ctx.stroke();
        requestAnimationFrame(arguments.callee);
    }

    draw();
</script>

Run code

Cut to clipboard

文章：常用html、demo代码发表时间：2017-09-11, 17:21:56

展开↯

#⁹⁷¹

作者：广西南宁市

漂亮的css文字效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css文字效果</title>
<style type="text/css">
* {
    padding: 0;
    margin: 0;
    text-align: center;
}
body {
    padding-bottom: 200px;
}
div {
    font-size: 36px;
}
.header-item {
    line-height: 4;
}
.box1 {
    color: rgba(0, 0, 0, .3);
}
.box2 {
    text-shadow: 0 0 5px red;
    -webkit-text-fill-color : transparent;
}
.box3 {
    -webkit-text-stroke: 1px red;
    -webkit-text-fill-color : transparent;
}
.box4 {
    background: linear-gradient( to bottom, white, black);
    -webkit-text-fill-color : transparent;
    -webkit-background-clip : text;
}
.box5 {
    height: 300px;
    width: 1280px;
    margin: 0 auto;
    font-size: 70px;
    font-weight: 700;
    background: url(https://lizhenqiu.com/86f740e5196bec328ee09cca4dd9c827.jpg) no-repeat center;
    /*文字样式*/
    text-align: center;
    /*图片文字样式*/
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
.box6 { 
    color:#fefefe;
    text-shadow:  
    0px 1px 0px #c0c0c0,  
    0px 2px 0px #b0b0b0,  
    0px 3px 0px #a0a0a0,  
    0px 4px 0px #909090,  
    0px 5px 10px rgba(0, 0, 0, .9);  
}
.box7 {
    color:#fefefe;   
    text-shadow:  
    1px -1px 0 #767676,   
    -1px 2px 1px #737272,   
    -2px 4px 1px #767474,   
    -3px 6px 1px #787777,   
    -4px 8px 1px #7b7a7a,   
    -5px 10px 1px #7f7d7d,   
    -6px 12px 1px #828181,   
    -7px 14px 1px #868585,   
    -8px 16px 1px #8b8a89,   
    -9px 18px 1px #8f8e8d,   
    -10px 20px 1px #949392,   
    -11px 22px 1px #999897,   
    -12px 24px 1px #9e9c9c,   
    -13px 26px 1px #a3a1a1,   
    -14px 28px 1px #a8a6a6,   
    -15px 30px 1px #adabab,   
    -16px 32px 1px #b2b1b0,   
    -17px 34px 1px #b7b6b5,  
    -18px 36px 1px #bcbbba,   
    -19px 38px 1px #c1bfbf,   
    -20px 40px 1px #c6c4c4,   
    -21px 42px 1px #cbc9c8,   
    -22px 44px 1px #cfcdcd;  
}
.box8 {
    background-color: #333;  
  background-image:  
      -webkit-linear-gradient(bottom left, transparent 45%, hsla(48,20%,90%,1) 45%, hsla(48,20%,90%,1) 55%, transparent 0%);
  background-image:  
      -o-linear-gradient(bottom left, transparent 45%, hsla(48,20%,90%,1) 45%, hsla(48,20%,90%,1) 55%, transparent 0%);
  background-image:  
      linear-gradient(to top right, transparent 45%, hsla(48,20%,90%,1) 45%, hsla(48,20%,90%,1) 55%, transparent 0%);;  
    background-size: .05em .05em;  
  -webkit-background-clip: text;  
  -webkit-text-fill-color: transparent;  
  -webkit-text-stroke: 2px #111;  
}
</style>
</head>
<body>
<p class="header-item">1.透明文字</p>
<div class="box1">我叫吕胖胖</div>

<p class="header-item">2.模糊文字</p>
<div class="box2">我叫吕肥肥</div>

<p class="header-item">3.镂空文字</p>
<div class="box3">我是吕胖胖，我有个弟弟叫吕肥肥</div>

<p class="header-item">4.渐变文字</p>
<div class="box4">我是吕肥肥，我有个哥哥叫吕胖胖</div>

<p class="header-item">5.图片背景文字</p>
<div class="box5">我们来自快乐的胖肥家族</div>

<p class="header-item">6.立体文字</p>
<div class="box6">胖哥，我们下楼找小美玩吧！</div>

<p class="header-item">7.长阴影文字</p>
<div class="box7">肥弟，你就不怕大熊揍你吗？</div>
    
</body>
</html>

Run code

Cut to clipboard

文章：常用html、demo代码发表时间：2017-09-11, 17:20:59

展开↯

#⁹⁷²

作者：广西南宁市

如何阻止在 div 上滚动时整个页面跟着一起滚动？
阻止滚动事件冒泡

文章：@意见反馈/技术支持/伊网/安企网发表时间：2017-09-11, 17:08:33

展开↯

#⁹⁷³

作者：广西南宁市

ThinkPHP5 正则验证中有“|”时提示“规则错误”的解决方案
正则规则中有“|”时，会引起解析错误：

'regex:\d{3,4}[\s,-]?\d{7,8}|1[3,4,5,8]\d[\s,-]?\d{4}[\s,-]?\d{4}'

Run code

Cut to clipboard

使用数组语法可以解决：

['regex' => '\d{3,4}[\s,-]?\d{7,8}|1[3,4,5,8]\d[\s,-]?\d{4}[\s,-]?\d{4}']

Run code

Cut to clipboard

文章：ThinkPHP中实现微信支付(jsapi支付)流程发表时间：2017-09-11, 16:11:46

展开↯

#⁹⁷⁴

作者：广西南宁市

javascript 进制转换(2进制、8进制、10进制、16进制之间的转换)

//十进制转其他
var x=110;
alert(x);
alert(x.toString(8));
alert(x.toString(32));
alert(x.toString(16));
//其他转十进制
var x='110';
alert(parseInt(x,2));
alert(parseInt(x,8));
alert(parseInt(x,16));
//其他转其他
//先用parseInt转成十进制再用toString转到目标进制
alert(String.fromCharCode(parseInt(141,8)))
alert(parseInt('ff',16).toString(2));

Run code

Cut to clipboard

文章：JavaScript base64随机字符混淆加密、解密发表时间：2017-09-09, 12:14:37

展开↯

#⁹⁷⁵

作者：广西南宁市

js字符串倒序

var reverse = function( str ){
   var stack = [];//生成一个栈
   for(var len = str.length,i=len;i>=0;i-- ){
    stack.push(str[i]);
}
return stack.join('');
};

Run code

Cut to clipboard

var reverse = function( str ){
  var newStr = '', i = str.length;
   for(; i >= 0; i--) {
        newStr += str.charAt(i);
   }
   return newStr;
};

reverse('abcde')

Run code

Cut to clipboard

文章：JavaScript base64随机字符混淆加密、解密发表时间：2017-09-09, 12:12:31

展开↯

#⁹⁷⁶

作者：广西南宁市

兼容中文的方法

decodeURIComponent(escape(window.atob(d)));//解密
window.btoa(unescape(encodeURIComponent(str)));//加密

Run code

Cut to clipboard

文章：JavaScript base64随机字符混淆加密、解密发表时间：2017-09-09, 12:11:47

展开↯

#⁹⁷⁷

作者：广西南宁市

加密的原理：
1、先用base64对字符串进行加密。
2、在字符串前面加上一个4位字符串，字符串要满足以下条件：
①必须是四位16进制的字符串。
②字符串的10进制必须也是一个四位整数。(这个四位整数很重要，用来确定随机字符串的插入位置和个数的)
③插入加密地址前的是四位16进制的字符串的倒序。
3、通过开头加上的4位字符串确定随机字符串以及插入的位置。(前后相应位置都加上一段随机字符串)

解析：
base64混淆加密后的地址：14c1YmxvZy54ppc3d0Zi5jb20g5LyK5oCd572R5X2qouT
①首先前面4位16进制的字符串为14c1，因为是倒序添加的，所以实际上为1c41。
②1c41对应的10进制为7233。
③通过7233推算,前面添加的随机字符串位置为第7个字符开始，添加2个随机字符串；后台添加的随机字符串位置为倒数第3个添加3个随机字符串。

文章：JavaScript base64随机字符混淆加密、解密发表时间：2017-09-09, 12:08:16

展开↯

#⁹⁷⁸

作者：广西南宁市

	//随机4位10进制整数
	function getfo(){
		var randnum;
		randnum=Math.random();
		while(randnum<0.1){
			randnum=Math.random();
		}
		return randnum=Math.floor(Math.random()*10000);
	}
	//十进制转十六进制
	function toHex(num){
	　　var rs = "";
	　　var temp;
	　　while(num/16 > 0){
	　　　　temp = num%16;
	　　　　rs = (temp+"").replace("10","a").replace("11","b").replace("12","c").replace("13","d").replace("14","e").replace("15","f") + rs;
	　　　　num = parseInt(num/16);
	　　}
	　　//console.warn(rs);　　//打印
	　　return rs;
	}
	//16进制补位
	function str_pad(hex){
		var zero = '0000';
		var tmp  = 4-hex.length;
		return zero.substr(0,tmp) + hex;
	}
	//倒叙字符串
	function reverse(str){
		return str.split('').reverse().join('');
	};
	//混淆加密的随机字符
	function getrr(){
		var hex=toHex(getfo());
		if(hex.length<4) hex=str_pad(hex)
		return reverse(hex);
	}

Run code

Cut to clipboard

文章：JavaScript base64随机字符混淆加密、解密发表时间：2017-09-09, 11:58:26

展开↯

#⁹⁷⁹

作者：广西南宁市

网页黑客帝国代码雨滚动下落乱码代码文字背景特效动画

<style>*{padding:0px;margin:0;x}
body{background: url(https://out.img.pan.lizhenqiu.com/FhevmCp39BWLo9mBfo5MnPE6yuM0);}#matrixBG {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    opacity: 0.8;width:100%;height:100%;
}</style>
<canvas id="matrixBG"></canvas>
	<script src="https://lizhenqiu.com/templates/default/jquery.min.js"></script>
<script>// JavaScript Document
$(document).ready(function(){
//var s=window.screen;
var width = matrixBG.width = window.screen.width;
var height = matrixBG.height = window.screen.height;
var yPositions = Array(300).join(0).split('');
var ctx=matrixBG.getContext('2d');

var draw = function () {
  ctx.fillStyle='rgba(0,0,0,.05)';
  ctx.fillRect(0,0,width,height);
  ctx.fillStyle='#0F0';
  ctx.font = '10pt Georgia';
  yPositions.map(function(y, index){
    text = String.fromCharCode(30+Math.floor( Math.random()*95 ));
    x = (index * 10)+10;
    matrixBG.getContext('2d').fillText(text, x, y);
	if(y > 100 + Math.random()*1e4)
	{
	  yPositions[index]=0;
	}
	else
	{
      yPositions[index] = y + 10;
	}
  });
};
RunMatrix();
function RunMatrix()
{
	if(typeof Game_Interval != "undefined") clearInterval(Game_Interval);
			Game_Interval = setInterval(draw, 33);
}
function StopMatrix()
{
	clearInterval(Game_Interval);
}
/**
//setInterval(draw, 33);
$("button#pause").click(function(){
StopMatrix();});
$("button#play").click(function(){RunMatrix();});
*/
});</script>

Run code

Cut to clipboard

文章：网页标签页头部标题前面加入有新消息提醒闪烁动画效果发表时间：2017-09-09, 10:37:13

展开↯

#⁹⁸⁰

作者：广西南宁市

文章：@意见反馈/技术支持/伊网/安企网发表时间：2017-09-09, 10:13:35

展开↯

#⁹⁸¹

作者：广西南宁市

#,广西南宁市,2017-09-09,09:58:17,

#,广西南宁市,2017-09-09,09:58:42,

#,广西南宁市,2017-09-09,09:59:02,

文章：@意见反馈/技术支持/伊网/安企网发表时间：2017-09-09, 09:56:44

展开↯

#⁹⁸²

作者：广西南宁市

If not now,when?
If not me,who?

#,广西南宁市,2017-09-09,09:53:50,

文章：@意见反馈/技术支持/伊网/安企网发表时间：2017-09-09, 09:47:08

展开↯

#⁹⁸³

作者：广西南宁市

js取float型小数点后两位数的方法
四舍五入
以下处理结果会四舍五入:

var num =2.446242342;
num = num.toFixed(2); // 输出结果为 2.45

Run code

Cut to clipboard

不四舍五入
以下处理结果不会四舍五入:
第一种，先把小数边整数：

Math.floor(15.7784514000 * 100) / 100  
// 输出结果为 15.77

Run code

Cut to clipboard

第二种，当作字符串，使用正则匹配：

Number(15.7784514000.toString().match(/^\d+(?:\.\d{0,2})?/))  
// 输出结果为 15.77,不能用于整数如 10 必须写为10.0000

Run code

Cut to clipboard

注意：如果是负数，请先转换为正数再计算，最后转回负数

#,广西南宁市,2017-09-08,17:06:54,
1.丢弃小数部分,保留整数部分

parseInt(5/2)

Run code

Cut to clipboard

2.向上取整,有小数就整数部分加1

Math.ceil(5/2)

Run code

Cut to clipboard

3,四舍五入.

Math.round(5/2)

Run code

Cut to clipboard

4,向下取整

Math.floor(5/2)

Run code

Cut to clipboard

#,广西南宁市,2017-09-08,17:08:20,

<script>
var num=22.127456;
alert( Math.round(num*100)/100);
</script>

Run code

Cut to clipboard

#,广西南宁市,2017-09-08,17:10:04,
功能：将浮点数四舍五入，取小数点后2位，如果不足2位则补0,
这个函数返回的是字符串的格式用法：changeTwoDecimal(3.1415926)返回3.14 changeTwoDecimal(3.1)返回3.10

function changeTwoDecimal(x)  
{  
var f_x = parseFloat(x);  
if (isNaN(f_x))  
{  
alert('function:changeTwoDecimal->parameter error');  
return false;  
}  
var f_x = Math.round(x*100)/100;  
  
return f_x;  
}  
  
功能：将浮点数四舍五入，取小数点后2位  
  
用法：changeTwoDecimal(3.1415926) 返回 3.14  
  
changeTwoDecimal(3.1475926) 返回 3.15  
  
js保留2位小数（强制）  
  
对于小数点位数大于2位的，用上面的函数没问题，但是如果小于2位的，比如：  
  
changeTwoDecimal(3.1)，将返回 3.1，如果你一定需要3.10这样的格式，那么需要下面的这个函数：  
  
function changeTwoDecimal_f(x)  
{  
var f_x = parseFloat(x);  
if (isNaN(f_x))  
{  
alert('function:changeTwoDecimal->parameter error');  
return false;  
}  
var f_x = Math.round(x*100)/100;  
var s_x = f_x.toString();  
var pos_decimal = s_x.indexOf('.');  
if (pos_decimal < 0)  
{  
pos_decimal = s_x.length;  
s_x += '.';  
}  
while (s_x.length <= pos_decimal + 2)  
{  
s_x += '0';  
}  
return s_x;  
}

Run code

Cut to clipboard

文章：JS浮点数运算多出很多位小数点Bug的解决办法发表时间：2017-09-08, 17:05:01

展开↯

#⁹⁸⁴

作者：广西南宁市

PHP保留两位小数的几种方法

$num = 10.4567;
     
    //第一种：利用round()对浮点数进行四舍五入
    echo round($num,2); //10.46
     
    //第二种：利用sprintf格式化字符串
    $format_num = sprintf("%.2f",$num);
    echo $format_num; //10.46
     
    //第三种：利用千位分组来格式化数字的函数number_format()
    echo number_format($num, 2); //10.46
    //或者如下
    echo number_format($num, 2, '.', ''); //10/46

Run code

Cut to clipboard

文章：JS浮点数运算多出很多位小数点Bug的解决办法发表时间：2017-09-08, 17:02:27

展开↯

#⁹⁸⁵

作者：广西南宁市

PHP学习之Mysql 和Mysqli区别
（1）Mysql和Mysqli的区别是：

mysqli连接是永久连接，而mysql是非永久连接。
mysql连接：每当第二次使用的时候，都会重新打开一个新的进程。
mysqli连接：一直都只使用同一个进程。
好处：这样就可以很大程度的减轻服务器压力。

(2)mysql_connect与mysql_pconnect与mysqli_connect：
mysql_pconnect打开的连接不会关闭（即使调用mysql_close也不会关闭,因为对其无效），
类似于连接缓冲池，如果下次有来自于同一个机器的同一个用户名
对同一个数据库的连接，php会自动使用上次已经建立的连接，而不需要再重新建立一个。?
好处：是省去了每次与建立连接的开销，
坏处：是需要浪费一些，占用一些连接，
所以如果用户访问量大的时候会出现错误，要把的max_connections参数改大一点，?或者使用mysql_connect()就解决问题。

connect与pconnect不会带来功能的差异,?只有性能上的差别.
一般php有俩种运行模式,?一是作为cgi运行,?二是作为apache的模块运行.?
作为cgi的时候connect跟pconnect没什么不同,?因为每次cgi进行运行结束后都会被销毁清理掉资源.

文章：mysql 远程连接速度慢的解决方案发表时间：2017-09-08, 09:42:40

展开↯

#⁹⁸⁶

作者：广西南宁市

微信公众号自定义菜单最多能创建多少个栏目菜单
1、最多创建3个一级菜单，一级菜单名称名字不多于4个汉字或8个字母。
2、每个一级菜单下的子菜单最多可创建5个，子菜单名称名字不多于8个汉字或16个字母。
温馨提示：编辑中的菜单不会马上被用户看到，发布成功后，会在24小时后在手机端同步显示，粉丝不会收到更新提示，若多次编辑，以最后一次保存为准。

文章：Weiphp微信公众平台自定义菜单等开发发表时间：2017-09-07, 18:45:24

展开↯

#⁹⁸⁷

作者：广西南宁市

CustomerService

文章：weiphp微信多客服系统插件发表时间：2017-09-06, 10:33:04

展开↯

#⁹⁸⁸

作者：广西南宁市

需要先开通qq在线客服状态，否则跳转链接会错误或者空白没有反应
QQ在线客服 qq推广 QQ通讯组件

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2500152288&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:515807823:53" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>

Run code

Cut to clipboard

该段代码，即能嵌入到你的页面，实现在线交流的功能。

文章：安卓苹果手机不同qq客服在线代码发表时间：2017-09-05, 17:47:33

展开↯

Records:2788 52/147 «‹48 49 50 51 52 53 54 55 56 ›»