CreateJS实现【益智类数字华容道小游戏】
使用 CreateJS 实现的益智类数字华容道小游戏;
适合学习 CreateJS 人群的实战小项目。
uniapp 基于 vue3 开发的【验证码输入框】
概要:uniapp 基于 vue3 开发的【验证码输入框】,输入值的输入框切换和光标是否自动聚焦等;
使用人群:使用 uniapp 基于 vue3 开发的应用,需要用到输入验证码;
使用场景:短信验证码登录、短信验证码验证身份、短信验证码修改密码等场景。
批量修改文件名和将txt转excel
现在有n个不重名子文件夹在同一个文件夹内,且每个子文件夹内有一个txt文件,所有txt文件名相同。
1. 将每个txt文件名修改为对应所在文件夹名;
2. txt文件改为表格文件。
3. 将表格内的长串数字默认为文本格式。
python 批量将xlxs文件中的base64转成png图片
使用 python 开发的一个将【批量将xlxs文件中的base64转成png图片】的工具,工具适合所有没有程序基础的人员,直接按照文档执行,就能完成转换!如果有特定的需求,请联系开发人员,对代码进行特定需求开发!
微信小程序 redux 应用实例
对 redux 组件在微信小程序的二次封装,以及使用实例,满足微信小程序的全局状态动态更新!
python工具 ---- 批量将图片转base64工具.exe
通过执行该工具,批量将图片转成base64的js文件,适合配合微信小程序图标使用!
vue ---- 基于canvas的绘制海报组件
使用vue 2.0开发的基于 canvas 绘制海报的组件!
python ---- 批量图片压缩工具
1、使用 python 的 PIL 包,对图片进行压缩;
2、环境为 python 3.7.0、安装 PIL 包: pip install pillow;
3、图片尺寸等比例修改参数 scale【默认0.2】,图片压缩质量参数 quality【默认100】,图片公用命名参数 basename【默认'newimg-'】;
4、执行工具会在当前文件夹下新建一个newimg文件夹,存放压缩后的图片。
原生js ---- 九宫格和转盘抽奖插件
用原生js实现的转盘抽奖和九宫格抽奖插件!
1、转盘抽奖----指针旋转
// 指针旋转,从右向左顺时针计算奖品
var luckArr = ['100减99优惠券','谢谢参与','59减15优惠券','谢谢参与','39减10优惠券','谢谢参与'];
var luck = new LuckDraw();
var startRotate = function(elem){
luck._init({
rotateId: '#luckPointer',
luckNumber: Math.floor(Math.random() * (5 - 0) + 0),
typeNumber: 6,
time: 2000,
type: 'turntable',
circleNumber: 10,
success: function(res){
console.log(res.luckNumber);
console.log(luckArr[res.luckNumber]);
alert(luckArr[res.luckNumber]);
}
});
}
2、转盘抽奖----转盘旋转
// 转盘旋转,从左向右逆时针计算奖品
var luckArr = ['100减99优惠券', '谢谢参与', '39减10优惠券', '谢谢参与', '59减15优惠券', '谢谢参与'];
var luck = new LuckDraw();
var startRotate = function (elem) {
luck._init({
rotateId: '#luckTurntable',
luckNumber: Math.floor(Math.random() * (5 - 0) + 0),
typeNumber: 6,
time: 2000,
type: 'turntable',
circleNumber: 10,
success: function (res) {
console.log(res.luckNumber);
console.log(luckArr[res.luckNumber]);
alert(luckArr[res.luckNumber]);
}
});
}
3、九宫格抽奖
var luckArr = ['10元红包', 'iPad Mini', '莫灰心', '20元话费', '20元话费', '莫灰心', '某视频网站会员一月', '88元红包'];
var luck = new LuckDraw();
var startRotate = function (elem) {
luck._init({
rotateId: '.rui-luck-prize',
activeClass: 'rui-active',
luckNumber: Math.floor(Math.random() * (7 - 0) + 0),
typeNumber: 8,
time: 3000,
type: 'prize',
circleNumber: 10,
success: function (res) {
console.log(res.luckNumber)
console.log(luckArr[res.luckNumber])
alert(luckArr[res.luckNumber])
}
});
}
4、参数说明
| 参数 | 类型 | 必填 | 默认值 | 说明 |
|----|-----|-----|-----|-----|
| pointerId | String | 选填 | luckPointer | 指针对象id |
| turntableId | String | 选填 | luckTurntable | 转盘对象id |
| rotateId | String | 必填 | luckTurntable | 旋转对象id |
| activeClass | String | 九宫格抽奖必填 | rui-active | 九宫格抽奖选中是的效果 |
| type | String | 必填 | turntable | 选择是九宫格抽奖还是转盘抽奖(turntable:转盘抽奖;prize:九宫格抽奖) |
| time | Number | 选填 | 2000 | 抽奖动作的时间 |
| luckNumber | Number | 必填 | 4 | 中奖位置 |
| typeNumber | Number | 必填 | 6 | 共有多少个中奖位置 |
| circleNumber | Number | 必填 | 10 | 轮回圈数后中奖 |
| success | Funtion | 选填 | function(){} | 抽中后返回的成功函数 |
微信小程序----高德地图API实现的DEMO
微信小程序----高德地图API实现的周边,天气,路线规划,地址详情等的DEMO。简单的效果,问一下官方能不能不要乱涨积分,你们涨积分,作者被骂!我真的很失望,再这样,我就不上传资源了!
微信小程序----五子棋(AI篇)
微信小程序----五子棋(AI篇):通过遍历获胜方法和该空位在获胜方法的得分,计算AI的落子位置。
微信小程序----五子棋
微信小程序----五子棋:微信小程序实现五子棋人人对弈,判断输赢,悔棋功能!
微信小程序 ---- 组件应用和实际开发的DEMO
微信小程序系列----有三十个微信小程序的组件应用和实际开发的一些DEMO!
微信小程序----机场索引列表(MUI索引列表)
微信小程序----机场索引列表(MUI索引列表):采用mui的效果实现。
微信小程序----导航栏透明渐变
微信小程序----导航栏透明渐变:采用css3的颜色值rgba,通过改变其中a的值,来实现。
微信小程序----导航栏透明渐变一
微信小程序----导航栏透明渐变一:采用css3的opacity实现。
微信小程序----position:sticky
微信小程序----position:sticky:通过position:fixed与position:relative切换。
微信小程序----右侧展示不动,左侧导航滑动
微信小程序----左滑导航方案2:右侧展示不动,左侧导航滑动。
微信小程序----左滑导航
微信小程序----左滑菜单方案1:左侧导航放在下层,右侧展示放在上层,通过控制上层的滑动,来显示和隐藏左侧导航。
原生js ---- showdown制作的Markdown在线编辑器
利用showdown.js制作的Markdown在线编辑器!可以下载到自己的项目作为Markdown编辑器插件!
微信小程序 ---- 导航栏随滚动透明渐变
该demo采用了opacity和background的rgba两种方法来实现导航栏随滚动透明渐变,但是需要注意的是不兼容IE8及以下的IE浏览器,原因:由于IE8及以下的透明度设置不支持CSS3的opacity属性和rgba颜色值!
mui ---- 搜索列表自定义
1,直接添加引用indexed-list.js和indexed-list.css;
2,修改indexed-list.js的self.el.bar.offsetHeight - 40为 self.el.bar.offsetHeight - self.el.search.offsetHeight
此处的作用是防止你将搜索框去掉,导致的右侧导航不协调
3,修改group && group.length == 1为group
此处是因为你添加的热门等字符串长度大于1而不能触发定位函数
4,禁止self.bindSearchEvent();
此处是由于我的页面不需要搜索,所以讲搜索的触发事件禁止
5,添加你要添加的模块同时在模块的外层div加上data-group="xxxx"你导航处的名字
特别注意此处在utf-8的编码下可以是汉字,但是建议不要采取汉字
最后上边说的这几个地方在我的demo中都已修改好,你可以下载直接使用。
特别说明:如果你的页面需要哪个搜索框,只用放开第四步禁止的代码就好,然后将输入框加入进来,依然可以执行!
原生js ---- ueditor富文本编辑器实例
ueditor富文本编辑器实例----写了一个简单的ueditor富文本编辑器实例,toolbar采用的是它默认的;另一个ueditor富文本编辑器实例是对toolbar进行自定义的实例!
原生js ---- 二维码生成器demo
利用QRCode.js的new QRCode({})接口定义生成二维码的大小,颜色,背景等属性的设置,通过qrcode.makeCode方法接口,将要生成二位码的信息传入,再生成二维码图片!
原生js ---- 二维码解析器和移动端长按识别二位码demo
利用了qrcode.js这个插件的qrcode.decode和qrcode.callback,就能对二维码进行解析,同时对解析结果进行返回。
原生js ---- 二维码生成器js
利用QRCode.js可以制作在线的二维码生成器,同时通过他可以自定义二维码的样式,属性等,使二维码的样式更加丰富,多彩!
JS插件 ---- llqrcode.js
利用llqrcode.js制作二维码解析器(可以是上传图片解析,也可以是扫一扫输出图片再解析)和移动端的‘长按识别二维码功能’!
原生js ---- HTML5中canvas制作的在线取色器
通过HTML5中canvas的getImageData()方法制作的在线取色器,对于前端不用再单独打开一个ps之类的软件来取色。
方便快捷,直接保存网址:https://rattenking.github.io/demo/11/index.html
jquery.pajx.js
ajax + pushState的jQuery封装
JS插件 ---- jquery.pagination.js分页插件
jquery.pagination.js分页插件,一个比较容易上手,且全面的分页插件demo。
JS插件 ---- jquery-mobiscroll时间插件
jquery-mobiscroll时间插件demo,移动端精确到分的时间插件。
JS插件 ---- pc端时间插件demo,精确到分钟
pc端时间插件demo,精确到分钟,可以年月日格式,可以时分格式,可以年月日时分格式的时间插件demo。
JS插件 ---- Swiper.js完整实例
Swiper.js完整实例,包括各种效果的demo以及引入jQuery否的各种js情况。
JS插件 ---- 腾讯的js模板引擎template.js
腾讯的js模板引擎template.js 方便ajax请求的数据进行遍历和数据绑定。
阿里巴巴Java开发手册v1.2.0.pdf
阿里巴巴Java开发手册是规范java开发人员的代码,使其代码更易阅读、查找。