- 博客(22)
- 收藏
- 关注
RSS订阅原创 【RidgeUI AI+系列】在线剪贴板
摘要 本文介绍了一款基于JavaScript的在线剪贴板工具开发过程，通过代码实现了高效的文本片段管理功能。工具核心包括：从剪贴板添加内容、复制文本到剪贴板、删除/清空项目、导入导出数据等功能。采用localStorage本地存储确保数据持久化，并集成通知系统提升用户体验。该工具支持文本片段的快速存取，解决了传统文本文件管理的低效问题，代码结构清晰，功能完整，可直接应用于实际开发场景。
2025-07-24 10:37:21
661
原创 【RidgeUI AI+系列】图片批量压缩器
本文介绍了一款图片批量处理工具的开发过程，重点实现了两种图片缩放模式：按比例缩放和按尺寸缩放。系统通过JavaScript代码实现了图片信息提取、批量处理等功能，支持用户选择不同压缩模式（固定比例或固定尺寸），并提供了详细的配置参数设置。工具核心包括文件信息读取、尺寸调整计算和压缩质量控制，最终生成处理后的图片文件列表，满足用户批量处理图片的需求。
2025-07-11 15:38:34
1025
原创 【RidgeUI AI+系列】猜密码游戏
这是一款4位数字密码破解游戏，玩家需在5次尝试内猜出系统随机生成的不重复4位密码。游戏提供数字输入界面和回退/解锁功能，每次猜测后系统会反馈每位数字的三种状态：正确位置、包含但位置不对、不包含。游戏界面包含输入显示和历史记录，使用不同颜色区分结果状态。开发者通过JavaScript类实现游戏逻辑，包括密码生成、输入验证、结果分析和游戏状态管理，并优化了用户输入体验。游戏结束后可立即重启，支持计时和多轮游玩。
2025-07-09 16:27:31
974
1
原创 【RidgeUI AI+系列】中文重复统计器
中文重复统计器开发摘要 本文介绍了一个中文重复文本统计工具的开发过程。该工具通过滑动窗口算法检测输入文本中的重复内容，并高亮显示结果。开发中遇到的主要挑战是中文分词问题，传统基于空格的英文分词方法不适用于中文。通过多次优化，最终采用将中文标点替换为空格的方法，结合滑动窗口算法，实现了较为准确的中文重复统计功能。工具还附带统计换行符、符号和字符数量的功能。开发过程展示了处理中文文本的特殊性，以及通过迭代改进算法解决实际问题的思路。
2025-06-27 15:53:05
794
原创 【RidgeUI AI+系列】密码生成器
文章摘要： 本文介绍了如何使用AI辅助开发一个随机密码生成器web应用。通过定义页面脚本框架结构（state状态和actions动作），AI自动补全了密码生成逻辑并扩展了配置项。开发过程分为：1)编写核心密码生成脚本；2)添加UI控件与状态绑定；3)实现复制功能；4)人工优化界面布局。最终成果（https://ridgeui.com/npm/ridge-password/）展示了AI代码生成与人类设计协作的高效开发模式，其中AI负责逻辑实现，人类专注界面优化，充分发挥各自优势。
2025-06-25 14:36:20
689
原创 RidgUI弹性容器详解 【RidgeUI 页面设计系列】
本文详细解析RidgeUI弹性容器在网页布局中的应用。弹性容器支持横向/纵向排列、多维度对齐、换行间隔等CSS Flexbox特性，子组件可配置固定/弹性尺寸与交叉填充。通过典型案例展示布局技巧：网站布局采用顶部固定+内容弹性1；变长列表需避免固定高度；万年历应对行数波动需设置自动高度。特别强调内容溢出时容器自动生成滚动条，以及嵌套弹性容器带来的布局灵活性。建议开发者根据具体内容特性和显示需求，组合使用尺寸配置实现最优布局效果。
2025-05-26 13:27:22
551
原创 Ridge页面设计系列：反应速度测试
这个页面相对简单，当然我们也可以自由发挥定义每个场景的内容。另外还可以基于等级给出评语等，这个留给大家实现。
2025-03-26 10:18:54
521
原创 RidgeUI页面脚本开发系列:反应速度测试页面
大家好，欢迎学习ridgeui页面脚本开发系列:反应速度测试页面脚本开发反应速度测试是个很简单的应用，开始时显示红色屏幕内容，当变为绿色时，用户以最快速度点击页面，进而测算出反应时间。这个页面主体脚本只有30行，可以说很简单，但我们还是要注意以下2点：1、定义不同的场景，通过用户点击或者自动计时等方式，进行场景间切换2、注意了页面要求，例如从中也更加理解像请求下一帧、鼠标点击与按下区别等，理解html中的相关特性最后附上完整代码。应用和代码可通过ridgeui官网下载和查看。
2025-03-25 15:14:35
1765
原创 Ridge页面设计系列：照片中的中国诗词
这是最终运行效果,当选择图片时,会显示图片匹配的古诗词，同时切换中国色还会更换诗词这其中,页面脚本是预先编写好的,如果有兴趣可以查看对应脚本的教程RidgeUI页面脚本开发系列:获取照片中的中国诗词。前面配置过程，我们综合使用了多层容器、弹性容器对页面组件放置进行了调整， 对文字、字体和颜色进行了微调，最终完成了可适用于所有屏幕设备的界面。
2025-03-24 13:39:03
636
原创 RidgeUI页面脚本开发系列:获取照片中的中国诗词
本文聚焦于 RidgeUI 页面脚本开发中 “获取照片中的中国诗词” 功能的实现。从初始想法出发，阐述利用色彩空间知识，通过提取图片主要颜色并匹配中国色及古诗词以达 “照片中的中国诗词效果” 的构思。经需求分析，确定了先获取图片颜色、再转换为中国色并查找对应古诗词的流程。介绍了基础实现部分，包括颜色提取模块选择、数据准备、颜色匹配策略及完整方法实现。最后展示了 Ridge 页面脚本编写过程，为后续页面设计奠定基础。最后 访问可以查看到这个应用,
2025-03-21 16:36:05
867
原创 RidgeUI脚本开发系列：编写天气预报脚本库
本文是 RidgeUI 脚本开发系列中关于编写天气预报脚本库的内容。天气预报页面主要功能包括显示区域、天气、温湿度等，脚本目标先实现显示天气。获取天气数据通过国外 open-meteo 网站免费 API，其接口需经纬度，可借助 china-regions-lat 库根据地址获取。获取数据后要格式化，将天气代码、风力风向描述转换。脚本库主体命名 WeatherForcast，引入相关库，设置状态和方法获取、转换数据。还实现了切换位置功能，将地区和位置存本地缓存。最后完成较完整天气预报程序，可在ridgeui.
2025-03-10 14:12:02
1915
原创 RidgeUI页面脚本开发系列:“计算器”页面脚本开发
我们首先看看计算器。虽然大家日常经常会使用它，但是真要实现它，还需要进行一些分析从交互分析来看，需要提供一个方法来处理每个按键按下事件。同时提供2个页面状态，显示根据按键的动作，更新计算结果行和计算式行的内容为此，我们可以生成以下程序结构。
2025-02-26 16:08:01
642
原创 “锐制设计” 页面脚本开发教程（一）编写 Hello World
本系列教程将会带你了解开发Ridge页面脚本库。页面脚本是驱动页面响应用户交互和进行变化的核心，也是一个页面内在业务逻辑的承载。同时，脚本库是一个可以独立开发和验证的单元。
2025-02-10 17:12:35
222
原创 RidgeUI开发入门教程（九）：页面即组件
当前端应用或页面越来越复杂时，会同时存在2个问题更重要的是，在上述2种情况下，当我修改了这部分相同的内容，很可能我要在不同页面修改多次。
2025-01-29 18:15:00
305
原创 RidgeUI开发入门教程（七）切换容器：在一个区域显示不同内容
在页面设计中，同样一个位置，往往因为用户的当前数据、或响应用户操作而展示不同内容。这时就需要切换容器来实现：切换容器允许有多个下层组件，通过动态修改容器的“当前“属性而决定显示哪个下层组件。
2025-01-29 03:15:00
350
原创 RidgeUI开发入门教程（六）列表容器：配置重复显示的内容
在常见的用户界面中，重复的列表是我们经常见到的。像电子邮件、新闻、唱片专辑列表、积分榜等重复显示的场景，都需要借助列表容器来实现。
2025-01-28 06:00:00
255
原创 RidgeUI开发入门教程（五）配置组件的样式
一些情况下，我们希望能更灵活的设置组件呈现的样式，例如加个底边、调整文字样式、设置组件的动画效果等。为此，很多组件也提供了样式属性可供配置，选择了某个样式组件就会更改显示形态。当然在此之前，需要在应用安装提供样式的组件库。本文介绍了几个组件库内置样式的样例。未来你可以按需安装更多组件库来实现更丰富的样式。
2025-01-27 06:00:00
458
原创 RidgeUI开发入门教程（三）布局容器
本章节，我们将学习使用容器进行页面布局。在之前章节，组件都是放置到页面的绝对位置，它的坐标是固定的，这样带来2个问题Ridge提供了容器概念:可以将组件放到一个父组件中，父组件对子组件进行布局的控制和统一的操作。
2025-01-26 02:15:00
624
原创 RidgeUI开发入门教程（二）数据连接与交互
您可能看到了，上一节，在文本中输入文字，下面的显示也随之变化。上面例子中，输入框修改造成名称变化， 而名称变化又更新到文本内容。点击按钮造成名称变化，名称变化同时更新了输入框和文本。在这里，输入框较为特殊，他既能接受变化，又能发出变化。很多组件例如输入框、下拉选择、单选框、多选框、标签页等都有类似功能。但无论如何，设计页面我们只需要考虑如何连接属性、如何处理交互即可。
2025-01-25 15:00:00
2330
原创 RidgeUI开发入门教程-（一）编写 Hello World
它并非面面俱到，但是教程涵盖了设计器的所有重要特性，最重要的是，它符合“边用边学”的理念，您可以由此最快速的成为锐制开发人员。在页面中选中单行输入组件，右侧属性栏找到“取值”，当我们输入内容时，单行输入内容也随之改变。从左边组件栏,拖拽一个“按钮” 组件到页面中， 选中按钮，在右上方面板选中交互-点击-单击＋号-下拉框中选择“设置名称”同样，选中文本组件，右侧属性栏找到“内容”，点击右侧闪电图标，选择“姓名”。现在，我们现在增加一个按钮，让用户点击时，将欢迎语重置为其他内容。
2025-01-25 09:15:00
436
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人