一些常用JavaScript库的参考文档
#
big.js
big.js提供构造函数是： Big 。获取其实例对象： new Big(n) ，n可以是数字、字符串、Big的实例对象。
Big的实例对象有一些方法可以使用，用法如下所示。
.
abs()，返回绝对值：
new Big(-0.8).abs()*1 // 0.8
上例中乘以1的作用是把调用方法返回的实例转化为数字。
.
plus()，加法：
new Big(0.1).plus(0.2)*1 // 0.3
.
minus()，减法：
new Big(0.3).minus(0.1)*1 // 0.2
.
times()，乘法：
new Big(0.6).times(3)*1 // 1.8
.
div()，除法：
new Big(0.3).div(0.1)*1 // 3
.
mod()，取余数：
new Big(1).mod(0.9)*1 // 0.1
#
day.js
以下是dayjs函数的一些常见用法：
获取当前时间： dayjs()
获取和设置年份： dayjs().year() dayjs().year(2000)
获取和设置月份： dayjs().month() dayjs().month(0) ，从0开始
获取和设置日期： dayjs().date() dayjs().date(1)
获取和设置星期： dayjs().day() dayjs().day(0) ，星期天是0
获取和设置小时： dayjs().hour() dayjs().hour(12)
获取和设置分钟： dayjs().minute() dayjs().minute(59)
获取和设置秒： dayjs().second() dayjs().second(1)
获取和设置毫秒： dayjs().millisecond() dayjs().millisecond(1)
返回当前月的天数： dayjs().daysInMonth()
在dayjs()中传入支持的格式，会返回相应时间点的dayjs对象。可以传的值有：
时间字符串（ISO 8601）
Date对象
Unix时间戳（13位数字或10位数字）
验证当前dayjs对象是否是一个有效的时间： dayjs("2020-01-25").isValid() // true 。
时间差的计算首先要有两个dayjs对象，分别代表两个时间点，然后调用dayjs对象的diff方法进行比较：
dayjs("2020-01-25").diff(dayjs(), 'day')
dayjs("2020-01-25").diff(dayjs(), 'month')
dayjs("2020-01-25").diff(dayjs()) // 毫秒
格式化dayjs对象并展示，通过调用对象的format()方法，传入一个表示时间日期格式的字符串后，返回一个对应格式
的字符串，示例：
dayjs().format("YYYY-MM-DD") // "2019-12-10"
#
EasyTimer.js
获取一个Timer实例： var timer1 = new easytimer.Timer()
然后开始计时并进行事件监听：
timer1.start()
timer1.addEventListener('secondsUpdated', function(e) {
div1.innerHTML = timer.getTimeValues().toString()
}
)
对实例化的过程进行简化： var Timer = easytimer.Timer
timer的getTimeValues和getTotalTimeValues方法一个返回格式化的时间和总时间，它们都有五个属性（days,
hours, minutes, seconds, secondTenths）和一个toString方法，都包含了字符串格式的对应时间信息。
start()方法可以设置上述的五种精度，默认为seconds： timer.start({precision: 'secondTenths'})
toString()方法也可以接收参数： timer.getTimeValues().toString(['days', 'hours', 'minutes', 'seconds',
'secondTenths']))
timer的实例方法和事件有：
start() pause()
stop()
"started"
reset()
"reset"
"
secondsUpdated"
"targetAchieved"
设置起始和目标值：
timer.start({startValues: {seconds: 90}, target: {seconds: 120}})
设置倒计时：
timer2.start({countdown: true, startValues: {seconds: 30}})
div2.innerHTML = timer2.getTimeValues().toString()
timer2.addEventListener('secondsUpdated', function (e) {
div2.innerHTML = timer2.getTimeValues().toString()
}
)
使用callback选项代替事件secondsUpdated：
var timer = new Timer();
timer.start({callback: function (timer) {
/
/ do something
}
})
上述的start()方法的参数选项也可以在初始化计时器时传入：
var timer = new Timer({countdown: true, startValues: {seconds: 60}})
#
ScrollReveal
link。
使用的步骤如下：
1. 通过script标签引入scrollreveal的JS文件，放到头部head标签的末尾。
2. （可选）加一行样式 html.sr .load-hidden {visibility: hidden} 。
3. 在JS代码中，调用ScrollReveal()构造函数进行初始化，传入选项对象可以修改默认值，返回一个单例模式的实
例。
4. 调用实例的reveal()方法设置不同元素的不同效果。
实例方法的用法：
reveal(target, options)，为相应的元素注册相应的选项对象。第一个参数即相应的元素，可以接收的参数
有：
选择器的字符串
DOM元素或其构成的数组
nodeList
clean(target)，target的含义同reveal()方法。作用是移除reveal()方法给元素添加的样式和事件，作用的时
间点在afterReveal()。
destroy()，清除并销毁所有效果及其相关数据。
sync()，重载，给后添加到页面上的元素也添加上scrollreveal的效果。
选项对象的用法：
beforeReveal() 参数为DOM元素的回调函数。在元素显示之前运行。
afterReveal() 参数为DOM元素的回调函数。在元素显示之后运行。
beforeReset() 参数为DOM元素的回调函数。在元素重置之前运行，只有开启了reset才会生效。
afterReset() 参数为DOM元素的回调函数。在元素重置之后运行，只有开启了reset才会生效。
delay 数字，表示动画开始前的延迟时间。
useDelay 字符串，表示delay生效的时机，有三个取值：
"
"
"
always" 一直生效，默认值
once" 第一次生效
onload" 页面加载时生效
reset 布尔值，表示动画是否反复触发，默认值为false。重置后触发的动画不会有delay。
distance 字符串，表示动画触发前离本来位置的距离，可以使用3个单位，px、%、em。
duration 数字，动画运行的时间。
easing 字符串，表示动画的时间方程，格式同CSS时间方程。如：
"linear" "ease" "ease-in" "ease-in-out" "ease-out" "step()" "step-start" "step-end"
interval 数字，表示动画每一帧的运行时间，通常为16毫秒。
opacity 数字或null，表示元素在动画触发前的透明度，如果要禁止透明度的动画，则赋值为null。
origin 取值为"top"、"right"、"bottom"、"left"，表示元素进入视口前的方向，默认为"bottom"，需要配合
distance才能生效。
rotate 对象，有3个属性x、y、z分别代表3种旋转方向，其值是一个数字，代表动画触发前元素旋转的角度。
scale 数字，表示动画触发前元素的大小比例。
cleanup 布尔值，表示会在动画完成后对元素调用clean(el)方法。对会reset的元素不起作用。
container 字符串或DOM元素，表示滚动条的容器元素，默认为整个页面。
desktop 布尔值，表示在桌面端浏览器禁用或启用动画。
mobile 布尔值，表示在移动端浏览器禁用或启用动画。
viewFactor 0到1之间的数字，表示元素的百分之多少进入视口才触发动画。
viewOffset 对象，有4个属性top、right、bottom、left分别代表视口扩展的4个方向，其值是一个数字，表示
视口扩展的像素距离。要注意视口并没有真正扩展，只是在计算时进行了虚拟扩展。
实例属性的说明：
noop是一个只读的布尔值，为true则代表ScrollReveal被禁用了。
store是一个存储相关数据的对象，不需要改动，在debug时可能有用。
version是一个只读字符串表示当前使用的ScrollReveal的版本。
debug是一个表示开启调试模式与否的布尔值。
defaults是一个只读的对象，表示选项对象的默认值。
代码示例：
var sr = ScrollReveal({cleanup: false});
sr.reveal(element1, {
distance: "300px",
origin: "right",
reset: true
}
);
sr.reveal(element2, {
duration: 20,
opacity: null,
reset: true,
beforeReset: function(el) {
/
/
/ 停止动画
/ 复位
}
,
beforeReveal: function(el) {
/
/ 运行动画
}
}
);
上例中实现了两种动画。元素1使用了ScrollReveal内置的动画功能，元素2在动画上仅用到了ScrollReveal提供的回
调函数，具体的动画实现可以通过JS动画库自由发挥。
元素2设了一个duration为20的没有动画效果的假动画，是为了“借到”ScrollReveal提供的回调函数。
#
Swiper
点击分页器会触发轮播需要在分页器下添加配置项clickable并设值为true。
循环轮播模式需要添加配置项loop并设值为true。
基础用例：
<div class="swiper-container" id="swiper1">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./img/1.jpg"></div>
<div class="swiper-slide"><img src="./img/2.jpg"></div>
<div class="swiper-slide"><img src="./img/3.jpg"></div>
<div class="swiper-slide"><img src="./img/4.jpg"></div>
<div class="swiper-slide"><img src="./img/5.jpg"></div>
<
<
/div>
div class="swiper-pagination"></div>
<
/div>
new Swiper('#swiper1', {
pagination: {
el: '.swiper-pagination',
clickable: true
}
,
loop: true
);
}
new Swiper('#swiper2', {
autoplay: {
duration: 3000
}
,
direction: "vertical",
pagination: {
el: ".swiper-pagination",
clickable: true,
renderBullet: function(index, className) {
return "<span class='" + className +"'>" + (index+1) +"</span>"
}
}
,
loop: true,
effect: "coverflow",
keyboard: {
enabled: true,
onlyInViewport: true
}
}
$
);
("#swiper2").hover(function() {
swiper2.autoplay.stop();
, function() {
swiper2.autoplay.start();
);
}
}
支付宝打赏
微信打赏