精华版笔记

//让ios滚动更流畅

overflow-y: scroll;
-webkit-overflow-scrolling: touch;

//省略号
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;

//只能输入数字，没有小数点
onkeyup="this.value=this.value.replace(/\D/g,'')"
//只能输入数字，有小数点
onkeyup="this.value=this.value.replace(/[^\d\.]/g,'');"
//禁止输入空格
onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"

JSON.parse(jsonstr); //可以将json字符串转换成json对象
JSON.stringify(jsonobj); //可以将json对象转换成json对符串

//css动作淡入淡出
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;

//r.js压缩js
node r.js -o build.js paths.jquery=empty: paths.zepto=empty: paths.swipe=empty: paths.pickerCity=empty:

//可输入文字的div
<div contenteditable="true"></div>

//验证电话号码
var isRightPhoneNumber = function(val){
var re=/^(13[0-9]{9})|(15[0-9][0-9]{8})|(18[0-9][0-9]{8})|(17[0][0-9]{8})|(14[7][0-9]{8})$/;
if(!re.test(val)){
return 0;
}else{
return 1;
}
`}

//获取当前时间鹾
var timestamp = Math.round(new Date().getTime()/1000);

//随机那最简单的就是用随机数了。下面是简单的例子。仅供参考：
<body>
<div style="width:100px; height:100px; border:1px solid #ccc;"></div>
</body>
<script type="text/javascript">
var oDiv = document.getElementsByTagName('div')[0];
var arr = [1,2,3,4,5,6,7,8,94,1,3,4,5,6];
oDiv.onclick=function(){
oDiv.innerHTML = arr[Math.floor(Math.random()*arr.length)];
};
</script>

//url解码
decodeURIComponent(url);

//获取随机概率
function rnd(n, m){
var random = Math.floor(Math.random()*(m-n+1)+n);
return random;
}

//判断txt文件
function decideTxtFile(file){
var tp ="txt";
var three=file.split(".");
var last=three[three.length-1];
var rs=tp.indexOf(last);
if(rs>=0){
return 1;
}else{
return 0;
}
}

//根据url参数关闭窗口
function closeNewPage(){
var buyer_id = common.getPar("buyer_id");
if(buyer_id){
window.opener=null;
window.close();
}
}

//检测设备开始
//判断是否移动端，如果是则跳转到指定的URL地址
function browserRedirect(url) {
//只读的字符串，声明了浏览器用于 HTTP 请求的用户代理头的值
var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid = sUserAgent.match(/android/i) == "android";
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
if (bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
window.location.replace(url);
}
}
//获取url跳转手机端
function goMobile(){
var pathName = window.location.pathname;
browserRedirect("http://m.yunsenke.com" + pathName);
}
//检测设备结束

//渐变色
background: linear-gradient(to right, #fd8b04 , #ff5200);

/*半像素边框*/
.footer{
position: relative;
}
.footer:before{
content: " ";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
border-top: 1px solid #e5e5e5;
color: #e5e5e5;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
}

//换行标签遍历
texts.replace(/\n/g,"<br/>");

/*手机端字体自适应调整*/
window.onload = function () {
getRem(750, 100)
};
window.onresize = function () {
getRem(750, 100)
};

function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth / pwidth * prem + "px";
}

/*preventDefault() 方法阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）。*/
$("a").click(function(event){
event.preventDefault();
});

/*css判断屏幕大小*/
@media screen and (判断属性){ CSS样式选择器 }

/*判断移动端是否ios*/
function detectScreen(){
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
// alert('是否是Android：'+isAndroid);
// alert('是否是iOS：'+isiOS);
if (isiOS == true) {
alert(1)
};
}

//canvas里绘制图片

function canvasImg(){
var canvas = $(".myCanvas")[0];
var cxt = canvas.getContext("2d");
var img = new Image();
var w = canvas.width;
var h = canvas.height;
img.crossOrigin = '*';
img.src = $(".imgurl").val();
console.log($(".imgurl").val());
img.onload = function(){
cxt.drawImage(img,0,0,w,h);
}
}

/*英文、数字强制换行*/
word-wrap:break-word;

//获取随机数
var str = [1,3,5];
var random = Math.floor(Math.random()*str.length);
var result = str[random];

//数组冒泡排序（从小到大）
var tempArr = [5,4,3,2,9,10,7,8,6,1];

function temps(arr){

var len = arr.length;

for(var i = 0; i < len-1; i++){

for(var j = i+1; j < len; j++){

if(arr[i]>arr[j]){

var mod = arr[j];

arr[j] = arr[i];

arr[i] = mod;

}

return arr;

}

temps(tempArr);

//对象属性检测
hasOwnProperty：是用来判断一个对象是否有你给出名称的属性或对象。

/*flex垂直居中*/

.a{ //父级元素
width:100%;

height:800px;

display: flex;

align-items: center;

justify-content: center;

}

.content{
//需要垂直居中的子元素
width: 200px;

height: 200px;

background: darkcyan;

}

//手机端qq临时回话
<a href="mqqwpa://im/chat?chat_type=wpa&uin=800079052&version=1&src_type=web&web_src=oicqzone.com">点击咨询</a>

//jquery animate设置auto高度
var el = $('#first'),
curHeight = el.height(),
autoHeight = el.css('height', 'auto').height();
el.height(curHeight).animate({height: autoHeight}, 1000);

//标签边框上加文字的元素
<fieldset>
<legend>
Create New Person
</legend>
</fieldset>

//获取背景图路径
$(".main-pic").css("background-image").split("\"")[1]

//获取对象元素数量
JSONLength = function (obj) {
var size = 0, key;
for (key in obj) {
if (obj.hasOwnProperty(key)) size++;
}
return size;
};

//图片加磨砂效果
.blur {
-webkit-filter: blur(10px); /* Chrome, Opera */
-moz-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
}

//遮盖背景图
-webkit-mask-image: url(/weixin/images/Activity/mask.png);
-webkit-mask-size:100% 100%;

//输入框获取焦点的时滚动条滑到最下面，显示输入框。
$("input").focus(function(){
$(document).scrollTop($(window).height());
});

//阻止默认事件
$(document).on("click",".box",function(event){
event.stopPropagation();
});

//删除数组里的空值
for(var j = 0 ;j<arr.length;j++){
if(arr[j] == "" || typeof(arr[j]) == "undefined"){
arr.splice(j,1);
j= j-1;
}
}

//给公司名称加密
function encryptionCamName(str){
for(var i = 0; i < str.length; i++){
if(i % 2 != 0){
str = str.replace(str.substr(i,1),"*");
}
}
return str;
}

//动态引入js文件
var url = "/Weixin/Js/v2/require.js", //require.js路径
mainUrl = "/Weixin/Js/v2/main-built.js?v=1.0.22", //main-built.js路径
script = document.createElement("script"); //创建新的script标签，引入压缩的js用

if(script.addEventListener){
　　script.addEventListener("load", callback, false);
}else if(script.attachEvent){
　　script.attachEvent("onreadystatechange", function(){

　　　　var target = window.event.srcElement;

　　　　 if(target.readyState == "loaded" || target.readyState == "complete"){

　　　　　　callback.call(target);

　　　　}

　　});
}
document.getElementsByTagName("head")[0].appendChild(script);

function callback(){
console.log("兼容")
}

script.dataset.main = mainUrl;
script.src = url;

//手机上打开qq临时对话框
http://wpa.qq.com/msgrd?v=3&uin=172612248&site=qq&menu=yes

//去掉数组中的相同元素
function unique(arr){
var result = [];
for(var i=0;i<arr.length;i++){
if(result.indexOf(arr[i])==-1){
result.push(arr[i])
}
}
return result;
}

//求数组元素之和
eval(deep.join("+"));

//获取数组中最大的值
var maxValue = Math.max.apply(Math,myArry);

//数组转换成用逗号分割的字符串
str = arry.join();

//获取cookie值
getCookie = function(cookie_name){
var allcookies = document.cookie;
var cookie_pos = allcookies.indexOf(cookie_name); //索引的长度
// 如果找到了索引，就代表cookie存在，
// 反之，就说明不存在。
if (cookie_pos != -1){
// 把cookie_pos放在值的开始，只要给值加1即可。
cookie_pos += cookie_name.length + 1; //这里容易出问题，所以请大家参考的时候自己好好研究一下
var cookie_end = allcookies.indexOf(";", cookie_pos);

if (cookie_end == -1){
cookie_end = allcookies.length;
}
var value = unescape(allcookies.substring(cookie_pos, cookie_end)); //这里就可以得到你想要的cookie的值了。。。
}
return value;
}

//js获取报错信息
window.onerror = function(errorMessage, scriptURI, lineNumber,columnNumber,errorObj) {
console.log("错误信息：" , errorMessage);
console.log("出错文件：" , scriptURI);
console.log("出错行号：" , lineNumber);
console.log("出错列号：" , columnNumber);
console.log("错误详情：" , errorObj);
}

//dom 字符串转换dom对象
function parseDom(arg) {
　　 var objE = document.createElement("div");
　　 objE.innerHTML = arg;
　　 return objE.childNodes;
};

//正则匹配把input的value值清空
.replace(/ value=".*?"/g,'');

//手机号中间的4位变星星
var mtel = phone.substr(0, 3) + '****' + phone.substr(7);

//输入框计算汉字和英文字符长度
function WidthCheck(str, maxLen){
var w = 0;
var tempCount = 0;
//length 获取字数数，不区分汉子和英文
for (var i=0; i<str.value.length; i++) {
//charCodeAt()获取字符串中某一个字符的编码
var c = str.value.charCodeAt(i);
//单字节加1
if ((c >= 0x0001 && c <= 0x007e) || (0xff60<=c && c<=0xff9f)) {
w++;
}
else{
w+=2;
}
if (w > maxLen) {
str.value = str.value.substr(0,i);
break;
}
}
}

//输入框限制
clearNoNum = function(obj){
obj.value = obj.value.replace(/[^\d.]/g,""); //清除“数字”和“.”以外的字符
obj.value = obj.value.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的
obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');//只能输入两个小数
if(obj.value.indexOf(".")< 0 && obj.value !=""){//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
obj.value= parseFloat(obj.value);
}
}

//转换base64------------------------------------------------------------------------------------------------------------------------------------------
$("input").change(function () {
run(this, function (data) {
$('img').attr('src',data);
$('textarea').val(data);
});
});

//table里的英文字母换行
<td style="word-wrap: break-word;word-break: break-all;width:150px;">aaaaaaaaaaasdsdsad</td>

//给对象动态添加属性
var aa="maker";
var bb=123;
var lists={};
eval("lists."+aa+"="+bb);
eval('('+"lists."+aa+"="+bb+')');
console.log(lists);

//对象转换数组
var arr = Object.keys(对象);

//正则判定是否包含某个字符
var re=/[;-] // 还要匹配其他字符往[]里面加
alert(re.test(“广东-深圳;U8976hg”))

//对象合并
var o1 = { a: 1 };
var o2 = { b: 2 };
var o3 = { c: 3 };

var obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1); // { a: 1, b: 2, c: 3 }, 注意目标对象自身也会改变。

//建变化的数组名
var obj = {};
for(let i=0; i<5; i++){
obj['arr'+i] = [];
}

//js中文汉字按拼音排序
var array = ['武汉', '北京', '上海', '天津'];

var resultArray = array.sort(

function compareFunction(param1, param2) {

return param1.localeCompare(param2,"zh");

}
);

console.log(resultArray);

VUE 代码记录---------------------------------------------------------------------------------------------------------------

// 判定是否加class
<div :class="clicked? 'blue-class':'red-class'" ></div>

//生命周期
var app=new Vue({
el:'#app',
data:{
message:1
},
methods:{
jia:function(){
this.message ++;
}
},
beforeCreate:function(){
console.log('1-beforeCreate 初始化之后');
},
created:function(){
console.log('2-created 创建完成');
},
beforeMount:function(){
console.log('3-beforeMount 挂载之前');
},
mounted:function(){
console.log('4-mounted 被创建');
},
beforeUpdate:function(){
console.log('5-beforeUpdate 数据更新前');
},
updated:function(){
console.log('6-updated 被更新后');
},
activated:function(){
console.log('7-activated');
},
deactivated:function(){
console.log('8-deactivated');
},
beforeDestroy:function(){
console.log('9-beforeDestroy 销毁之前');
},
destroyed:function(){
console.log('10-destroyed 销毁之后')
}

})

//vue-router push跳转页面
this.$router.push('/home/first') // 字符串
this.$router.push({ path: '/home/first' }) // 对象
this.$router.push({ name: 'home', params: { userId: wise }}) // 命名的路由

//页面重新渲染
this.$forceUpdate();

//取消事件的默认动作
.prevent - 调用 event.preventDefault() 即取消事件的默认动作。a标签href不加javascript:;也是不会刷新页面的。
<a href="" @click.prevent='change'>按钮</a>

//可以用$nextTick来确保Dom变化后再执行一些事情：
this.$nextTick( () => {
this.$refs.li[7].scrollIntoView()
})

精华版笔记

推荐阅读