- 博客(18)
- 收藏
- 关注
RSS订阅
原创 version-rocket ，一个用于 web 应用检测版本更新的小工具。
简体中文 | English一个用于 web 应用检测版本更新的小工具。经常会发生这样的情况: 当用户在浏览器中打开某 web 应用较长时间且未刷新页面, 在应用有新版本更新或问题修复时, 用户会无法及时知晓有新版发布, 导致用户继续使用旧的版本, 影响用户体验和后端数据准确性。在团队合作中可能会有这样的情况: 你作为前端工程师, 在联调测试或部署上线时, 每次部署后都需要跟团队成员口头传达已经部署成功, 增加了沟通成本, 不够自动化, 也没有部署记录以有迹可循。使用 version-rocket 可以帮你
2022-07-04 10:39:05
826
原创 使用 WebAuthn 告别密码：在线身份保护的未来
为了让对 WebAuthn 感兴趣的开发者更快的理解和开发，我完成了一个基于 WebAuthn 的身份认证流程的 demo，方便开发者进行二次开发，项目叫 web-authn-completed-app，技术栈：客户端使用 Vue3 + Typescript + Vite3 开发；此外，若要为网站或应用创建公私钥对，用户必须先在该网站或应用中注册，而且对于不熟悉 WebAuthn 的用户来说，可能需要一些时间来学习和理解这种身份验证方式。相比于传统的密码认证方式，WebAuthn 具有许多优点。
2023-01-03 12:37:27
626
1
原创 javascript图片加载---加载大图的一个解决方案
网页在加载一张大图片时，往往要加载很久；而且，在加载过程中，无法很好地控制图片的样式，容易造成错位等显示错误；如果能够在加载大图时，先使用一张较小的loading图片占位，然后后台加载大图片，当大图片加载完成后，自动替换占位图，这样能提供更好的用户体验；由于，我在开发一个图片查看器时，遇到这样的需求，所以我写了个angular服务，来解决这个问题，效果还不错；虽然是angula
2015-04-21 21:17:17
2648
原创 Webapp---深入理解viewport，viewport测试，viewport查询网站
一，关于深入理解viewport，这里推荐一篇文章：http://www.cnblogs.com/2050/p/3877280.html二，这是一段viewport测试代码，可以输出layout viewport，visual viewport，ideal viewport；其实我们最关心的是：ideal viewport的宽度，然后基于这个宽度做流式布局的webapp开发。
2015-04-01 10:12:44
1244
原创 js图片预加载---for与onload事件，图片数据模型到界面的单项绑定，使用interval模拟循环操作
<!----><html> <head> <title></title> <meta charset="utf-8"> <script src="imgloader.js"></script> </head> <body id ="body"> <!-- <button id="sto
2015-03-24 13:12:33
3854
原创 前端开发---前端相关软件分享
**接触前端开发半年多以来，用了不少的前端开发工具与一些前端开发有关的软件。 在这里我介绍下自己的前端开发相关的软件，这些都是我现在用的，用的比较方便顺手的。**HTML+CSS+Javascript编辑器 Adobe Brackets这是一款开源的对HTML5，CSS3支持很好的，Javascript代码提示友好的，具有很多贴心功能的（颜色选择器，路径提示） 简介的编辑器。她还可以配合Ch
2015-03-12 20:05:43
3695
原创 jquery mobile实例---实例、登录与注册的实现、简介美观
设计要点：一.利用页头栏标识用户当前状态，可以在页头放置一个返回按钮二.利用开关组件控制是否保存用户信息三.前进的过渡效果采用：向左自然滑动，返回过渡采用：淡入淡出，用户体验更自然四.不使用页尾栏，给予用户更多空间感，使用页尾栏会导致用户感觉到狭窄。 用户登录
2015-03-05 14:06:08
7803
原创 Canvas---Canvas事件处理、Canvas元素的鼠标点击事件处理、实现一个元素管理器
由于Canvas的 ”忘记式“ 绘图机制（就是它没有维护一份绘制元素的列表）。如果仅仅检测用户是否点击整个canvas元素，只需在canvas上注册事件就好。如果是要分别检测canvas里绘制的不同元素的鼠标点击事件，则要用下面的做法，实现一个元素管理器。一.原理分析1.canvas元素能提供的一个api是，context.isPointInPath(x,y)，它可以判断参数的点是
2015-03-03 19:50:18
12404
原创 Canvas---Canvas图像加载、利用javascript回调机制实现一个图片加载器
canvas的drawImage方法有个缺点，就是当图片还未加载完成时调用它将无效。当然，在高速运转的游戏主循环中，可以直接忽略这个问题，或者用 img.complete == true来做下判断。在游戏循环之外的地方，可以用 img.onload = function (){};这样的回调解决。但是，如果需要实现预先大量图片的加载，并且将加载进度告知用户，这时就需要一个图片加载器。
2015-03-02 14:30:29
5829
1
原创 Canvas---Canvas图像处理、图片查看器实现思路整理、拖动边界控制
没想到一个图片查看器花了我这么多时间，而且没做好。现在整理下思路，然后把不足的地方记一下，日后请教他人。基本思路：一、图片查看器功能---缩放要实现自由缩放，先要实现图片对canvas的自适应，就是给你一张大图片，你能够把它合理缩放后恰好绘制在canvas中。具体做法是：例如：图片为500*500，canvas为240*320，那就取缩放宽度为240，长度为240/500*50
2015-02-04 19:46:18
4616
原创 JUnit4---eclipse中使用JUnit4进行单元测试、快速上手指南
①在你的工程里导入JUnit4的包②右击创建JUnit测试类，在测试类中编写测试代码即可。JUnit 目前需要掌握的有一下几点：Fixture系列：BeforeClass，AfterClass，Before，After普通测试：Ignore（忽视），Text（测试），Test(timeout = 1000)（限时测试），Test(expected = ArithmeticExc
2015-02-03 17:13:59
1129
原创 Canvas---Canvas图像处理、图片查看器、图像拖动实现、js面向对象编程
模仿手机图像查看软件用canvas实现一个图像查看器。目前实现：1.利用将图像起点绘制到canvas之外的技术实现了图像的缩放。 包括，图像自适应、图像放大缩小2.利用路径判断实现，鼠标拖动图像目前存在问题：1.由于拖动改变当前图像显示中点，而缩放的时候，使用的中点没有改变，造成跳动。2.拖动没有做范围规范，可以拖动到死。本次更新特色：1.使用js面
2015-02-01 22:41:34
2995
原创 Canvas---Canvas图像处理、图片查看器、图像缩放功能的实现。
模仿手机图像查看软件用canvas实现一个图像查看器。目前实现：利用将图像起点绘制到canvas之外的技术实现了图像的缩放。包括，图像自适应、图像放大缩小下一步准备实现：鼠标拖动图像截图：总结下要点与步骤：要点：图像缩放与自适应要一起做的话，缩放对象实际是canvas，然后图像去对新的canvas做自适应。步骤：1.缩放canvas，得到缩放后的canv
2015-01-31 21:43:19
5338
原创 Canvas---Canvas绘制钟表，仪表盘
Canvas绘制钟表，仪表盘。《HTML5 Canvas核心技术》这本书在代码方面，没有丝毫注解，我感觉看的挺费劲，如果你想买书的话，最好还是先下本pdf看看吧。下面是表盘的绘制图解函数顺序是按照上图的顺序来写的，最后我为仪表加上了样式。源代码： canvas{ bord
2015-01-29 20:27:35
6538
原创 Canvas---Canvas版画图、圆角矩形、圆形、矩形、图形填充、mvc模式重新整合代码版
使用Canvas实现画图程序。（转载注明出处与作者啊）本次主要更新了一下功能：新添加图形：矩形，圆形，圆角矩形实现了描边颜色与填充颜色的选择使用类似mvc的模式重新整理了代码。M层： 特殊图形的路径规划代码组成，只包含路径规划，无样式设计。V层：设计样式，调用路径规划代码，实际绘制图案。在这里完成填充、描边。C层：判断选择框内容，调用不同的实际绘制代码
2015-01-27 15:08:33
6025
原创 Canvas---Canvas版画图、虚线、辅助线、线条颜色、线条宽度，整合加强版
使用Canvas实现画图程序。本次更新主要实现了一下功能：虚线实线的选择、辅助线、线条颜色选择、线条宽度选择进一步整理了下代码，发现了不少很有用的写法，具体看下面。 canvas{ background-color: rg
2015-01-26 16:43:06
9761
原创 Canvas---Canvas版画图，坐标轴绘制，网格绘制，橡皮筋式画直线
使用Canvas实现画图程序。这个量还是比较大的，请允许我慢慢来。目前做到了：坐标轴的绘制，网格绘制，橡皮筋式画直线目前的不足：没有应用多个图层将网格，坐标轴与实际绘画区域分离接下要做：为橡皮筋式画直线添加上辅助线选项-----------------------------------------------------------------------------
2015-01-25 17:32:13
7566
转载 数据结构练习---遍历序列与二叉树的复原
【题目】假设一棵二叉树的后序遍历序列为 DGJHEBIFCA ，中序遍历序列为 DBGEHJACIF ，则其前序遍历序列为 ( ) 。A. ABCDEFGHIJB. ABDEGHJCFIC. ABDEGHJFICD. ABDEGJHCFI由题，后序遍历的最后一个值为A，说明本二叉树以节点A为根节点（当然，答案中第一个节点都是A，也证明了这一点）下面给出整
2015-01-20 15:51:48
740
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人