0.0.4 • Published 5 years ago
jasontool v0.0.4
outils
jason前端业务代码工具库
目的：高效率完成前端业务代码
业务开发过程中，会经常用到日期格式化、url参数转对象、浏览器类型判断、节流函数等常用函数，为避免不同项目多次复制粘贴的麻烦，这里统一封装，并发布到npm，以提高开发效率。如果你也有常用的代码，欢迎为本项目提交pr。
安装使用
- 直接下载
min目录下的dist/jasontool使用，支持UMD通用模块规范 - 使用npm安装
浏览器:
<script src="jasontool.min.js"></script>
<script>
var OS = $j.getOS()
</script>npm:
$ npm install --save-dev jasontoolwebpack、RequireJS、SeaJS等
// 完整引入
const $j = require('jasontool')
const OS = $j.getOS()推荐使用方法
你真的不需要完整引入所有函数，所以只引入需要使用的方法即可。
// 只引入部分方法('outils/<方法名>')
const getOS = require('jasontool/getOS')
const OS = getOS()API文档
画线工具(仿微信截图)
WeChatDrawBoard 画线工具:提供画线，矩形，椭圆，箭头，撤销，同屏的功能。在移动端有缩放功能。
使用说明:
params:
- id:null,//id
- toolPlaneUpdate:false, //工具面板是否跟随鼠标
- toolwheelUpdatePos:false,//工具面板是否跟着滚轮动
- toolPlaneX:0,//工具面板跟随鼠标x偏移量 默认为0
- toolPlaneY:0,//工具面板跟随鼠标y偏移量 默认为工具栏的高度(负数)
- toolPlanePos:'left',//工具面板初始位置 默认为left ，值分别可选center和right
- isScreen:false,//是否允许同屏
- isZoomFn:false,//是否开启拖拽功能
- isScreenFn:false,//是否开启同屏功能
- isWatermarkOptFn:false,//是否需要水印
- defaultFn:{ mode:'',//画线模式 arrow;箭头，rect:矩形，circle:园，paint-brush:画笔 size:'',//画线大小 color:''//画线颜色 },//默认开启功能，
- isShowToolPanel:true,//是否显示工具面板
- clearCanvasTime:'',//清空画布时间
- watermarkOpt:{//水印配置参数 minSpacingX:150,//最小横向间距 maxSpacingX:250,//最大横向间距 minSpacingY:150,//最小纵向间距 maxSpacingY:250,//最大纵向间距 text:'水印水印水印水印',//文字信息 fillStyle:'rgba(255,0,0,0.3)',//字体样式 fontSize:18, rotate:-30 },
- beforeMount:function(){},//初始化前函数
- mount:function(){},//初始化后函数
- drawPaintBrushEndCallback:function(){},//画笔结束回调 返回画笔数据和全部数据
- drawRubberEndCallback:function(){},//橡皮檫结束回调 返回画笔数据和全部数据
- drawArrowEndCallback:function(){},//箭头结束回调 返回箭头数据和全部数据
- drawCircleEndCallback:function(){},//画圆结束回调 返回画圆数据和全部数据
- drawRectEndCallback:function(){},//画矩形结束回调 返回矩形数据和全部数据
- revokeCallback:function(){},//撤销回调 返回撤销数据
- startOperation:function(){},//开始操作(画图) 返回操作什么状态
- endOperation:function(){},//结束操作(画图) 返回操作什么状态
- clearCanvasCallback:function(){},//一定时间后线段消失回调
内置函数(new 出来的实例对象调用如下函数)：
- hideToolPanel:隐藏工具面板
- showToolPanel:显示工具面板
- hideDrawLineBox:隐藏画线盒子
- showDrawLineBox:显示画线盒子
<head>
<link rel="stylesheet" href="../static/css/drawLine.css"/>
<script src="../static/js/jquery.js"></script>
<script src="../static/js/hammer.js"></script>
<script src="../static/js/jquery.hammer.js"></script>
<script src="../static/js/jquery.mousewheel.min.js"></script>
<script src="../dist/jasontool.js"></script>
</head>
<body>
<div class="list">
<div class="box">
<!-- 传入容器id(draw1) 子元素加class(draw-item) -->
<div class="draw" id="draw1">
<video class="draw-item" controls="controls">
<source src="../static/video/movie.ogg" type="video/ogg">
<source src="../static/video/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
</div>
<script>
window.onload = function(){
//该步骤确定容器高度
$(".list").children(".box").children(".draw").children(".draw-item").on("canplay",function(){
$(this).closest(".box").css({
"height":$(this).height()
});
let id = $(this).closest(".draw").attr("id");
let variable = 'ja' + id;
window[variable] = new $j.WeChatDrawBoard({
id: id,//必传
isScreen: false,//是否允许同屏
isZoomFn:true,
isScreenFn: true,
isWatermarkOptFn:true,
clearCanvasTime:5000,//画的线段在多久后消失 的毫秒数
defaultFn:{
mode:'paint-brush',
size:'',
color:""
},//默认开启功能，arrow;箭头，rect:矩形，circle:园，paint-brush:画笔
isShowToolPanel:true,//是否显示工具面板
});
});
};
</script>
</body>pc端html5播放器
videoCT 一个html5播放器，提供视频节点，弹幕，操作视频video功能。
使用说明:
params:
- id:"",//视频video的id值
- title: '',//标题
- volume: 0.2,//音量
- barrage: false,//弹幕开关
- comment: false,//弹幕
- reversal: false,//镜像翻转
- playSpeed: false,//播放速度
- update: false,//下载
- autoplay: false,//自动播放
- clarity: {//清晰度 type: [],//清晰度 src: [] //链接地址 },
- theme: 'blue',//主题 目前提供两种主题，"blue"和"red"
- commentJson:{},//弹幕数据
- videoPlayNodeJson:[],//视频播放节点数据
- nodeTimeBack:1,2,3,4,5,//节点回退秒数
- playEndCallback:$.noop(),//视频播放完成回调
<head>
<meta charset="UTF-8" >
<title>video-custom</title>
<link rel="stylesheet" href="../static/css/videoCT.css">
<script src="../static/js/jquery.js"></script>
<!-- <script src="../src/videoCT/videoCT.js"></script> -->
<script src="../dist/jasontool.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
section {
position: fixed;
width: 900px;
height: 600px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
<head>
<body>
<section>
<video width="100%" height="100%" id="video1"></video>
</section>
<script>
var commentJson = {
"title": "动画",
"id": "0001",
"time": "2017-05-12",
"number": 6,
"class": "game",
"data": [
{
"word": "第一个",
"color": "#ff0000",
"speed": 5,
"top": 5,
"fontSize": 16,
"action": "marquee",
"time": 1
},
{
"word": "第二个",
"color": "#00ff00",
"speed": 10,
"top": 10,
"fontSize": 16,
"action": "stay",
"time": 2
},
{
"word": "第三个",
"color": "#0000ff",
"speed": 15,
"top": 15,
"fontSize": 16,
"action": "stay",
"time": 3
},
{
"word": "第四个",
"color": "#fff000",
"speed": 20,
"top": 20,
"fontSize": 16,
"action": "marquee",
"time": 4
},
{
"word": "第五个",
"color": "#000fff",
"speed": 15,
"top": 25,
"fontSize": 16,
"action": "marquee",
"time": 4
},
{
"word": "第六个",
"color": "#ff00ff",
"speed": 10,
"top": 30,
"fontSize": 16,
"action": "marquee",
"time": 5
}]
};
var videoPlayNodeJson = [
{
id:1,
nodeTime:5
},
{
id:2,
nodeTime:20
},
{
id:3,
nodeTime:40
}
];
window.onload = function () {
//初始化
var video = new $j.videoCT({
id:"video1",
title: '', //标题
volume: 0.2, //音量
barrage: true, //弹幕开关
comment: true, //弹幕
reversal: true, //镜像翻转
playSpeed: true, //播放速度
update: true, //下载
videoPlayNode:true, //视频播放的节点
autoplay: false, //自动播放
clarity: {
type: ['360P','480P'], //清晰度
src: ['../static/video/2.mp4',
'http://www.w3school.com.cn/example/html5/mov_bbb.mp4'] //链接地址
},
theme:"blue", //目前提供两种主题，"blue"和"red"
commentJson:commentJson,//弹幕数据
videoPlayNodeJson:videoPlayNodeJson,//视频播放节点数据
playEndCallback:function(){ //视频播放完成回调
console.log("播放完成");
}
});
}
</script>
</body>表单验证函数
validateForm 该对象下有验证手机号函数(isPhoneNo)、验证身份证函数(isCardNo)
使用说明:
- isPhoneNo:
- params:传入手机号
- return:返回true则验证正确，false则验证不正确
- isCardNo:
- params:传入身份证号
- return:返回true则验证正确，false则验证不正确
//验证手机号和身份证号
console.log($j.validateForm.isCardNo(331302199806058310));
console.log($j.validateForm.isPhoneNo(11149444964));