自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

止于至善

大学之道,在明明德,在亲民,在止于至善。知止而后有定,定而后能静,静而后能安,安而后能虑,虑而后能得。物有本末,事有终始。知所先后,则近道矣。

  • 博客(12)
  • 资源 (37)
  • 问答 (2)
  • 收藏
  • 关注

原创 ES6学习之路3----rest参数与扩展运算符

什么是rest参数(…rest) ES6引入rest参数(形式为“…变量名”),用于获取函数的多余参数。rest参数之后不能再有其他参数(即只能是最后一个参数)。函数的rest参数ES5写法:function fn(){ for(var i = 0; i<arguments.length ; i++){ console.log(arguments[i]); }

2017-11-30 16:17:55 2938

原创 ES6学习之路2----变量的解构赋值

什么是解构 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。简单的解构赋值实例:let [a,b,c] = [1,2,3];等同于:let a = 1,b = 2,c = 3;数组的解构赋值 数组的元素是按次序排列的,变量的取值由它的位置决定。1.只要等号两边的模式相同,左边的变量就会被赋予对应的值。 2.如果解构不成功

2017-11-29 16:20:10 317

原创 ES6学习之路1----变量的声明

1、var 它是variable的简写,可以理解成变量的意思。在ES6之前,JS声明变量都是采用的var。实例1:var str = "Hello World!";console.log(str);//Hello World!实例2:var a=2;if(true){var a=3;}console.log(a);//3实例3:for(var i=0;i<10;i++){console

2017-11-28 17:41:36 474

原创 双飞翼布局----利用float和margin实现双飞翼布局

圣杯布局实现两边定宽,中间自适应的三栏布局,中间栏要放在文档流前面以优先渲染。 这里改进只是对布局进行改进,会将中间栏放到最后渲染!HTML代码<div id="main-content"> <div id="main-left">left容器</div> <div id="main-right">right容器</div> <div id=&quot

2017-11-24 15:17:21 493

原创 双飞翼布局的原理

双飞翼布局的起源双飞翼布局介绍-始于淘宝UED双飞翼布局解决的问题 两边定宽,中间自适应的三栏布局,中间栏要放在文档流前面以优先渲染。其实双飞翼布局就是在圣杯布局的原理上进行完善,实现相同效果的完美布局!双飞翼布局原理HTML代码<div id="content"> <div id="main-wrap"><div id="main"></div></div> &lt

2017-11-24 14:51:34 1903

原创 圣杯布局的原理

圣杯布局的起源In Search of the Holy Grail圣杯布局解决的问题 两边定宽,中间自适应的三栏布局,中间栏要放在文档流前面以优先渲染。圣杯布局的原理HTML代码<div class="content"> <div class="center col"> </div> <div class="left col"> </div>

2017-11-24 13:54:25 3653

原创 前端自适应----单位rem

下边是大神对《移动前端自适应解决方案和比较》的链接: 移动前端自适应解决方案和比较通过使用,自我感觉网易的解决方案是最方便我们使用时候的计算。 代码:(function(factory){ factory(); window.addEventListener('resize',factory,false);}(function(){ var width = documen

2017-11-21 15:37:34 1353

原创 神奇的position:sticky

sticky定义position:sticky定义, eg:CSS中position属性介绍(新增sticky) 设置了sticky的元素,在屏幕范围(viewport)时该元素的位置并不受到定位影响(设置是top、left等属性无效),当该元素的位置将要移出偏移范围时,定位又会变成fixed,根据设置的left、top等属性成固定位置的效果。sticky特点sticky属性有以下几个特点:

2017-11-21 13:54:08 2000

原创 使用showdown.js将Markdown文档转换为HTML

引入showdown.js<script src="https://cdn.bootcss.com/showdown/1.3.0/showdown.min.js"></script>通过showdown转换var converter = new showdown.Converter();//转换为HTMLvar html = converter.makeHtml(markdownText);/

2017-11-16 10:47:58 2405

原创 Markdown在线编辑器

使用showdown.js实现的Markdown在线编辑器DEMO效果图引入showdown.js<script src="https://cdn.bootcss.com/showdown/1.3.0/showdown.min.js"></script>HTML代码<div class="editor-box"> <p class="head-name">Markdown编辑器</p&g

2017-11-15 11:09:23 983

原创 MUI导航栏透明渐变----原生JS实现

首先声明:由于backgroundColor的值采用的是RGBA,IE8及以下不支持,所以此效果不支持IE8及以下的浏览器css代码body,p,h1{margin: 0;}.module-layer{ width: 100%; position: fixed; top: 0; left: 0; z-index: 100000;}.module-laye

2017-11-07 11:27:47 4196

原创 MUI索引列表自定义----添加热门、最近等多个模块

先看一下我们要实现的效果图首先我们需要引入的文件<link href="../css/mui.min.css" rel="stylesheet" /><link href="../css/mui.indexedlist.css" rel="stylesheet" /><script src="../js/mui.min.js"></script><s

2017-11-03 19:04:37 3822 6

CreateJS实现【益智类数字华容道小游戏】

使用 CreateJS 实现的益智类数字华容道小游戏; 适合学习 CreateJS 人群的实战小项目。

2024-06-04

uniapp 基于 vue3 开发的【验证码输入框】

概要:uniapp 基于 vue3 开发的【验证码输入框】,输入值的输入框切换和光标是否自动聚焦等; 使用人群:使用 uniapp 基于 vue3 开发的应用,需要用到输入验证码; 使用场景:短信验证码登录、短信验证码验证身份、短信验证码修改密码等场景。

2024-04-11

批量修改文件名和将txt转excel

现在有n个不重名子文件夹在同一个文件夹内,且每个子文件夹内有一个txt文件,所有txt文件名相同。 1. 将每个txt文件名修改为对应所在文件夹名; 2. txt文件改为表格文件。 3. 将表格内的长串数字默认为文本格式。

2022-06-08

python 批量将xlxs文件中的base64转成png图片

使用 python 开发的一个将【批量将xlxs文件中的base64转成png图片】的工具,工具适合所有没有程序基础的人员,直接按照文档执行,就能完成转换!如果有特定的需求,请联系开发人员,对代码进行特定需求开发!

2022-05-07

微信小程序 redux 应用实例

对 redux 组件在微信小程序的二次封装,以及使用实例,满足微信小程序的全局状态动态更新!

2021-11-30

python工具 ---- 下载英雄联盟每个英雄的皮肤海报.exe

使用该工具可以一次性下载英雄联盟所有英雄的皮肤海报!

2021-10-15

python工具 ---- 批量将图片转base64工具.exe

通过执行该工具,批量将图片转成base64的js文件,适合配合微信小程序图标使用!

2021-10-15

vue ---- 基于canvas的绘制海报组件

使用vue 2.0开发的基于 canvas 绘制海报的组件!

2021-03-04

python ---- 批量图片压缩工具

1、使用 python 的 PIL 包,对图片进行压缩; 2、环境为 python 3.7.0、安装 PIL 包: pip install pillow; 3、图片尺寸等比例修改参数 scale【默认0.2】,图片压缩质量参数 quality【默认100】,图片公用命名参数 basename【默认'newimg-'】; 4、执行工具会在当前文件夹下新建一个newimg文件夹,存放压缩后的图片。

2021-02-24

原生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&#40;luckArr[res.luckNumber]&#41;; } }); } 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&#40;luckArr[res.luckNumber]&#41;; } }); } 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&#40;luckArr[res.luckNumber]&#41; } }); } 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(){} | 抽中后返回的成功函数 |

2018-12-05

微信小程序----高德地图API实现的DEMO

微信小程序----高德地图API实现的周边,天气,路线规划,地址详情等的DEMO。简单的效果,问一下官方能不能不要乱涨积分,你们涨积分,作者被骂!我真的很失望,再这样,我就不上传资源了!

2018-02-07

微信小程序----五子棋(AI篇)

微信小程序----五子棋(AI篇):通过遍历获胜方法和该空位在获胜方法的得分,计算AI的落子位置。

2018-01-16

微信小程序----五子棋

微信小程序----五子棋:微信小程序实现五子棋人人对弈,判断输赢,悔棋功能!

2018-01-15

微信小程序 ---- 组件应用和实际开发的DEMO

微信小程序系列----有三十个微信小程序的组件应用和实际开发的一些DEMO!

2018-01-09

微信小程序----机场索引列表(MUI索引列表)

微信小程序----机场索引列表(MUI索引列表):采用mui的效果实现。

2017-12-21

微信小程序----导航栏透明渐变

微信小程序----导航栏透明渐变:采用css3的颜色值rgba,通过改变其中a的值,来实现。

2017-12-20

微信小程序----导航栏透明渐变一

微信小程序----导航栏透明渐变一:采用css3的opacity实现。

2017-12-20

微信小程序----position:sticky

微信小程序----position:sticky:通过position:fixed与position:relative切换。

2017-12-20

微信小程序----右侧展示不动,左侧导航滑动

微信小程序----左滑导航方案2:右侧展示不动,左侧导航滑动。

2017-12-19

微信小程序----左滑导航

微信小程序----左滑菜单方案1:左侧导航放在下层,右侧展示放在上层,通过控制上层的滑动,来显示和隐藏左侧导航。

2017-12-19

原生js ---- showdown制作的Markdown在线编辑器

利用showdown.js制作的Markdown在线编辑器!可以下载到自己的项目作为Markdown编辑器插件!

2017-11-15

微信小程序 ---- 导航栏随滚动透明渐变

该demo采用了opacity和background的rgba两种方法来实现导航栏随滚动透明渐变,但是需要注意的是不兼容IE8及以下的IE浏览器,原因:由于IE8及以下的透明度设置不支持CSS3的opacity属性和rgba颜色值!

2017-11-08

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中都已修改好,你可以下载直接使用。 特别说明:如果你的页面需要哪个搜索框,只用放开第四步禁止的代码就好,然后将输入框加入进来,依然可以执行!

2017-11-03

原生js ---- ueditor富文本编辑器实例

ueditor富文本编辑器实例----写了一个简单的ueditor富文本编辑器实例,toolbar采用的是它默认的;另一个ueditor富文本编辑器实例是对toolbar进行自定义的实例!

2017-10-17

原生js ---- 二维码生成器demo

利用QRCode.js的new QRCode({})接口定义生成二维码的大小,颜色,背景等属性的设置,通过qrcode.makeCode方法接口,将要生成二位码的信息传入,再生成二维码图片!

2017-09-19

原生js ---- 二维码解析器和移动端长按识别二位码demo

利用了qrcode.js这个插件的qrcode.decode和qrcode.callback,就能对二维码进行解析,同时对解析结果进行返回。

2017-09-19

原生js ---- 二维码生成器js

利用QRCode.js可以制作在线的二维码生成器,同时通过他可以自定义二维码的样式,属性等,使二维码的样式更加丰富,多彩!

2017-09-19

JS插件 ---- llqrcode.js

利用llqrcode.js制作二维码解析器(可以是上传图片解析,也可以是扫一扫输出图片再解析)和移动端的‘长按识别二维码功能’!

2017-09-19

原生js ---- HTML5中canvas制作的在线取色器

通过HTML5中canvas的getImageData()方法制作的在线取色器,对于前端不用再单独打开一个ps之类的软件来取色。 方便快捷,直接保存网址:https://rattenking.github.io/demo/11/index.html

2017-09-11

jquery.pajx.js

ajax + pushState的jQuery封装

2017-06-29

JS插件 ---- jquery.pagination.js分页插件

jquery.pagination.js分页插件,一个比较容易上手,且全面的分页插件demo。

2017-06-27

JS插件 ---- jquery-mobiscroll时间插件

jquery-mobiscroll时间插件demo,移动端精确到分的时间插件。

2017-06-27

JS插件 ---- pc端时间插件demo,精确到分钟

pc端时间插件demo,精确到分钟,可以年月日格式,可以时分格式,可以年月日时分格式的时间插件demo。

2017-06-27

JS插件 ---- pc端三级联动的demo

三级联动

2017-06-16

JS插件 ---- jquery-1.11.3.js

1.11版本的jQuery

2017-05-26

工具插件 ---- cutterman_3.2_20160819.zip高效切图软件插件

cutterman是一个配合ps的高效切图软件插件

2017-05-26

JS插件 ---- Swiper.js完整实例

Swiper.js完整实例,包括各种效果的demo以及引入jQuery否的各种js情况。

2017-05-26

JS插件 ---- 腾讯的js模板引擎template.js

腾讯的js模板引擎template.js 方便ajax请求的数据进行遍历和数据绑定。

2017-05-24

阿里巴巴Java开发手册v1.2.0.pdf

阿里巴巴Java开发手册是规范java开发人员的代码,使其代码更易阅读、查找。

2017-05-24

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除