2017年9月 – Li Jianwei's Blog

最简单最快的方法给H5页面添加背景音乐播放（css样式美化）

看了很多场景应用，右上角总是会有一个音频按钮，会播放音乐，现在通过简单几步就可以实现这个功能。

1.先上基础的html，定位用了fixed（source 标签里面对应的音频链接换为自己的音频连接）

<span id="musicControl">
 <a id="mc_play" class="on" onclick="play_music();">
 <audio id="musicfx" loop="loop" autoplay="autoplay">
 <source src="http://rrj.shangdee.com/bg.mp3" type="audio/mpeg">
 </audio>
 </a>
 </span>

2.添加css进行美化

*{margin:0px;padding:0px;}
body{background:#000;}
/* music */
@-webkit-keyframes reverseRotataZ{
 0%{-webkit-transform: rotateZ(0deg);}
 100%{-webkit-transform: rotateZ(-360deg);}
}
@-webkit-keyframes rotataZ{
 0%{-webkit-transform: rotateZ(0deg);}
 100%{-webkit-transform: rotateZ(360deg);}
}
#musicControl { position:fixed;right:10px;top:20px;margin-top:0;display:inline-block;z-index:99999999}
#musicControl a { display:inline-block;width: 25px; height: 25px;overflow:hidden;background:url('./images/mcbg.png') no-repeat;background-size:100%;}
#musicControl a audio{width:100%;height:56px;}
#musicControl a.stop { background-position:left bottom;}
#musicControl a.on { background-position:0px 1px;-webkit-animation: reverseRotataZ 1.2s linear infinite;}
#music_play_filter{width:100%;height:100%;overflow:hidden;position:fixed;top:0;left:0;z-index:99999998;}

这里的css里面有个背景图，是个旋转的按钮，点击这里下载mcbg.png

3.添加JS(之前不要忘 )

	function play_music(){
		if(music.paused){
			music.play();
			 $('#mc_play').attr('class','on');
		}else{
			music.pause();
			 $('#mc_play').attr('class','stop');
		}
	}

这个时候基本就已经OK了，最后来一张效果图吧

JS控制随机数生成概率的一种方式

需求：我想生成10个数，范围为0~9，其中生成的数以及生成的概率如下

0————10%

1————20%

2————5%

3————30%

4————5%

5————5%

6————5%

7————10%

8————5%

9————5%

话不多说，直接贴代码

/*
当0<=random<0.1(区间跨度0.1)             id = 0;
当0.1<=random<0.3(区间跨度0.2)           id = 1;
当0.3<=random<0.35(区间跨度0.05)         id = 2;
当0.35<=random<0.65(区间跨度0.3)         id = 3;
当0.65<=random<0.7(区间跨度0.05)         id = 4;
当0.7<=random<0.75(区间跨度0.05)         id = 5;
当0.75<=random<0.8(区间跨度0.05)         id = 6
当0.8<=random<0.9(区间跨度0.1)           id = 7
当0.9<=random<0.95(区间跨度0.05)         id = 8
当0.95<=random<1(区间跨度0.05)           id =9
 */
var id;
var random= Math.random();
console.log(random);

if(random< 0.1)
    id= 0;
else if(random< 0.3)
   id= 1;
else if(random< 0.35)
   id= 2;
else if(random< 0.65)
   id= 3
else if(random< 0.7)
   id= 4;
else if(random< 0.75)
   id= 5;
else if(random< 0.8)
   id= 6;
else if(random< 0.9)
   id= 7;
else if(random< 0.95)
   id= 8;
else if(random< 1)
   id= 9;

console.log(id);

php使用base64加解密url带中文参数容易乱码的解决方案

很多时候，我们需要在url中传递中文字符或是其它的html等特殊字符，似乎总会有各种乱，不同的浏览器对他们的编码又不一样，

但是在使用的过程中又遇到一个问题，base64_encode 编码后的字符串中含有 “/”, “+”, “=” 等字符，

这些字符在url编码中又是特殊字符，比如 “+” ，它就表示 “空格”，但是不同的浏览器对“空格”的编码又不一样，有的是用“+”表示，有的是用“20%”表示，也就是说，让这些base64_encode编码后的字符串在url中传递，用不同的浏览器去浏览时，服务端得到值不一样。

于是乎，想到了一个折中办法，先将这些base64编码后的特殊字符替换掉，到服务端后，又替换回来：

<?php
function base_encode($str) {
 $src = array("/", "+", "=");
 $dist = array("_a", "_b", "_c");
 $old = base64_encode($str);
 $new = str_replace($src, $dist, $old);
 
 return $new;
}
 
function base_decode($str) {
 $src = array("_a", "_b", "_c");
 $dist = array("/", "+", "=");
 $old = str_replace($src, $dist, $str);
 $new = base64_decode($old);
 
 return $new;
}

thinkphp5(tp)在iis下部署的重写规则配置

有时候特殊情况需要在iis上运行php程序，这个时候难免不了配置url重写规则。

我这里是tp5和iis7下做的例子，解决方案：

第一步：

你可以先找下你服务器iis上有没有url重写的设置图标，一般在处理程序映射的旁边，如果有的话可以直接跳过第一步，没有的话就看下面的步骤，你首先需要下载url重写的模块，

下载地址:https://www.microsoft.com/en-us/download/details.aspx?id=5747

选择好你要下载的版本，直接安装，安装成功后重启iis，你就会发现多了个url重写的设置。

第二步：

在网站根目录web.config配置文件中添加节点：

 <rewrite>
 <rules>
 <rule name="OrgPage" stopProcessing="true">
 <match url="^(.*)$" />
 <conditions logicalGrouping="MatchAll">
 <add input="{HTTP_HOST}" pattern="^(.*)$" />
 <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
 <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
 </conditions>
 <action type="Rewrite" url="index.php/{R:1}" />
 </rule>
 </rules>
 </rewrite>

其他版本的重写可能是这样：

 <?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
 <rule name="OrgPage" stopProcessing="true">
 <match url="^(.*)$" />
 <conditions logicalGrouping="MatchAll">
 <add input="{HTTP_HOST}" pattern="^(.*)$" />
 <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
 <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
 </conditions>
 <action type="Rewrite" url="index.php/{R:1}" />
 </rule>
</rules> 
</rewrite>
</system.webServer>
</configuration>

Rem自适应js(现成HTML模板)

先上基础JS

<span class="pl-c">//designWidth:设计稿的实际宽度值，需要根据实际设置
//maxWidth:制作稿的最大宽度值，需要根据实际设置
//</span>这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750)
;(function(designWidth, maxWidth) {
	var doc = document,
	win = window,
	docEl = doc.documentElement,
	remStyle = document.createElement("style"),
	tid;
 
	function refreshRem() {
		var width = docEl.getBoundingClientRect().width;
		maxWidth = maxWidth || 540;
		width>maxWidth && (width=maxWidth);
		var rem = width * 100 / designWidth;
		remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
	}
 
	if (docEl.firstElementChild) {
		docEl.firstElementChild.appendChild(remStyle);
	} else {
		var wrap = doc.createElement("div");
		wrap.appendChild(remStyle);
		doc.write(wrap.innerHTML);
		wrap = null;
	}
	//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
	refreshRem();
 
	win.addEventListener("resize", function() {
		clearTimeout(tid); //防止执行两次
		tid = setTimeout(refreshRem, 300);
	}, false);
 
	win.addEventListener("pageshow", function(e) {
		if (e.persisted) { // 浏览器后退的时候重新计算
			clearTimeout(tid);
			tid = setTimeout(refreshRem, 300);
		}
	}, false);
 
	if (doc.readyState === "complete") {
		doc.body.style.fontSize = "16px";
	} else {
		doc.addEventListener("DOMContentLoaded", function(e) {
			doc.body.style.fontSize = "16px";
		}, false);
	}
})(750, 750);

使用方法：

1.复制上面这段代码到你的页面的头部的script标签的最前面。

2.根据设计稿大小，调整里面的最后两个参数值。

3.使用1rem=100px转换你的设计稿的像素，例如设计稿上某个块是100px*300px,换算成rem则为1rem*3rem。

基本的HTML模板

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<meta name="description" content="不超过150个字符"/>
<meta name="keywords" content=""/>
<meta content="caibaojian" name="author"/>
<title>html模板</title>
<link rel="stylesheet" href="base.css">
<script type="text/javascript">
//引入该flexible.min.js
!function(e,t){function n(){var n=l.getBoundingClientRect().width;t=t||540,n>t&&(n=t);var i=100*n/e;r.innerHTML="html{font-size:"+i+"px;}"}var i,d=document,o=window,l=d.documentElement,r=document.createElement("style");if(l.firstElementChild)l.firstElementChild.appendChild(r);else{var a=d.createElement("div");a.appendChild(r),d.write(a.innerHTML),a=null}n(),o.addEventListener("resize",function(){clearTimeout(i),i=setTimeout(n,300)},!1),o.addEventListener("pageshow",function(e){e.persisted&&(clearTimeout(i),i=setTimeout(n,300))},!1),"complete"===d.readyState?d.body.style.fontSize="16px":d.addEventListener("DOMContentLoaded",function(e){d.body.style.fontSize="16px"},!1)}(750,750);
</script>
</head>
 
<body>
	<!-- 正文 -->
</body>
</html>

base.css

body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,pre,form,input,textarea,p,hr,thead,tbody,tfoot,th,td{margin:0;padding:0;}
ul,ol{list-style:none;}
a{text-decoration:none;}
html{-ms-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;}
body{line-height:1.5; font-size:14px;}
body,button,input,select,textarea{font-family:'helvetica neue',tahoma,'hiragino sans gb',stheiti,'wenquanyi micro hei',\5FAE\8F6F\96C5\9ED1,\5B8B\4F53,sans-serif;}
b,strong{font-weight:bold;}
i,em{font-style:normal;}
table{border-collapse:collapse;border-spacing:0;}
table th,table td{border:1px solid #ddd;padding:5px;}
table th{font-weight:inherit;border-bottom-width:2px;border-bottom-color:#ccc;}
img{border:0 none;width:auto\9;max-width:100%;vertical-align:top; height:auto;}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;vertical-align:baseline;}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}
button[disabled],input[disabled]{cursor:default;}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
input:focus{outline:none;}
select[size],select[multiple],select[size][multiple]{border:1px solid #AAA;padding:0;}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
audio,canvas,video,progress{display:inline-block;}
body{background:#fff;}
input::-webkit-input-speech-button {display: none}
button,input,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0);
}

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
链接:http://caibaojian.com/simple-flexible.html
来源:http://caibaojian.com

vue2.0分页组件(结合bootstrap)

本代码参考戏子vue1.0代码修改完成，测试vue2.0中没有bug,重点在于子父组件通信。

先上模板：

<!-- 模板 -->
<script type="text/template" id="template_pagination">
    <nav>
        <ul class="pagination">
            <li :class="{'disabled': current == 1}"><a href="javascript:;" @click="setCurrent(1)"> 首页 </a></li>
            <li :class="{'disabled': current == 1}"><a href="javascript:;" @click="setCurrent(current - 1)"> 上一页 </a></li>
            <li v-for="p in grouplist" :class="{'active': current == p.val}"><a href="javascript:;" @click="setCurrent(p.val)"> {{ p.text }} </a></li>
            <li :class="{'disabled': current == page}"><a href="javascript:;" @click="setCurrent(current + 1)"> 下一页</a></li>
            <li :class="{'disabled': current == page}"><a href="javascript:;" @click="setCurrent(page)"> 尾页 </a></li>
        </ul>
        <ul class="pagination pull-right">
            <li><span> 共 {{ total }}  条数据 </span></li>
            <li><span> 每页显示 {{ display }}  条数据 </span></li>
            <li><span> 共 {{ page }} 页 </span></li>
            <li><span> 当前第 {{ current }} 页 </span></li>
        </ul>
    </nav>
</script>

声明组件:

/**
 * [pagination 分页组件]
 * @param  {Number} total         [数据总条数]
 * @param  {Number} display     [每页显示条数 default:10]
 * @param  {Number} current     [当前页码 default:1]
 * @param  {Number} pagegroup     [分页条数(奇数) default:5]
 * @param  {Event} pagechange     [页码改动时 dispatch ]
 * @return {[type]}   [description]
 */
Vue.component('pagination', {
    template: '#template_pagination',
    props: {
        total: {            // 数据总条数
            type: Number,
            default: 0
        },
        display: {            // 每页显示条数
            type: Number,
            default: 10
        },
        current: {            // 当前页码
            type: Number,
            default: 1
        },
        pagegroup: {        // 分页条数 -- 奇数
            type: Number,
            default: 5,
            coerce:function(v){
                v = v > 0 ? v : 5;
                return v % 2 === 1 ? v : v + 1;
            }
        }
    },
    computed: {
        page:function() { // 总页数
            return Math.ceil(this.total / this.display);
        },
        grouplist:function(){ // 获取分页页码
            var len = this.page , temp = [], list = [], count = Math.floor(this.pagegroup / 2) ,center = this.current;
            if( len <= this.pagegroup ){
                while(len--){ temp.push({text:this.page-len,val:this.page-len});};
                return temp;
            }
            while(len--){ temp.push(this.page - len);};
            var idx = temp.indexOf(center);
            (idx < count) && ( center = center + count - idx);
            (this.current > this.page - count) && ( center = this.page - count);
            temp = temp.splice(center - count -1, this.pagegroup);
            do {
                var t = temp.shift();
                list.push({
                    text: t,
                    val: t
                });
            }while(temp.length);
            if( this.page > this.pagegroup ){
                (this.current > count + 1) && list.unshift({ text:'...',val: list[0].val - 1 });
                (this.current < this.page - count) && list.push({ text:'...',val: list[list.length - 1].val + 1 });
            }
            return list;
        }
    },
    methods: {
        setCurrent: function(idx) {
            if( this.current != idx && idx > 0 && idx < this.page + 1) {
                //this.current = idx;
                this.$emit('pagechange',idx);
            }
        }
    }
});

使用实例化：

<div id="app">
    <div class="container">
        <h1>  Vue2.0 分页组件 </h1>
        <pagination :total="total" :current="current" @pagechange="pagechange"></pagination>
    </div>
</div>
 
var app = new Vue({
    el: '#app',
    data: {
        total: 88,     // 记录总条数
        display: 10,   // 每页显示条数
        current: 1     // 当前第n页 ， 也可以 watch current 的变化
    },
    methods:{
        pagechange:function(p){     // 页码改变event ， p 为新的 current
            this.current=p;
            console.log('pagechange',p);
        }
    }
});

最后来张效果图：

cnpm不是内部或外部命令 cnpm: command not found 解决方案

问题是处在于你没用用淘宝的镜像安装cnpm,安装一下即可：

npm install cnpm -g --registry=https://registry.npm.taobao.org