1. js数字字节跳动动态加载数字
封装动态加载数字方法:
//动态加载数字
/*
* startNum代表要跳动的初始数字;
* targetNum代表要跳动到的数字;
* time代表要跳动需要花费的时间;
* selector代表要跳动元素的选择器
* */
window.setJumpNumber = (startNum, targetNum, time = 1, selector) => {
let dom = document.querySelector(selector);
let originNum = startNum;
let stepNum = 0;
let timeNum = time;
dom.innerHTML = startNum;
let timeId = setInterval(() => {
if (originNum < targetNum) {
timeNum -= 0.001;
let strNum = originNum.toString();
//数字比较少的时候直接用 + 1; 数字很大直接 +1 要很久才能调到最对应的数字,所有后三位数随机跳动的方式进行模拟生成
if (targetNum.toString().length < 6) {
stepNum += 1; // 这样才可以实现越跳越快的效果
originNum = originNum + stepNum;
dom.innerHTML = originNum;
} else {
stepNum += 500; // 这样才可以实现越跳越快的效果
originNum = originNum + stepNum;
dom.innerHTML = strNum.substr(0, strNum.length - 3) + Math.floor(Math.random()*10) + Math.floor(Math.random()*10) + Math.floor(Math.random()*10);
}
} else {
dom.innerHTML = targetNum;
clearInterval(timeId);
}
}, timeNum);
};
调用方法:
setJumpNumber(1,6210,1,'#num1');
2. layui实现复选框的全选与反选
html:
<div class="layui-input-inline">
<input type="checkbox" class="checkboxAll" lay-skin="primary" lay-filter="allChoose" title='全选'>
</div>
<input type="checkbox" name="check[]" value="{$item.id}" lay-skin="primary" title="{$item.type_name}" lay-filter="oneChoose">
js:
layui.use(['layer','form'], function () {
var form = layui.form
,layer = layui.layer;
form.on('checkbox(allChoose)', function (data) {
$("input[name='check[]']").each(function () {
this.checked = data.elem.checked;
// console.log(data);
});
form.render('checkbox');
});
});
$('#sub').click(function(){
var items =[];
$("input[name='check[]']:checked").each(
function(){
items.push($(this).val());
})
console.log(items);
})
3. jQuery+HTML5声音提示
首先需要载入声音文件,我们使用HTML5标签 <audio>,通过source预加载声音文件到页面中。
$(function(){
//载入声音文件
$('<audio id="chatAudio"><source src="notify.ogg" type="audio/ogg">
<source src="notify.mp3" type="audio/mpeg"><source src="notify.wav" type="audio/wav">
</audio>'
//播放声音
$('#chatAudio')[0].play();
})
4. vue.js移除绑定的点击事件
① v-if 绑定变量,通过设置变量true或者false控制两个button标签的显隐,如下:
<button v-if="!unbind" v-on:click="addClick">点击</button>
<button v-else >点击</button>
② 加上标志(变量)来控制点击事件是否能被触发. 如下:
<p @click="flag && clickEvent()"></p>
5. vue实现数字的上下滚动
vue实现文字的上下滚动可使用positon的relative的top属性,通过js代码动态改变top值来实现相关内容的更换,通过transion来实现相关的动画效果。如下:
html:
<template>
<div class="index">
<div class="scroll">
<ul :style="{top}" :class="{transition:index!=0}">
<li v-for="(item,index) in list">
{{"第"+item+"条数据"}}
</li>
<li>
{{"第"+list[0]+"条数据"}}
</li>
</ul>
</div>
<router-link to="/">hello</router-link>
</div>
</template>
css:
img{width: 30px;height: 30px;border-radius: 50%;vertical-align: middle;margin-right: 20px}
ul{position: relative;}
li{overflow: hidden;white-space: nowrap; text-overflow:ellipsis;width: 80%;height: 60px;line-height: 60px;text-align: left;margin: 0;font-size: 14px}
.scroll{height:60px;overflow: hidden;font-size: 0px; position: relative;}
.transition{transition: top 0.5s}
js:
<script>
export default {
name: 'HelloWorld',
data() {
return {
list: [
"一","二","三","四","五","六","七","八","九","十"
],
top: "",
index: 0,
p:""
}
},
mounted() {
this.goScroll()
},
methods: {
goScroll() {
var _this = this;
this.p = setInterval(() => {
console.log(22)
_this.top = -60 * _this.index + 'px';
if (_this.index >= this.list.length + 1) {
_this.index = 0;
_this.top = -0 + 'px';
clearInterval(_this.p);
_this.continueScroll()
} else {
_this.index++;
}
}, 1000)
},
continueScroll(){
var _this=this;
setTimeout(() => {
_this.index=1;
_this.top = -60 * this.index+ 'px';
_this.index++
this.goScroll()
},100);
}
},
destroyed(){
clearInterval( this.p );
}
}
</script>
6. 微信小程序中使用wxParse解析html
小程序在开发时,读取到服务器的内容是html格式的,因小程序不支持html格式的内容显示的,因此要对html格式的内容进行编译,此时可以通过wxParse来实现。
附:wxParse下载地址:https://github.com/icindy/wxParse
使用方法:
① 将下载下来的wxParse文件夹复制到开发项目的根目录下。
② 在小程序页面对应的wxss文件中引用wxParse.wxss
@import "../../wxParse/wxParse.wxss";
③ 在小程序页面对应的js文件中引用wxParse.js,并使用
var WxParse = require('../../wxParse/wxParse.js');
Page({
data: {
},
onLoad: function () {
const that = this;
var article = "<p>避免用不干净的手去碰手术伤口,以免引起细菌感染;术后姿势要注意,睡觉时枕高头部,有助于消肿;术后冷敷只需要1~2天,之后要热敷,热敷可以帮助血液循环;可以适量服用消炎药;恢复前不能佩戴隐形眼镜;饮食尽量清淡,不要吃海鲜、辛辣等食物。</p>" +
"<p><font color=\"#e8714f\"><br /></font></p>" +
"<p><font color=\"#e8714f\">现在正流行的韩式三点双眼皮,和切开法、埋线法相比较,区别在哪里?</font></p>" +
"<p>韩式三点算是部分切开法,手术的切口是三个小点,它的优点是只有三个小痕迹,不明显,缺点是只能去脂肪,不能去皮。完全切开法是切开一条长线,可以去脂去皮。而埋线的话则是没有切口,不能去脂去皮,只是通过缝合的方法来打造双眼皮。韩式三点适合眼皮比较薄,眼部脂肪不多、皮肤不松的人,轻微的肿泡眼也可以做。所以也可以理解为适合</p>" +
"<p>做埋线的就适合做韩式三点。</p>" +
"<p><font color=\"#e8714f\"><br /></font></p>" +
"<p><font color=\"#e8714f\">做了双眼皮会不会影响我的视力?</font></p>" +
"<p>上眼皮,下眼皮,眼球的视觉系统是三个相对独立的解剖生理结构和部位,所以手术是不会对视力产生影响的。</p>"
/**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName绑定的数据名(必填)
* 2.type可以为html或者md(必填)
* 3.data为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
*/
WxParse.wxParse('article', 'html', article, that, 5);
}
})
④ 在小程序页面对应的wxml文件中引用wxParse.wxml
<import src="../../wxParse/wxParse.wxml"/>
<view class="wxParse">
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>
</view>
7. vue打包项目遇到Failed to load resource: net::ERR_FILE_NOT_FOUND问题的解决
vue项目打包后打开报错:Failed to load resource: net::ERR_FILE_NOT_FOUND,经过一番百度(百度真是程序员的救命草),找到如下解决方案:
① 在build文件里面找到webpack.prod.config.js,在output里面添加:
publicPath:'./'
② 找到webpack.base.configjs 添加如下代码:
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
完成上述两步后对项目重新进行打包。如果还是有问题,找到config文件里面的index.js,修改build里面的assetsPublicPath;
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
}