自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

止于至善

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

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

原创 Taro React 系列文章 - 总目录

欢迎大家来到 Rattenking 的《Taro React 入门到实战系列》,开始前博主先列出 Taro React 入门到实战的大纲,同时包括遇到的一些常见报错。实战篇是实际开发中的组件的封装,部分比较有意思的效果,以及一些特殊实际问题的解决办法!入门篇介绍了从安装,开发中的配置问题,记录解决对应的问题。错误篇是在实际开发中遇到的一些错误的处理方法!问题篇是开发中遇到的一些问题的解决方法!...

2022-08-17 15:53:17 484

原创 GIT 命令学习总结导航

1. 实战问题解决和总结github page搭建自己的页面git常用命令GIT ---- GIT 同步远程库操作GIT ---- GIT命令行简写配置2. 学习GIT命令步骤GIT学习----第一节:提交文件到仓库GIT学习----第二节:查看工作区的状态GIT学习----第三节:版本回退GIT学习----第四节:工作区和暂存区GIT学习----第五节:管理修改GIT学习----第六节:撤销修改GIT学习----第七节:删除文件GIT学习----第八节:本地版本库命令总结

2021-11-04 10:52:18 332 3

原创 微信小程序实例系列

下载微信小程序实现部分高德地图功能的DEMO下载微信小程序实现MUI的部分效果的DEMO下载更多微信小程序实例GITGIT地址 https://github.com/Rattenking/WXTUI-DEMOGIT下载 git clone https://github.com/Rattenking/WXTUI-DEMO.git常见...

2018-02-08 11:11:12 56418 19

原创 前端笔记列表

基础知识神奇的position:sticky双飞翼布局的原理圣杯布局的原理Browser 对象(一、history)JS获取当前网址信息前端常见面试题前端自适应—-单位remnode.js 获取url中的各个参数nodejs之url模块nodejs之querystring模块如何写出优美的 JavaScript 代码?获取某个数内的质数github page搭建自己的...

2018-01-30 16:58:21 3163

原创 游戏系列文章 - 总目录

DEMO下载五子棋悔棋DEMO 五子棋AI篇DEMO文字列表五子棋微信小程序(游戏)—-五子棋(棋盘,重置,对弈篇) 微信小程序(游戏)—-五子棋(悔棋篇) 微信小程序(游戏)—-五子棋(AI篇) 微信小程序(游戏)—-五子棋(总结)拖拽拼图微信小程序(游戏)—-拼图游戏(设计思路) 微信小程序(游戏)—-拖拽拼图(图片分块和打乱顺序) 微信小程...

2018-01-11 16:22:54 4316 1

原创 JavaScript ---- 使用原生 JavaScript 实现俄罗斯方块

俄罗斯方块(俄语:Русская клеточная игра или Русская клеточная игра в квадрате)是一款经典的益智类游戏,其规则简单,操作简单,具有很高的趣味性。俄罗斯方块是一款2D的益智游戏,玩家控制一个方块在一个方格内自由移动,通过控制方块的旋转、下落、以及移动,来消除周围的方块,并在此过程中获得分数。方块由四个小方块组成,每个小方块都有四个角落,四条边,以及一个中心点。方块可以旋转,但不能翻转。方块只能在空白的格子上移动。

2025-04-03 10:12:23 255

原创 【JavaScript】---- 数组的交集,并集,差集的实现,以及Set对象的交集,并集,差集的详细介绍和使用

数组的交集,并集,差集的实现。其实本质来说都不算难,但是 Set 类直接实现这些方法,所以我们先自己实现一下,然后再讲解一下 Set 类的相同方法。Set 类的方法,每次都需要我们将数组转换为 Set 对象,做了对应操作后,再转会数组。我们自己通过数组方法实现,需要对返回结果去重操作,我这里的 difference 和 intersection 没有进行去重操作。

2025-04-03 09:45:03 503

原创 node ---- 解决错误【Error: error:0308010C:digital envelope routines::unsupported】

错误是由于 Node.js 17+ 默认使用 OpenSSL 3.0 导致的。通过启用旧版 OpenSSL 提供程序、降级 Node.js 版本或更新项目依赖,可以解决此问题。在开发环境中,可以使用临时解决方案快速修复问题,但在生产环境中,建议采用更安全的长期解决方案。

2025-04-03 09:42:47 715

原创 npm ---- 解决【error when starting dev server: TypeError: crypto$2.getRandomValues is not a function】

当使用 vite 创建 vue 项目的时候,使用 npm run dev 启动创建项目的时候报错。找到报错的原因,如果是浏览器环境,那么就可能是浏览器环境不支持 crypto.getRandomValues 方法,可以考虑安装库来解决浏览器兼容性;由于我是在启动项目时报错,还没有到浏览器访问,因此就是启动的 node 环境存在问题;说明当前 node 环境版本太低导致的,升级 node 的版本,就能解决;升级 node 版本的两种方法,方案一:安装一个高版本的 node;

2025-04-02 09:14:25 1100

原创 GIT ---- 解决【fatal: Authentication failed for】

按照提示完成密钥生成过程,生成的密钥默认存储在 ~/.ssh/id_ed25519 和 ~/.ssh/id_ed25519.pub。将 your-github-username 替换为你的 GitHub 用户名, your-personal-access-token 替换为你生成的个人访问令牌。在命令行中,当你进行 git push 或者 git clone 操作时,将原来使用的密码替换为个人访问令牌。在输入密码的提示处,输入你刚才生成的个人访问令牌。

2025-04-02 09:12:44 861

原创 【Python 实战】---- 实现批量发送邮件,通过读取 excel 中的发送内容

在生活中,我们经常遇到的事情就是邮箱收到自己的工资条。你想一个公司如果只有几个人,那么还好说,但是如果上了十个以上,对于大多数人来说,这就是一件比较麻烦的事情。重复的劳动需要重复几十次几百次几千次,这样的事情对于一个程序员来,是不是很 low?那么人事的小姐姐,就需要我们给他开发一个自动化脚本,它只需要将发送的邮箱和内容写在一个 excel 的表格中,通过表格读取内容,然后自动发送到对应的邮箱中,是不是很简单?

2025-03-12 10:49:31 365

原创 五分钟快速入门:使用 Trae 开发你的第一个VS Code插件

最近改用 Trae 作为开发工具,想体验一下它的 Builder 功能,当然也有程序员,都是一群能过够自动化,绝不多写一行代码的人,因此就使用 Builder 功能开发一个 vscode 的插件。插件开发什么功能呢?Taro React 快速创建新页面,官方就有这个命令脚本,当然 vscode 的插件市场也是存在这个插件的,不过我们这里就以这个功能为基础开发一个我们自己的插件,必定主要是为了体验 Builder 功能,因此开整!!!

2025-03-12 10:47:31 789

原创 Taro React组件开发 —— RuiNoticeBar 通知栏

其实之前实现过一个Taro React组件使用(11) —— RuiNoticebar 公告栏,这个是根据NUTUI实现的,但是最近不是写了一篇【CSS】---- 纯 CSS 实现无限滚动轮播,实现是简单了,但是如果能够将复制元素进行封装在组件内部,而不是直接展示在页面,就能更加完美,所以以【CSS】---- 纯 CSS 实现无限滚动轮播为基础,对 RuiNoticebar 公告栏进行封装组件。将滚动动画的元素和复制的元素放到一个盒子里;给盒子设置动画;

2025-03-06 14:45:08 164

原创 【CSS】---- 纯 CSS 实现无限滚动轮播

仅使用 CSS 创建一个具有无限滚动轮播的动画,无需 JavaScript。首先是无限滚动轮播动画效果在我们常见的开发中都是借用 JavaScript 实现,如果纯粹使用 CSS,我觉得还是一个比较有趣的。动画向左移动直到隐藏使用 transform: translateX(-100%),这里的动画是在动画结束时,第一组元素刚好全部隐藏。第二组元素本来是完全隐藏,在执行 transform: translateX(-100%),动画结束时,刚好从隐藏状态全部显示出来。

2025-03-06 10:59:33 860

原创 【JavaScript】---- JS 数组新方法 with 的使用

当然复制数组的方法还有很多,这里我只举例了我最常用的两种;可以看到,在不修改原数组的要求下,要改变数组的某个元素,在 with 之前,都需要先进行一步复制数组的操作,然后再对复制数组对应索引进行修改;从表面看,就是将复制数组和修改索引值两步合并到一个函数,但是可以对其性能进行测试,测试一下差距。Array.prototype.with() 通过复制原数组实现不可变修改,适合小数据量和函数式场景,但需注意大数组的性能损耗。

2025-02-26 09:45:00 896

原创 【JavaScript】---- JS原生的深拷贝API structuredClone 使用详解与注意事项

是 JavaScript 内置的深拷贝方法,基于结构化克隆算法,用于复制复杂对象(如包含嵌套对象、数组、Date、Map、Set 等类型的数据),并支持处理循环引用。它替代了传统的 JSON.parse(JSON.stringify()) 深拷贝方法,解决了后者无法复制特殊对象和丢失数据类型的问题。

2025-02-26 09:30:00 925

原创 【CSS】---- CSS 变量,实现样式和动画函数复用

本文介绍 CSS 的自定义属性(变量)来实现样式、动画等 CSS 的复用。都是知道在 CSS 和 JS 复用一个很重要的事情,比如 JS 的函数封装,各个设计模式的使用等等,CSS 中样式的复用,同样重要。MDN 使用 CSS 自定义属性(变量)自定义属性(有时候也被称作CSS 变量或者级联变量)是由 CSS 作者定义的,它包含的值可以在整个文档中重复使用。由自定义属性标记设定值(比如: --main-color: black;

2025-02-20 16:05:28 490

原创 【taro react】 ---- 解决 Swiper 组件的 circular 属性为 true 时,在 H5 出现点击实现失效问题

通过第三步和第四步的结果,可以看出 Swiper 组件的【衔接滑动模式】会导致复制的子组件在H5的时候,会导致子组件的事件失效。通过事件冒泡,在父元素事件统一管理子元素的点击事件;通过 id 来获取点击元素在列表中的索引;通过索引找到列表中对应的元素对象;最后执行原来的点击事件的跳转方法。

2025-02-20 10:00:00 62

原创 【CSS】---- CSS 实现超过固定高度后出现展开折叠按钮

学习使用 CSS 函数 clamp 函数,此函数不但能作为区间取值,还可以作为一种判断;此效果采用的纯 CSS 实现,减少了 JS 操作判断;需要待解决问题,就是临界值 200px 的时候,刚好 200px 不应该显示按钮,超出200px才显示,这个目前还在思考解决办法。

2025-01-16 10:28:56 1175

原创 【CSS】 ---- CSS 实现图片随鼠标移动局部放大特效

使用伪元素配合 CSS 函数计算,减少 DOM 的创建和控制;减少了 JS 的计算量,只用单纯的监听位置和移出,其他计算都交给 CSS 的函数完成,原生 JS 直接减少到 11 行代码,如果使用 vue 或者 react 库 JS 的监听代码量更少;熟练的使用 CSS 一些函数,能够使我们更加便捷的实现很多以前需要 JS 才能实现的复杂特效,所以细学 CSS 还是很有必要的,不断学习前进。

2025-01-15 10:55:32 765

原创 《Flutter 学习笔记》Flutter Windows Android 环境搭建

在系统变量中新增 JAVA_HOME,值为你安装 JDK 的根目录。找到你电脑 jdk 的安装位置。

2025-01-07 10:00:00 461

原创 《Flutter 学习笔记》解决 cmdline-tools component is missing 错误

在配置 Flutter 的镜像成功后,验证命令报错。

2025-01-07 10:00:00 495

原创 【CSS】 ---- CSS 实现图片背景清除的滑动效果三种方法

整体来说就是显示或隐藏的之间进行切换,clip: rect 方法这里我没有实现,所以后边学习到这个 CSS 属性的时候再实现;本来想的是完全使用 CSS 实现,包括 input 的滑动监听,但是由于很久没有看 CSS 的属性,对监听那些不是很熟悉,所以这一篇博客就不实现了,后边边学习边实现对应的应用效果;为什么写这篇博客呢?就是前两天看到一个使用纯 CSS 实现各种效果的专栏,包括滚动监听等,我才发现原来现在CSS都已经这么强大了。

2024-12-31 17:24:18 1291

原创 【taro react】 ---- 实现计算多个数组的笛卡尔积和对应笛卡尔积的逆解析

由于开发中数组的每个元素是对象,而不是测试时使用字符串和数字,因此发现在元素是对象时,你解析就会出现重复,因此需要进行结果的去重。

2024-12-31 11:05:35 378

原创 node(2) - npm run 原理

创建脚本生命周期后,我们就可以在执行打包命令前,执行我们自己开发的脚本,然后再执行打包。比如上边示例,就是我通过脚本命令传递参数,来决定当前项目运行的测试接口环境还是正式接口环境。通过命令简化每次切换接口环境需要人工手动改写。npm run 的执行原理,查找 package.json 文件中的 scripts 字段,然后执行对应的脚本命令。脚本执行的查找规则:当前 .bin > 全局 node_modules > 环境变量 > 报错。

2024-12-17 19:20:14 993

原创 【taro react】 ---- 解决编译 H5 时,偶尔出现多页面一起展示

框架编译后我怀疑就生命周期的执行问题,导致出现了页面没有隐藏的问题,但是多人开发,你也不能修改taro的代码,所以只能在他实现的基础上补充;生命周期拦截的解决方案,这个要求页面必须是 class 组件,才能监听到对应的页面,进行设置,如果使用的 hooks 开发页面,那么这里的拦截不会生效,需要你手动添加页面的显示和隐藏设置代码,由于项目已经维护很久,所以工作量会比较大,因此增加了方案三,路由的监听;

2024-12-17 10:00:00 111

原创 【taro react】 ---- 解决验证表单中多个字段是否为空并提示

Object.entries 方法在大多数浏览器是按照 Object 创建key顺序,但是也存在部分浏览器无序,所以不稳定;在构建验证规则的时候调用了一次方法,后边校验表单的时候调用了一次,然后返回的结果,可能个人不是很喜欢这种操作,所以诞生了在此基础上获取标签的属性。一步一步的完善,从方法一到方法四,基本都在优化完善,最后的使用习惯接近 elementui 的提交校验;功能目前也就只是满足现有需求,还可以添加其他的功能,在开发中遇到了再依次添加。

2024-11-28 23:21:17 476

原创 【解决安全扫描漏洞】---- 检测到目标站点存在 JavaScript 框架库漏洞

最后通过安全扫描,其实这个漏洞只是存在隐患,项目中并没有使用 YUI 的 Flash 组件,因此是不存在这个漏洞,但是项目要通过安全扫描,没有办法,只能根据扫描工具的定位漏洞方法,去解决。这个过程都是根据已存在的博客去依次排查解决,所以这些问题遇到了,就只能看能不能在网上找到解决办法,下一次一个安扫问题,估计不一定能解决。

2024-11-28 15:07:50 5349

原创 【taro react】 ---- 解决 input 、textarea 层级穿透

使用 alwaysEmbed 在安卓没有效果;使用 input 标签和 view 标签切换,存在抖动问题;使用 visibility: hidden 不能对 input 进行聚焦;使用 position: fixed 不能实现【键盘弹起时,是否自动上推页面】;使用 position: absolute 上边的问题都能解决,但是由于光标是使用 css 模拟的,因此高度和颜色不能根据字体颜色改变。

2024-11-18 10:04:53 351 1

原创 【taro react】 ---- 常用自定义 React Hooks 的实现【六】之类渐入动画效果的轮播

组件的实现其实没有太大的难度,就是最近看源码,看到了 React.Children.map 的实现,因此使用这个效果用一下;需要注意的是隐藏显示不要直接操作DOM的显示隐藏,因为DOM的改变会导致图片的重新加载,会出现闪动的效果,这是回流导致的图片重新加载;在组件内渲染子组件的时候依然需要使用 React.Children.map 来循环子组件。

2024-11-07 09:56:14 533

原创 React 源码学习01 ---- React.Children.map 的实现与应用

目前是第一次看这个函数的实现,知道他大概干了什么,也大概明白每一步要干什么,但是目前还不清除他为什么要这么干。为什么要来看他的实现呢?一个是只有知道他是怎么实现的,才能知道在调用这个方法时,那些情况会报错,为什么报错,能够快速处理。使用这个方法开发功能的时候能够更加得心应手。

2024-11-07 09:54:12 750

原创 【Python 实战】---- 自动替换项目中全部图片的新服务器地址

脚本虽然简单,但是减少了开发中很多繁琐的容易出错的事情,替换也比较容易。

2024-10-30 09:30:04 88

原创 解决 npm ---- npm ERR! cb() never called! npm ERR! This is an error with npm itself.

其实后边的报错就是因为第六步忽略包关系安装导致的,如果能够知道创建项目的 node 版本和 npm 版本,最好不要使用这种方法,因为你不能保证每次都有效,这种方法会引起后续很多包冲突需要一个一个的解决。这个问题,是因为npm程序执行到未知流程节点中然后没有调用回调通知任务已执行完成,导致进程异常退出,据官方说法他们也没有太好的方式解决,建议直接升级npm版本!记录了,说明解决了这个作者当时的问题,但是我是用这种办法,并没有解决,依然报错!目前还是没有解决我的问题,崩溃了,快!

2024-10-30 09:28:30 5057

原创 【解决 node】 ---- TypeError [ERR_INVALID_PROTOCOL]: Protocol “https:“ not supported. Expected “http:“

报错就是因为没有根据实际的开发引入对应的模块,还是写 node 脚本太少导致的不熟悉。

2024-10-23 17:30:01 429

原创 【react 和 vue】 ---- 实现组件的递归渲染

其实实现没有什么难度,主要是之前没有遇到类似的需求,因此觉得挺有趣的,记录一下实现的过程。我这里单纯的实现的纯展示组件,如果需要事件和其他的,就需要在处理其他的问题。

2024-10-23 10:36:21 807

原创 【Python实战】---- 爬取王者荣耀的所有英雄头像

前几天使用uniapp 实现了一个《扫雷》游戏的小程序,最近又准备使用 uniapp 实现一个《连连看》或者《消消乐》的小游戏,但是在写的时候需要很多图片,由于我本人虽然已经是三十五岁的手残党了,但是没事的时候,还是偶尔会王者几把娱乐娱乐,因此就想到了下载王者的所有英雄头像,来作为实现这个游戏的图片资源,图片只用于自己开发项目,于是就去官网查看现在王者有多少英雄,进行下载,结果去官网一查看,已经120多个英雄了,这要手动一个一个保存,这怎么是一个程序员做出来的事情呢?不是显得我不是一个专业的程序员?

2024-10-21 14:23:03 127

原创 【Python实战】---- 自动生成前端项目图标管理文件

方法很简单,实现的功能很简单,但是它减少了我的维护成本,我后边只需要将蓝湖中的图标下载下来,放到目标文件夹下,执行脚本,就能得到项目中使用的图标管理文件。后期上微信小程序时,将图片上传到服务器也好维护,直接在导入图片地址哪里调用上传接口,然后将返回的图片地址换为导入图片地址,这样只需要修改一个地方的代码,再执行脚本,就能将所有图片地址切换到服务器地址,是不是比前边的方法方便了很多,也不需要人为的去替换,解放我们的双手。哈哈哈!

2024-10-21 09:43:18 278

原创 【Python 错误解决】 ---- SyntaxError: (unicode error) ‘unicodeescape‘ codec can‘t decode bytes in position

这个错误是由于Python解释器在解析字符串时,遇到了无法识别的Unicode转义字符。在Python中,字符串字面量可以使用Unicode转义序列来表示特殊字符,例如\uXXXX表示一个16位的Unicode字符。但是,如果这个转义序列不完整或者不正确,Python就会抛出这个错误。使用原始字符串:您可以在字符串前面加上r来使用原始字符串,而不是使用常规字符串。正向斜线:如果你的文件系统支持,你可以使用正向斜线而不是反斜线。双反斜杠:另一种选择是使用双反斜杠来避开反斜杠本身。

2024-10-08 16:15:48 10071 2

原创 uniapp 游戏 - 使用 uniapp 实现的扫雷游戏

逻辑实现其实不是很难,最主要的是需要理清逻辑,然后按部就班的实现就可以了,写代码实现很重要,不要永远在思考的层面。由于这个是按照 PC 实现的界面,所以在移动端游戏界面会超出视图,因此可以在此基础,将难度在一个页面选择,然后动态计算每个难度格子的大小。ow - 1, 0);srow++) {scol++) {### 15. 总结1. 逻辑实现其实不是很难,最主要的是需要理清逻辑,然后按部就班的实现就可以了,写代码实现很重要,不要永远在思考的层面。

2024-10-08 10:32:00 1049

原创 错误解决 ---- Unexpected lexical declaration in case block no-case-declarations

第三方的文档是在他的环境下进行验证的,代码放到我们自己对接的环境,需要我们适配,解决可能存在的报错处理;报错不可怕,只要一步一步的找到报错的原因,查找报错的原因,解决报错,其实每次报错都是一次积累,至于积累的多少,就看你对每次报错解决的深度,不要羡慕那些一来就能决绝错误的人,他只是比你更加有解决错误的经验而已。认真面对自己的每一个报错,经常总结,你总会有一点点的进步。

2024-09-27 15:43:29 672

使用 uniapp 实现的《扫雷》游戏

使用 uniapp 实现的《扫雷》游戏,此代码配合 https://blog.csdn.net/m0_38082783/article/details/142753436 博客文章,能够方便前端开发参考学习,开发自己的《扫雷》小游戏!

2024-10-23

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(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(){} | 抽中后返回的成功函数 |

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关注的人

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