评论 - lizhenqiu blog

#⁸⁵⁶

作者：广西南宁市

php redis 并发控制
针对并发控制可以使用 memcacheq ,redis channle 等方式处理
这里我单单的说一下redis 怎么去控制并发
redis控制并发主要采用 redis list api 中的 lPush llen lPop 这三个函数
lLen - 获得列表的长度
lPop - 删除列表的第一个值并返回它
lPush - 插入一个值到列表中,如果列表不存在,新建一个列表
比如我这边现在有个抢购的需求。一个商品只运行抢200个大概思路如下

每次查看 redis 消息队列长度是否已经超过或 = 200 这种写法有可能会有多抢的情况。
所以我们这边后端的单独起一个程序做队列处理。如果说数量太多那就后面的不进行处理操作。

当然。这个前端已经进入队列的用户。你不能告诉人家您已经抢到了。应该让他5分钟后再去看看结果。
这样处理的数量不会去超出。当然如果并发太大的话可以专门寻找处理并发架构，
如果要求用户体验友好那就用socket获取后端处理结果告诉用户是否抢到。redis处理还是蛮快的所以不用担心用户等待时间过长

文章：Windows环境安装PHP redis扩展发表时间：2017-11-01, 18:23:29

展开↯

#⁸⁵⁷

作者：广西南宁市

PHP中利用redis实现消息队列处理高并发请求

将请求存入redis
为了模拟多个用户的请求,使用一个for循环替代

//redis数据入队操作
$redis = new Redis();
$redis->connect('127.0.0.1',6379);
for($i=0;$i<50;$i++){
    try{
        $redis->LPUSH('click',rand(1000,5000));
    }catch(Exception $e){
        echo $e->getMessage();
    }
}

Run code

Cut to clipboard

在后台进行数据处理
守护进程

//redis数据出队操作,从redis中将请求取出
$redis = new Redis();
$redis->pconnect('127.0.0.1',6379);
while(true){
    try{
        $value = $redis->LPOP('click');
        if(!$value){
            break;
        }
        //var_dump($value)."\n";
        /*
         *  利用$value进行逻辑和数据处理
         */
    }catch(Exception $e){
        echo $e->getMessage();
    }
}

Run code

Cut to clipboard

文章：Windows环境安装PHP redis扩展发表时间：2017-11-01, 18:22:18

展开↯

#⁸⁵⁸

作者：广西南宁市

windows php_redis.dll 官方下载地址 php5x php7x

官方php_redis.dll
http://windows.php.net/downloads/pecl/releases/redis/2.2.7/

官方 linux版本的
https://pecl.php.net/package/redis

官方 php_memcache.dll
http://windows.php.net/downloads/pecl/releases/memcache/3.0.8/

更多
http://windows.php.net/downloads/pecl/

PHP7.1 php_redis.dll 
下载地址：http://windows.php.net/downloads/pecl/releases/redis/3.1.2/

Run code

Cut to clipboard

文章：Windows环境安装PHP redis扩展发表时间：2017-11-01, 18:21:26

展开↯

#⁸⁵⁹

作者：广西南宁市

认识js函数对象（Function Object）

认识函数对象（Function Object）
可以用function关键字定义一个函数，对于每个函数可以为其指定一个函数名，通过函
数名来进行调用。这些都是代码给用户的印象，而在JavaScript解释执行的时候，实际上每
个函数都是被维护为一个对象，这就是本小节将要介绍的函数对象（Function Object）。
函数对象与其它用户所定义的对象有着本质的区别，这一类对象被称之为内部对象，例
如日期对象（Date）、数组对象（Array）、字符串对象（String）都是属于内部对象。换句话
说，这些内置对象的构造器是由JavaScript本身所定义的：通过执行new Array()这样的语句
返回一个对象，JavaScript 内部有一套机制来初始化返回的对象，而不是由用户来指定对象
的构造方式。
在 JavaScript中，函数对象对应的类型是Function，正如数组对象对应的类型是Array，
日期对象对应的类型是Date一样，可以通过new Function()来创建一个函数对象，也可以通
过function关键字来创建一个对象。为了便于理解，将函数对象的创建和数组对象的创建来
比较。先看数组对象：下面两行代码的作用是一样的，都是创建一个数组对象myArray：
var myArray=[];
//等价于
var myArray=new Array();
同样，下面的两段代码也是等价的，都是创建一个函数myFunction：
function myFunction(a,b){
return a+b;
}
//等价于
var myFunction=new Function("a","b","return a+b");
现在上面的代码还有些难以理解，但是通过和构造数组对象语句的比较，可以清楚的看
到函数的对象本质，前面介绍的函数声明是上述代码的第一种方式，而在解释器内部，当遇
到这种语法时，就会自动构造一个Function 对象，将函数作为一个内部的对象来存储和运
行。从这里也可以看到，一个函数对象名称（函数变量）和一个普通变量名称具有同样的规
范，都可以通过变量名来引用这个变量，但是函数变量名后面可以跟上括号和参数列表来进
行函数调用。
也许不会有人通过new Function()的形式来创建一个函数，因为一个函数体通常会有多
条语句，如果将它们以一个字符串的形式作为参数传递，那么代码的可读性会非常的差。下
面介绍一下其使用语法：
var funcName=new Function(p1,p2,...,pn,body);
参数的类型都是字符串，p1 到pn表示所创建函数的参数名称列表，body表示所创建函
数的函数体语句，而funcName就是所创建函数的名称了。可以不指定任何参数创建一个空
函数，不指定funcName创建一个无名函数，当然那样的函数什么用处都没有。
需要注意的是，前面说p1 到pn是参数名称的列表，这意味着p1不仅仅只能代表一个
参数，它也可以是一个逗号格开的参数列表，例如下面的定义是等价的：
new Function("a", "b", "c", "return a+b+c")
new Function("a, b, c", "return a+b+c")
new Function("a,b", "c", "return a+b+c")
JavaScript引入Function类型并提供new Function()这样的语法来创建函数并不是毫无意
义的，在后面可以看到，函数作为一个对象，它本身就可以具有一些方法和属性，而为函数
对象添加属性和方法就必须借助于Function这个类型。
现在已经认识到了函数的本质，它其实是一个内部对象，由JavaScript解释器决定其运
行方式。通过上述代码创建的函数，在程序中可以使用函数名进行调用。于是在本节开头列
出的函数定义问题也得到了解释：它们都是创建函数对象的正确语法。注意直接在函数声明
后面加上括号就表示创建完成后立即进行函数调用，例如：
var i=function (a,b){
return a+b;
}(1,2);
alert(i);
这段代码会显示变量i 的值等于3。i 是表示返回的值，而不是创建的函数，因为括号
“(”比等号“=”有更高的优先级。这样的代码可能并不常用，但当用户想在很长的代码段
中进行模块化设计或者想避免命名冲突，这是一个不错的解决办法。
需要注意的是，尽管下面两种创建函数的方法是等价的：
function funcName(){
//函数体
}
//等价于
var funcName=function(){
//函数体
}
但前面一种方式创建的是有名函数，而后面是创建了一个无名函数，只是让一个变量指
向了这个无名函数。在使用上仅有一点区别，就是：对于有名函数，它可以出现在调用之后
再定义；而对于无名函数，它必须是在调用之前就已经定义。例如：
<script language="JavaScript" type="text/javascript">
<!--
func();
var func=function(){
alert(1)
}
//-->
</script>
这段语句将产生func未定义的错误，而：
<script language="JavaScript" type="text/javascript">
<!--
func();
function func(){
alert(1)
}
//-->
</script>
则能够正确执行，甚至下面的语句也能正确执行：
<script language="JavaScript" type="text/javascript">
<!--
func();
var someFunc=function func(){
alert(1)
}
//-->
</script>
由此可见，尽管JavaScript是一门解释型的语言，但它会在进行函数调用时，检查整个
代码中是否存在相应的函数定义，这个函数名只有是通过function funcName()形式定义的才
会有效，而不能是匿名函数。

Run code

Cut to clipboard

文章：理解JavaScript构造函数发表时间：2017-11-01, 17:04:18

展开↯

#⁸⁶⁰

作者：广西南宁市

js深入理解构造函数和原型对象

1.在典型的oop的语言中，如java,都存在类的概念，类就是对象的模板，对象就是类的实例。但在js中不存在类的概念，js不是基于类，而是通过构造函数(constructor)和原型链（propotype chains）实现的。但在ES6中引入了类（class）这个概念，作为对象的模板，新的class写法知识让原型对象的写法更加清晰，这里不重点谈这个

2.首先我们来详细了解下什么是构造器

　　构造函数的特点：

　　　　a:构造函数的首字母必须大写，用来区分于普通函数

　　　　b:内部使用的this对象，来指向即将要生成的实例对象

　　　　c:使用New来生成实例对象

　　eg1:

function Person(name,age){
     this.name = name;    
     this.age = age;   
     this.sayHello = function(){   
         console.log(this.name +"say hello");
    }
}

var boy = new Person("bella",23);    
boy.sayHello(); // bella say hello

Run code

Cut to clipboard

　　构造函数的缺点：

　　　　所有的实例对象都可以继承构造器函数中的属性和方法。但是，同一个对象实例之间，无法共享属性

　　　　解决思路：

　　　　　　a:所有实例都会通过原型链引用到prototype

　　　　　　b:prototype相当于特定类型所有实例都可以访问到的一个公共容器

　　　　　　c:那么我们就将重复的东西放到公共容易就好了

　　　　eg2:

function Person(name,age){
    this.name = name;
    this.age = age;
    this.sayHello = function(){
        console.log(this.name + "say hello");
    }
}
var girl = new Person("bella",23);
var boy = new Person("alex",23);
console.log(girl.name);  //bella
console.log(boy.name);   //alex
console.log(girl.sayHello === boy.sayHello);  //false

Run code

Cut to clipboard

　　一个构造函数Person生成了两个对象实例girl和boy,并且有两个属性和一个方法。但是sayHello方法是不一样的。如上图（图画得很丑）。也就是说当New一个实例对象的时候，都会去创建一个sayHello方法，这就浪费了内存资源，因为sayHello方法使一样的行为的，完全可以被两个实例对象共享。

　　所以，缺点就是：同一个构造函数的对象实例之间无法共享属性和方法。

　　为了解决构造函数的这个缺点，js提供了prototype属相来解决该问题。

　　propotype属性的作用

　　js中每个数据类型都是对象，除了null 和 undefined（这个可以参考另一篇将null 和 undefined的博客）,而每个对象都是继承自一个原型对象，只有null除外，它没有自己的原型对象，最终的Object的原型为null

　　eg3:

function Person(name,age){
    this.name = name;
    this.age = age;
}
Person.propotype.sayHello = function(){
    console.log(this.name + "say hello");
}
var girl = new Person("bella",23);
var boy = new Person("alex",23);
console.log(girl.name);  //bella
console.log(boy.name);   //alex
console.log(girl.sayHello === boy.sayHello);  //true

Run code

Cut to clipboard

function Person(name,age){
    this.name = name;
    this.age = age;
}
Person.propotype.sayHello = function(){
    console.log(this.name + "say hello");
}
var girl = new Person("bella",23);
console.log(girl.construcotr); //Person()
console.log(girl.construcotr == Person.propotype.construcotr); //true

Run code

Cut to clipboard

　　constructor属性的作用

　　　　a:分辨原型对象到底是哪个构造函数　

 function Person(){};
 var person1 = new Person();
 console.log(person1.construcotr === Person); //true

Run code

Cut to clipboard

　　　　b:从实例新建另一个实例

 function Person(){};
 var person1 = new Person();
 var person2 = new person1.construcotr();
 console.log(person2 instanceof Person); //true

Run code

Cut to clipboard

　　　　c:由于constructor属性是一种原型对象和构造函数的关系，所以在修改原型对象的时候，一定要注意construtor的指向问题，避免instanceof失真，关于这一点，会在继承中讲到。

3.了解了构造器，我们来看下原型prototype

　　JS中万物都是对象，但是对象也分为：普通对象和函数对象，也就是Object 和 Function.

　　那么怎么区分普通对象和函数对象呢？ ---凡是通过New Function()创建的对象都是函数对象，其他的都是普通对象.

　　需要注意的是：普通对象没有propotype（prototype即是属性也是对象），但是有__proto__属性。

　　js创建对象的时候都有一个__propo__内置属性，用于指向创建它的函数对象的原型对象prototype。

　　我们还是来根据eg3的代码来分析原型链

　　console.log(girl.__proto__ === Person.protype);//true

　　console.log(Persion.propotype.__proto__ === Object.propotype);//true

　　console.log(Object.porpotype.__proto__); //null

　　通过__proto__串起来直到Object.propotype.__proto__为null的链叫做原型链(矩形表示函数对象，椭圆形表示普通对象)

　　也许看到这个图会有几个疑问

　　　　a:为什么Object.__proto__指向Function.prototype?

　　　　　　Object是函数对象，是通过new Function()创建的，所以...

　　　　b:Function.__proto__ === Function.prototype //true

　　　　　　Function也是对象函数，通过new Function()创建，所以...

文章：理解JavaScript构造函数发表时间：2017-11-01, 16:50:44

展开↯

#⁸⁶¹

作者：广西南宁市

后者可以这么说
content-box：标准盒模型，CSS定义的宽高只包含content的宽高
border-box：IE盒模型，CSS定义的宽高包括了content，padding和border

#,广西南宁市,2017-11-01,16:46:35, 为什么只是 border和padding，给设置margin为什么还是会溢出呢？

文章：理解box-sizing布局发表时间：2017-11-01, 16:46:24

展开↯

#⁸⁶²

作者：广西南宁市

function myObject(msg){
}
myObject.name='china';
myObject.nameThis='china';
alert(myObject.name); //IE: china FF:myObject
alert(myObject.nameThis); //IE,FF: china

Run code

Cut to clipboard

#,广西南宁市,2017-11-01,16:29:20, 好像name是FF的关键字，在IE下可以，但是在FF下换个名字也可以

文章：理解JavaScript构造函数发表时间：2017-11-01, 16:29:06

展开↯

#⁸⁶³

作者：广西南宁市

当我们试图访问实例对象的属性或方法时，如果该属性或方法在此实例对象上，那么就去原型链上查找，如果原型链上没有，会再向上一级原型链上查找。
这是基于原型链实现继承中对属性和方法的访问，例子如下：

var Person=function(){};
//将函数原型的属性重写为stu和sayHello。
Person.prototype={
Stu:{Name:"Bill"},
sayHello:function(){
alert("Hello,I'm "+this.Stu.Name)
}
}
//实例化
var p1=new Person();
//实例本身没有sayHello方法，所以调用了原型链上的sayHello方法。
p1.sayHello();//Hello.I'm Bill

Run code

Cut to clipboard

但当我们修改实例对象的属性和方法时，如果此对象的该属性或方法不存在，那么会在该对象上创建该属性，而不是修改原型链上的属性，例子如下：

//实例化p2
var p2=new Person();
p2.Stu = "student";
alert(p1.Stu); //[Object object] 实例p1依然访问原型链上的Stu属性，并且原型链上的Stu属性并未被p2.Stu = "student"所影响。
alert(p2.Stu);//student 实例p2访问的Stu已经是自己的Stu属性了，p2.Stu = "student"使p2在自己的对象上创建了Stu属性。

//但是，有这样一种情况：
delete p2.Stu;//删除实例p2的Stu属性。
alert(p2.Stu);//[Object object] 说明p2自身的Stu属性已被删除，此时访问的已经是原型链上的Stu属性了。
//更改实例对象在原型链上的属性，如果按照前面的说法，p2可能会创建自己的Stu.Name属性并赋值为Martin。但实际情况是这样的，如果实例对象要修改自身的一级属性（p2.Stu = "xxx";），并且该属性不存在，那么，会在该实例对象上创建Stu属性，并修改该属性，此时，不会影响对原型链上的该属性造成影响。如果实例对象要修改自身的N(N>1)级属性（p2.Stu.Name = "xxx";），若该实例不存在N级前的N-1级中的某个属性，就会到原型链上查找该属性，若未找到，查找下一级原型链，如果到最后都没有找到，给出TypeError错误，如果找到了，那么就在该原型链上修改此属性，例子如下：
p2.Stu.Name="Martin";//自身不存在Stu属性，访问原型链，原型链上存在，修改该原型链上的该属性，当然，这里只是一级原型链，也可能是二级或者N级。
p1.sayHello();//Martin 说明原型链已被修改
p2.sayHello();//Martin 说明原型链已被修改
p2.Teacher.Name = "jack";// TypeError: Cannot set property 'Name' of undefined 实例和原型链上都不存在Teacher属性，无法赋值。

Run code

Cut to clipboard

原因：
根据ECMA262-3 ，当对对象O（所有javascript对象和部分宿主对象）的属性P设置值时会调用内置的[[Put]]方法：
8.6.22[[Put]]方法描述：
1.以名字 P 调用 O 的[[CanPut]]方法。
2.如果 Result(1) 为 false，返回。
3.如果 O 没有以 P 为名的属性，转到步骤6.
4.将该属性的值设为 V 。不改变该属性的特征。
5.返回。
6.创建以 P 为名属性，将其值设为 V ，并给予它空特征。
7.返回。
不过，值得注意的是，假如 O 是一个 Array 对象，关于[[Put]]方法有更多详细叙述（15.4.5.1）。

8.6.2.3 [[CanPut]]方法执行步骤：
1.如果 O 没有以 P 命名的属性，转到步骤4.
2.如果该属性有 ReadOnly 特征，返回 false。
3.返回 true。
4.如果 O 的[[Prototype]]为 null，返回 true。
5.以属性名 P 调用 O 的[[Prototype]]的[[CanPut]]方法。
6.返回 Result(5)。

ECMA的解释印证了我们前面例子的现象。

文章：理解JavaScript构造函数发表时间：2017-11-01, 16:27:59

展开↯

#⁸⁶⁴

作者：广西南宁市

<script>
var a = 5;
(a > 0) ? (alert("这是正整数"),document.title="也是自然数") : alert("这是负数");
</script>

Run code

Cut to clipboard

#,广西南宁市,2017-11-01,15:58:39, 语句用逗号可以分开了，就是不能出现return

#,广西南宁市,2017-11-01,15:59:06, 语句块是没有返回值的。。。另外分号表示语句结束
碰到这种情况你可以用小括号和逗号

#,广西南宁市,2017-11-01,15:59:24,
{} 花括号是创建对象字面量的符号,而对象是由若干个 "名/值"对组成的集合对象的属性名与属性值之间由冒号连接所以这里JS认为你要创建一个对象,可对象里又找不到冒号

#,广西南宁市,2017-11-01,15:59:43, 这玩意和大一学的C#的｛｝表示语句段的意思不一样，看来

文章：JavaScript简写技巧发表时间：2017-11-01, 15:58:25

展开↯

#⁸⁶⁵

作者：广西南宁市

最后一点 ~~ 刚知道，那parseInt也可以用 ~~ 了。
就是if的时候要注意，比如

if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
let variable2 = variable1;
}
const variable2 = variable1 || 'new';

Run code

Cut to clipboard

要考虑variable1为0的时候，因为当0 的时候，上下两个语句是不一样的结果。

文章：JavaScript简写技巧发表时间：2017-11-01, 15:51:24

展开↯

#⁸⁶⁶

作者：广西南宁市

两个正方体旋转logo特效动画
立方体魔方中里面包含小正方体方块图标

<style>
.cube-wrapper[data-v-bc50a1ba] {
	width: 100%;
	position: relative;
	-webkit-transform: scale(.25);
	transform: scale(.25);
	height: 50px;
	z-index: -1
}

.cube-wrapper .cube[data-v-bc50a1ba],.cube-wrapper .cube li[data-v-bc50a1ba] {
	position: absolute;
	display: block
}

.cube-wrapper .cube[data-v-bc50a1ba] {
	width: 100%;
	height: 100%;
	padding: 0;
	-webkit-transform-origin: 50px 50px;
	transform-origin: 50px 50px;
	-webkit-transform: rotateX(-33.5deg) rotateY(45deg);
	transform: rotateX(-33.5deg) rotateY(45deg);
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-animation: slow-spin-data-v-bc50a1ba 3s linear infinite;
	animation: slow-spin-data-v-bc50a1ba 3s linear infinite;
	margin: -50px 0 0 -50px;
	top: 50%;
	left: 50%
}

.cube-wrapper .cube li[data-v-bc50a1ba] {
	width: 75pt;
	height: 75pt
}

.cube-wrapper .cube li[data-v-bc50a1ba]:after {
	content: "";
	display: block;
	position: absolute;
	width: 75pt;
	height: 75pt;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	background-color: rgba(33,150,243,.2)
}

.cube-wrapper .cube .back[data-v-bc50a1ba],.cube-wrapper .cube .front[data-v-bc50a1ba],.cube-wrapper .cube .left[data-v-bc50a1ba],.cube-wrapper .cube .right[data-v-bc50a1ba],.cube-wrapper .cube .top[data-v-bc50a1ba] {
	background: radial-gradient(transparent 30%,rgba(6,68,117,.2) 100%)
}

.cube-wrapper .cube .front[data-v-bc50a1ba] {
	-webkit-transform: translateZ(50px);
	transform: translateZ(50px)
}

.cube-wrapper .cube .back[data-v-bc50a1ba] {
	-webkit-transform: rotateX(-180deg) translateZ(50px);
	transform: rotateX(-180deg) translateZ(50px)
}

.cube-wrapper .cube .right[data-v-bc50a1ba] {
	-webkit-transform: rotateY(90deg) translateZ(50px);
	transform: rotateY(90deg) translateZ(50px)
}

.cube-wrapper .cube .left[data-v-bc50a1ba] {
	-webkit-transform: rotateY(-90deg) translateZ(50px);
	transform: rotateY(-90deg) translateZ(50px)
}

.cube-wrapper .cube .top[data-v-bc50a1ba] {
	-webkit-transform: rotateX(90deg) translateZ(50px);
	transform: rotateX(90deg) translateZ(50px)
}

.cube-wrapper .cube .top[data-v-bc50a1ba]:after {
	background-color: rgba(33,150,243,.2)
}

.cube-wrapper .cube .bottom[data-v-bc50a1ba] {
	-webkit-transform: rotateX(-90deg) translateZ(50px);
	transform: rotateX(-90deg) translateZ(50px)
}

.cube-wrapper .cube .floor[data-v-bc50a1ba] {
	box-shadow: -300px 0 50px rgba(0,0,0,.3);
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	width: 110px;
	height: 110px;
	left: 295px;
	background-color: transparent;
	-webkit-transform: rotateX(-90deg) translateZ(60px);
	transform: rotateX(-90deg) translateZ(60px)
}

.cube-wrapper .cube .floor[data-v-bc50a1ba]:after {
	display: none
}

.cube-wrapper .cube-inner[data-v-bc50a1ba],.cube-wrapper .cube-inner li[data-v-bc50a1ba] {
	position: absolute;
	display: block
}

.cube-wrapper .cube-inner[data-v-bc50a1ba] {
	width: 100%;
	height: 100%;
	padding: 0;
	top: 50%;
	left: 50%;
	-webkit-transform-origin: 25px 25px;
	transform-origin: 25px 25px;
	margin: -25px 0 0 -25px;
	-webkit-transform: rotateX(-33.5deg) rotateY(45deg);
	transform: rotateX(-33.5deg) rotateY(45deg);
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-animation: fast-spin-data-v-bc50a1ba 3s linear infinite;
	animation: fast-spin-data-v-bc50a1ba 3s linear infinite
}

.cube-wrapper .cube-inner li[data-v-bc50a1ba] {
	width: 50px;
	height: 50px
}

.cube-wrapper .cube-inner li[data-v-bc50a1ba]:after {
	content: "";
	display: block;
	position: absolute;
	width: 50px;
	height: 50px;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	background-color: rgba(0,0,0,.2)
}

.cube-wrapper .cube-inner .back[data-v-bc50a1ba],.cube-wrapper .cube-inner .front[data-v-bc50a1ba],.cube-wrapper .cube-inner .left[data-v-bc50a1ba],.cube-wrapper .cube-inner .right[data-v-bc50a1ba],.cube-wrapper .cube-inner .top[data-v-bc50a1ba] {
	background: radial-gradient(transparent 30%,rgba(0,0,0,.2) 100%)
}

.cube-wrapper .cube-inner .front[data-v-bc50a1ba] {
	-webkit-transform: translateZ(25px);
	transform: translateZ(25px)
}

.cube-wrapper .cube-inner .back[data-v-bc50a1ba] {
	-webkit-transform: rotateX(-180deg) translateZ(25px);
	transform: rotateX(-180deg) translateZ(25px)
}

.cube-wrapper .cube-inner .right[data-v-bc50a1ba] {
	-webkit-transform: rotateY(90deg) translateZ(25px);
	transform: rotateY(90deg) translateZ(25px)
}

.cube-wrapper .cube-inner .left[data-v-bc50a1ba] {
	-webkit-transform: rotateY(-90deg) translateZ(25px);
	transform: rotateY(-90deg) translateZ(25px)
}

.cube-wrapper .cube-inner .top[data-v-bc50a1ba] {
	-webkit-transform: rotateX(90deg) translateZ(25px);
	transform: rotateX(90deg) translateZ(25px)
}

.cube-wrapper .cube-inner .top[data-v-bc50a1ba]:after {
	background-color: rgba(0,0,0,.2)
}

.cube-wrapper .cube-inner .bottom[data-v-bc50a1ba] {
	-webkit-transform: rotateX(-90deg) translateZ(25px);
	transform: rotateX(-90deg) translateZ(25px)
}

@-webkit-keyframes slow-spin-data-v-bc50a1ba {
	0% {
		-webkit-transform: rotateX(-33.5deg) rotateY(45deg);
		transform: rotateX(-33.5deg) rotateY(45deg)
	}

	to {
		-webkit-transform: rotateX(-33.5deg) rotateY(225deg);
		transform: rotateX(-33.5deg) rotateY(225deg)
	}
}

@keyframes slow-spin-data-v-bc50a1ba {
	0% {
		-webkit-transform: rotateX(-33.5deg) rotateY(45deg);
		transform: rotateX(-33.5deg) rotateY(45deg)
	}

	to {
		-webkit-transform: rotateX(-33.5deg) rotateY(225deg);
		transform: rotateX(-33.5deg) rotateY(225deg)
	}
}

@-webkit-keyframes fast-spin-data-v-bc50a1ba {
	0% {
		-webkit-transform: rotateX(-33.5deg) rotateY(45deg);
		transform: rotateX(-33.5deg) rotateY(45deg)
	}

	to {
		-webkit-transform: rotateX(-33.5deg) rotateY(-315deg);
		transform: rotateX(-33.5deg) rotateY(-315deg)
	}
}

@keyframes fast-spin-data-v-bc50a1ba {
	0% {
		-webkit-transform: rotateX(-33.5deg) rotateY(45deg);
		transform: rotateX(-33.5deg) rotateY(45deg)
	}

	to {
		-webkit-transform: rotateX(-33.5deg) rotateY(-315deg);
		transform: rotateX(-33.5deg) rotateY(-315deg)
	}
}
</style><div data-v-69ecf4ec="" class="logo"><a data-v-69ecf4ec="" href="/" class="router-link-exact-active router-link-active"><section data-v-bc50a1ba="" data-v-69ecf4ec="" class="cube-wrapper"><ul data-v-bc50a1ba="" class="cube-inner"><li data-v-bc50a1ba="" class="front"></li> <li data-v-bc50a1ba="" class="back"></li> <li data-v-bc50a1ba="" class="right"></li> <li data-v-bc50a1ba="" class="left"></li> <li data-v-bc50a1ba="" class="top"></li> <li data-v-bc50a1ba="" class="bottom"></li></ul> <ul data-v-bc50a1ba="" class="cube"><li data-v-bc50a1ba="" class="front"></li> <li data-v-bc50a1ba="" class="back"></li> <li data-v-bc50a1ba="" class="right"></li> <li data-v-bc50a1ba="" class="left"></li> <li data-v-bc50a1ba="" class="top"></li> <li data-v-bc50a1ba="" class="bottom"></li> <li data-v-bc50a1ba="" class="floor"></li></ul></section></a></div>

Run code

Cut to clipboard

文章：常用html、demo代码发表时间：2017-11-01, 15:36:13

展开↯

#⁸⁶⁷

作者：北京市

You keep pressing until it hurts. Then you know where to look。

文章：@意见反馈/技术支持/伊网/安企网发表时间：2017-11-01, 01:41:05

展开↯

#⁸⁶⁸

作者：广西南宁市

火速标题截取后两个字中文汉字红色
PHP中文处理中文字符串截取(mb_substr)和获取中文字符串字数

  <?php
	$newwstt=mb_substr($r['name'],2,4,'utf-8');
	$r['name']=str_ireplace($newwstt,'<span class="fcred">'.$newwstt.'</span>',$r['name']);
  ?>

Run code

Cut to clipboard

文章：PHP分割txt纯文本小说格式章节发表时间：2017-10-31, 18:14:54

展开↯

#⁸⁶⁹

作者：广西南宁市

js将div中滚动条滚动到指定位置
Js代码：

onload = function () {
  //初始化
  scrollToLocation();
};
function scrollToLocation() {
  var mainContainer = $('#thisMainPanel'),
  scrollToContainer = mainContainer.find('.son-panel:last');//滚动到<div id="thisMainPanel">中类名为son-panel的最后一个div处
  //scrollToContainer = mainContainer.find('.son-panel:eq(5)');//滚动到<div id="thisMainPanel">中类名为son-panel的第六个处
  //非动画效果
  //mainContainer.scrollTop(
  //  scrollToContainer.offset().top - mainContainer.offset().top + mainContainer.scrollTop()
  //);
  //动画效果
  mainContainer.animate({
    scrollTop: scrollToContainer.offset().top - mainContainer.offset().top + mainContainer.scrollTop()
  }, 2000);//2秒滑动到指定位置
}

Run code

Cut to clipboard

Html代码：

<div id="thisMainPanel" style="height:200px;overflow-y: scroll;border:1px solid #f3f3f3;">
    <div class="son-panel">我是类容区域-1</div>
    <div class="son-panel">我是类容区域-2</div>
    <div class="son-panel">我是类容区域-3</div>
    <div class="son-panel">我是类容区域-4</div>
    <div class="son-panel" style="height:160px;">我是类容区域-5</div>
    <div class="son-panel">我是类容区域-6</div>
    <div class="son-panel">我是类容区域-7</div>
    <div class="son-panel">我是类容区域-8</div>
</div>

Run code

Cut to clipboard

文章：CSS3可控旋转Js播放音乐按钮发表时间：2017-10-31, 18:11:56

展开↯

#⁸⁷⁰

作者：广西南宁市

html5 audio标签播放完成后事件

var audioaud = document.getElementById("fmmmedia");
audioaud.addEventListener('ended',function(){
		var ids = document.getElementById('fmmmedia');
		var target = document.getElementById('audio-btn');
        ids.pause();
		$(target).removeClass('on').addClass('off');
		$("#mmuslisss").hide();
	});

Run code

Cut to clipboard

文章：CSS3可控旋转Js播放音乐按钮发表时间：2017-10-31, 15:07:25

展开↯

#⁸⁷¹

作者：广西南宁市

jquery each判断是否执行到最后一个元素

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>menu</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
    $ (function ()
    {
        var len = $ (":button").length;
        $ (":button").each (function (i, dom)
        {
            if (i === len - 1)
            {
                alert (i)
            }
        });
    })
</script>
</head>
<body>
    <button>toggle</button>
    <button>toggle</button>
    <button>toggle</button>
</body>
</html>

Run code

Cut to clipboard

文章：常用html、demo代码发表时间：2017-10-31, 12:26:08

展开↯

#⁸⁷²

作者：广西南宁市

weiphp onethinkphp 多个编辑器bug修复

\Addons\EditorForAdmin

Run code

Cut to clipboard

问题是由于框架没有考虑到一个页面多个uditor实例，所以框架中的写法是读取模型字段的时候，有编辑器类型的字段就引入ueditor的js文件，并创建1个imageEditor对象变量。但是这样有多个编辑器的情况下，ueditor初始化js文件和imageEditor肯定是会相互覆盖的。
我的解决方法是重写框架的加载方法，用静态变量判断是否已经加载了ueditor.all.js这个文件，如果加载了不重复加载。另外编辑器实例的创建使用!function(){}()风格，把imageEditor这个变量封装到函数中作为局部变量，千万不能放在全局中。

<else />
				<?php
					$_SESSION['nfasdfasdfsdasad']++;
					if($_SESSION['nfasdfasdfsdasad']==2){
				?>
			<script type="text/javascript" charset="utf-8" src="__STATIC__/ueditor/ueditor.config.js?v={:SITE_VERSION}"></script>
			<script type="text/javascript" charset="utf-8" src="__STATIC__/ueditor/ueditor.all.js?v={:SITE_VERSION}"></script>
			<script type="text/javascript" charset="utf-8" src="__STATIC__/ueditor/lang/zh-cn/zh-cn.js?v={:SITE_VERSION}"></script>
			<?php
				}
			?>
			<script type="text/javascript">
				$('textarea[name="{$addons_data.name}"]').attr('id', 'editor_id_{$addons_data.name}');
				window.UEDITOR_HOME_URL = "__STATIC__/ueditor/";
				window.UEDITOR_CONFIG.initialFrameHeight = parseInt('{$addons_config.editor_height}');
				window.UEDITOR_CONFIG.scaleEnabled = <eq name="addons_config.editor_resize_type" value="1">true<else />false</eq>;
				window.UEDITOR_CONFIG.imageUrl = '{:addons_url("EditorForAdmin://Upload/ue_upimg")}';
				window.UEDITOR_CONFIG.imagePath = '';
				window.UEDITOR_CONFIG.imageFieldName = 'imgFile';
				//在这里扫描图片
				window.UEDITOR_CONFIG.imageManagerUrl='{:addons_url("EditorForAdmin://Upload/ue_mgimg")}';//图片在线管理的处理地址
        		window.UEDITOR_CONFIG.imageManagerPath='';        
				var imageEditor = UE.getEditor('editor_id_{$addons_data.name}');
				//添加一下判断是否是单个按钮管理图片 需要执行一下代码
				<if condition="isset($addons_data['btnClassName'])" >
				imageEditor.ready(function () {
					  //设置编辑器不可用
					  imageEditor.setDisabled();
					  //隐藏编辑器，因为不会用到这个编辑器实例，所以要隐藏
					  imageEditor.hide();
					  //侦听图片上传
					  imageEditor.addListener('beforeInsertImage', function (t, arg) {
						 //将地址赋值给相应的input,只去第一张图片的路径
						 //console.log(t);
						 //console.log(arg);
						 <if condition="empty($addons_data['is_mult'])" >
						 	 //单张情况
						 	 $(".{$addons_data.name}_preview").html("");
						 	 var imghtml = $("<img src="+arg[0].src+" width='100' height='100'/>");
							
							 $(".{$addons_data.name}_preview").append(imghtml);
							 //储存路劲
							 //单张图片存储图片id
							  $("#editor_id_{$addons_data.name}").text(arg[0].id);
							 //图片预览
							 $(".{$addons_data.name}_preview").show();
							 //微信预览
							 $('.weixin-cover-pic').attr('src',arg[0].src);
							 //console.log(arg);
							 
						 <else />
						 	//多张情况
						 	var srcs = "";
							var srcIds = "";
							 //$(".{$addons_data.name}_preview").html("");
							 for(var i=0;i<arg.length;i++){
								 if(i==arg.length-1){
									srcs = srcs + arg[i].src;
									srcIds = arg[i].id;
								 }else{
									 srcs = srcs + arg[i].src+"|";
									 srcIds = srcIds + arg[i].id+",";
									 }
								var imghtml = $("<img src="+arg[i].src+" width='100' height='100'/>");
								$(".{$addons_data.name}_preview").append(imghtml);
								//console.log(arg[i].src);	 
							 }
							 $(".{$addons_data.name}_preview").append(imghtml);
							  $(".{$addons_data.name}_preview").show();
							  var oldIds = $("#editor_id_{$addons_data.name}").text();
							  //多张图片存储一逗号分隔的id串
							  $("#editor_id_{$addons_data.name}").text(oldIds+","+srcIds);
						 </if>
					  })
					  //增加按钮className
					  $('.{$addons_data.btnClassName}').bind('click',function(){
							var uploadImage = imageEditor.getDialog("insertimage");
								uploadImage.open();
						  })
					 
				 });
				 </if>
			</script>
				<?php
					if($_SESSION['nfasdfasdfsdasad']>2) $_SESSION['nfasdfasdfsdasad']=1;
				?>
		</eq>

Run code

Cut to clipboard

#,广西南宁市,2017-10-31,10:18:48,

\Public\static\ueditor\ueditor.all.js

Run code

Cut to clipboard

id: 'ueditor_' + Math.random(),//me.uid,

Run code

Cut to clipboard

#,广西南宁市,2017-10-31,10:19:49,

\Addons\EditorForAdmin\content.html

Run code

Cut to clipboard

文章：weiphp微信第三方开发框架新增插件后列表页新增页面空白解决办法发表时间：2017-10-31, 10:16:29

展开↯

#⁸⁷³

作者：广西南宁市

可以使用亦或
int a = 2;
int b = 3;

a = a^b;
b = a^b;
a= a^b;

#,广西南宁市,2017-10-30,17:17:28, 你这种如果是两个对象交换就不行了把

#,广西南宁市,2017-10-30,17:17:42,@1, 只是基本类型交换基本类型大数据的交换节省个了很多性能

文章：js一些算法小技巧发表时间：2017-10-30, 17:17:16

展开↯

#⁸⁷⁴

作者：广西南宁市

for(i in json)
最好写成 for(var i in json) 否则i就变成全局的了, 会污染整个window

文章：js一些算法小技巧发表时间：2017-10-30, 17:17:06

展开↯

Records:2804 46/148 «‹42 43 44 45 46 47 48 49 50 ›»