jsdiff文本对比插件的介绍与使用
在日常开发和许多文本处理的场景中，经常需要对比两个文本之间的差异。jsdiff是一款强大且实用的JavaScript库，能够帮助我们轻松实现文本对比的功能。在本文中，我将详细介绍jsdiff插件的特点和使用方法。 1.简单介绍 jsdiff 是一个轻量级的JavaScript库，专注于提供高效的文本差异对比功能。它可以用于比较字符串、文本块甚至是整个文档的差异。jsdiff的优势在于其简单易用的API和灵活的配置选项，使得开发者能够根据自己的需求定制对比的方式和结果呈现形式。官方提供了三种不同的比较方法（字符diffChars、单词diffWords、行diffLines）适用于不同的场景，需要根据实际需求选择合适的方法，也提供有API可以获取相同/差异的函数。 该插件使用比较简单，只需要导入核心JS文件`diff.js`即可，需注意的是从GitHub代码库下载下来的代码包中并不该文件，官...
文章分类：前端技术 HTML/JS/CSS
一个猜你所选的小程序随写
1.背景介绍 关于本篇文章的命名《一个猜你所选的小程序随写》我也是很无奈，没有特别突出的主题，更像是随写一样，给我多年前知道的一款猜你所选的一个游戏交互的一个呈现，所以下文的所有内容将是想到哪里写到哪里。 大概是在2007年左右吧，一个同学给我展示了一个小小的“绝活”让我眼前一亮，主要是拿了十五张扑克牌，我默选一张（不对外告知），由他分别堆成三叠，每叠五张，通过按一定的规则摆放，前后共三次最终可挑选出我选定的那一张牌。这个小技巧也是逢年过节我常拿来为大家展示的一个雕虫小技，值得大家来了解一下，不过这其中的算法我肯定是不知道，只能是按照渣渣程序的方式进行一个鸡肋的实现。 十五个元素可以是十五张小纸条，十五个麻将，十五个扑克牌等等，本次也使用十五张扑克牌来模拟共计十五个元素，分别是：A，2，3，4，5，6，7，8，9，10，J，Q，K，小王，大王，它们可以是顺序排列，也可以是随机乱序组合，以下...
文章分类：前端技术 HTML/JS/CSS
websocket学习着编写了一款chrome小插件
背景介绍 半年前有幸分享了一下浏览器开发者工具的技术分享，当时的PPT在写至最后处总感觉理论讲解多于代码分享，于是琢磨着编写一下相关的代码，在经过一番苦思冥想后最终锁定了浏览器插件编写的实现上，所以在经过一番知识百科后，略微掌握了一部分的理论知识，随着深入的了解后，于是就实现了一个小小的插件，算是技术知识总结吧，或许是为了备忘吧，也或许是为了丰富本站博客技术文章内容吧，也就有了本文。本文以代码实践为主，直接上代码（懒得去花太多事件了）。 manifest.json { "name": "渣渣插件", "version": "1.0.0", "manifest_version": 2, "description": "这是一款比较简单的插件示例。", "browser_action": { "default_icon": "statics/images/logo.png" , "defaul...
文章分类：前端技术 HTML/JS/CSS
CSS3的开门效果
记得在2010年的时候，学了一下flex语言，看到一个示例是一个开门效果，那时感觉很高大上，虽然早已有了CSS3，但发现从网上找了一下类似这种效果的实现还是真的比较少，反正搜了一些相关的没有搜索到，点击图片查看效果，示例写的比较简单，右键源文件为相关代码。 运行结果 点击图片开门效果，门开了没关上，只能开一次 参考代码 <title>开门大吉-点击图片</title> <style type="text/css"> .imageBox{ margin: 10px auto; width: 300px; height: 300px; position: relative; overflow: hidden; } #bg_box{ width: 100%; height: 300px; position:absolute; top:0; left: 0; background:url("bg....
文章分类：前端技术 HTML/JS/CSS
简单的图片轮播效果实现（二）
背景描述 接着前面两篇轮播图片实现的文章，发现想要实现各种各样的效果都是可以的，这不再来奉上一篇从中间向周围扩散的实现。期初的构想是较为简单的，从一个5x5或7x7的矩阵中，先找出正中心点，然后再根据一个点分别向上、左、下、右的顺序逐步扩散去实现突破切换，实际上这种实现就束缚了必须是一个正方形的图像才能比较准确的从正中间向周围扩散，那就这样吧，等后期有机会了我再调整为能够满足长方形的实现，现在不是不能满足，得需要做一些兼容，并且如果是长方形的话，就无法从正中心点扩散了，先就这么着，你得信任这点我是可以做到的。如下几个图分别是5x5、7x7的分析图，其中椭圆形的框为最中间的一个点，放形中为以中心的斜下放开水旋转（构成一个圆形区域）的先后顺序，也就是将一个二维的数组转换为以这种结构包裹的新数组即可实现，参考如下： 参考代码 实现的Java代码为（示例的右键源文件中有同等的js的实现代码），其中...
文章分类：前端技术 HTML/JS/CSS
简单的图片轮播效果实现（一）
背景介绍 看了一下腾讯课堂这里的教程https://ke.qq.com/course/204364 （第22个小节） ，感觉这个效果值得拥有，于是就有了这个实例，目前实现的较为简单，从左到右和从右到左，理论上讲后期我会加上4个对角线和中心开始效果，转至实例页面：“/demo/simpleImageSwitch/index.html”，左右切换效果参考如下： （图片从左至右切换） 实现原理 实现原理比较简单，实际上就是把一个矩形划分成横向与纵向的坐标，再使用css的背景图坐标填充的方式定时轮询显示即可。所以基于此种方式的实现还可以有更多种的实现效果，比如从上至下、从下至上、从左上角至右下角、从右上角至左下角等一共9种方式的图片轮播切换。本篇文章共实现了从上至下、从左至右、左上至右下5中效果，其实搞清楚这个实例是如何写的之后“任何效果”都可以实现，以后有机会再继续丰富。其中左上至右下还是稍微复...
文章分类：前端技术 HTML/JS/CSS
CSS3画太极图
看了下兄弟连的CSS3视频讲解，觉得圆角边框处值得学习学习，就按照视频中的讲解也做了一份儿示例，算是加深印象吧。示例中有使用纯css画出一个太极图的效果，瞬间感觉好像很高大上的样子，东西比较简单，作为总结分享的一个知识点，特别需要注意的是视频中的示例存在一个小小的兼容性问题，由于视频中的运行示例在chrome下显示正常，放到IE10下时的运行效果为： 也就是说在IE10下面出现的效果是多出边框与背景共存的一个宽度X的像素，后经过查找资料找到添加 background-clip:content-box;样式即可，具体可以在IE10下或chrome等浏览器下运行查看示例效果。 参考代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>div的圆角学习</title> <style type="tex...
文章分类：前端技术 HTML/JS/CSS
使用CSS3山寨一款iPhone效果
一款渣防iPhone效果的实现，看了一下实现这种效果的视频教程，学着去做了一款，示例中的效果为黑色的iPhone，这里给换成白色的，审美和专业方面经不起推敲，大致看上去像那么回事儿就可以了，使用CSS3实现的。 运行效果 参考代码 <!DOCTYPE html> <html> <head> <title>山寨iPhone</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <style type="text/css"> body{ margin: 0; padding: 0; background-color: #1a1a1a; } #phone{ width:230px; height:450px; background-color: rgba(240,240,240 , 0.9); ...
文章分类：前端技术 HTML/JS/CSS
CSS3效果的幽灵按钮
前几天在腾讯课堂看了下幽灵按钮的实现，凭着感觉实现了一下，不知道这种效果是不是传说的幽灵按钮效果，只在Chrome与Firefox兼容较好，Chrome效果最佳，点击这里查看效果。 运行效果 参考代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>幽灵按钮,在Chrome与Firefox下运行</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style type="text/css"> body{ margin: 0; padding: 0; font-size: 12px; } #box{ width: 800px; height: 300px; margin: 100px ...
文章分类：前端技术 HTML/JS/CSS
CSS3的圆角属性学习及示例
参考示例 参考代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>div的圆角学习</title> <style type="text/css"> #div1{ width: 200px; height: 100px; border: 2px solid red; line-height: 100px; text-align: center; font-weight: bold; } #div2{ width: 200px; height: 100px; border: 2px solid red; line-height: 100px; text-align: center; font-weight: bold; border-radius: 20px; } #div3{ width: 200px; height:...
文章分类：前端技术 HTML/JS/CSS
运营时间： 天
用户数量： 人
文章数量： 篇
评论数量： 条
点赞个数： 个
最后更新：