最近更新了一波轻交互的公众号文章： 第一期 超简单的AI自测题 第二期 喵星人密信 第三期 vim答题卡 第四期 猜拳 今天开始陆续更新一些教程《通过svg标签实现文章的点击交互功能》。...背景： 微信文章只能放阉割版的svg，例如use标签不能使用，标签里的id会被清除等。 我是如何发现svg哪些内容被阉割的？...通过谷歌开发者工具，查看微信文章保存前后的svg标签变化，可以方便的看出保存的时候哪些svg标签被去除了。 点击交互功能的基本原理： 通过svg标签的动画标签实现动画。...主要技术： 第一期《 超简单的AI自测题》里主要使用了这个标签： <animateTransform attributeName="transform" type="translate" values...1 看到一些好案例，关键技术解决方案，写出文章又不成体系，发星球里; 2 我会在知识星球发一些非常机密的研究心得; 3 一些非常有技巧的知识，给付费用户; 4 公众号的迭代版本，针对文章发更为升级、核心的内容
大家知道，golang开发的东西部署简单是它很大的卖点，但是当vue.js出现后，前端几乎都是它的天下了，因为用了vue.js就回不去了，无法再回到beego的view里写tpl或html页面了...，很受伤，没办法，vue.js实在太方便了，所谓双向绑定，这是神马概念，百度吧，我也讲不清楚…… 之前很懵逼，将vue.js开发的前端，完完全全独立地部署在云上（用nginx，配置一堆，完全没必要），很傻很傻...，其实，将打包的东西放beego的view下和static目录下即可…… 自己的认识： 开发的时候一定要用独立的前端，即vue.js前端项目必须是独立的，独立的服务，不要放beego里的view里作为tpl...当独立搭建起nodejs和vue的环境后，使用淘宝镜像，初始化一个项目，然后各种抄网络代码，行如流水，很顺了。 独立开发好vue.js项目后，打包后就可以放beego里面了。...部署的时候就简单了： 1.在vue.js里，cnpm run build打包，得到dist文件夹，里面有index.html和static文件夹。
今天分享一道超简单的博弈题，通过找规律的方式来发现其中的奥秘，最后只需要一行代码解决。 题目描述 爱丽丝和鲍勃一起玩游戏，他们轮流行动。爱丽丝先手开局。 最初，黑板上有一个数字 N 。...爱丽丝只能选择 x = 1，因为选 x = 2 不满足 3 % 2 = 0，鲍勃面对的就是 N = 3 - 1 = 2，参考上面 N = 2 的情形，此时鲍勃为 N = 2 的先手，鲍勃获胜； 假设 N...事实上，无论 N 为多大，最终都是在 N = 2 这个临界点结束的。谁最后面对的是 N = 2 的情形，谁就能获胜（这句话不太理解的话，仔细看看 N = 2、N = 3 这两种情形）。...接下来，我们得知道一个数学小知识：奇数的因子（约数）只能是奇数，偶数的因子（约数）可以是奇数或偶数。 千万不要忽略 1 也是因子！ 爱丽丝是游戏开始时的先手。...当她面对的 N 为偶数时，她 一定可以 选到一个 N 的奇数因子 x（比如 1 ），将 N - x 这个奇数传给鲍勃；用 N - x 替换黑板上的数字 N ，鲍勃面对的就是奇数 N，只能选择 N 的奇数因子
背景 因为公司系统需要实现横向文字滚动效果，所以自己手动写了一个，没用网上的，感觉网上的啰嗦繁琐，扩展性还不行，喜欢的话点赞收藏吧，下面是gif效果图。...#wai{ width: 350px; //宽度可以修改 border: 1px red solid; //看你的项目需求，需不需要加边框 color: white; //文本颜色 float:...2px; //上边框 margin-left: 250px; //左边距 } #text{ margin-left: 330px; //调整文字首次加载隐藏值，这里数值大小取决于一开始文字滚动等待的时长...width:360px; //根据你的文字长度定义长度，这里定义好之后，基本js代码就不用动了 } js代码，上面修改好之后，基本不用动。
但为什么你没有在你的个人网站实现暗黑功能呢？只要这简单的三个步骤，你就可以拥有暗黑模式。实操开始！（译：并不是所有的人都会 CSS，所以这是为什么我会翻译本文的原因，它真的超简单！）...暗黑模式 Step 2： 开始往 HTML 里添加我们想要的东西，先来添加链接 JS 和 CSS 文件的方法，就像 ADD CSS FILE 和 ADD JS FILE 注释下的那样： <!...好了，我们要创建 main.js 文件了，这是实现暗黑功能的关键； //main.js function darkmode() { const wasDarkmode = localStorage.getItem...来问自己一个问题：如果我的网站有多个页面要咋整？如何在每个页面启用黑暗模式而不是默认的白色背景？答案比你想的要简单得多。...在每个页面的初始 body tag 中添加： onload="onload()" 就这么简单，希望它对你有用，谢谢阅读本文^^ 效果展示 体验下暗黑模式： ? 感谢原作者的翻译授权： ?
面试发现自己的算法知识有不足，因此参考了多篇文章学习总结。 冒泡排序 比较相邻的元素。如果第一个比第二个大，就交换他们两个。 对每一对相邻元素做同样的工作，从开始第一对到结尾的最后一对。...在这一点，最后的元素应该会是最大的数。 针对所有的元素重复以上的步骤，除了最后一个。...快速排序不是一种稳定的排序算法，也就是说，多个相同的值的相对位置也许会在算法结束时产生变动。...最大的三个数的乘积 // 2....数组交集 给定两个数组，要求求出两个数组的交集，注意，交集中的元素应该是唯一的。
博主说：来见识见识传说中最好用的文本编辑器 VIM 吧！ VIM 的学习曲线相当的大，所以如果你一开始看到的是一大堆 VIM 的命令分类，你一定会对这个编辑器失去兴趣的。...第 1 类：各种插入模式 a→ 在光标后插入 o→ 在当前行后插入一个新行 O→ 在当前行前插入一个新行 cw→ 替换从光标所在位置后到一个单词结尾的字符 第 2 类：简单的移动光标 0→ 数字零...你干的很不错。我们可以开始一些更为有趣的事了。在第三级，我们只谈那些和 vi 可以兼容的命令。...但是，现在，我们向你介绍的是 VIM 杀手级的功能。下面这些功能是我只用 vim 的原因。...结束语 上面是作者最常用的 90% 的命令。 我建议你每天都学 1 到 2 个新的命令。 在两到三周后，你会感到 vim 的强大的。 有时候，学习 vim 就像是在死背一些东西。
因此，在下方的实现方法并不一定是最优解，甚至是比较笨的解决方法，但是仍然决定记录下来。...需求 我的一部分博客偶尔也发在csdn上面，然后由于自己的”小心思”，我老是想知道自己在csdn的排名及浏览量是多少，每次登陆去查看显得太烦了，因此写了个shell脚本，每天自动抓取自己账号的浏览量及排名存进...，使用了简单粗暴的grep,原理是先获取我个人页面的所有源码，然后根据源码发现，排名数字在排名字符串上一行，因此搜索得到上一行，之后再拿到的一行里面匹配整数。...之后重启crontab以使我们的任务生效service cron restart. 好了，到了这里就完成啦，以后就可以再数据库中直接看到以往的排名信息及浏览量了。 完。...联系邮箱：huyanshi2580@gmail.com 更多学习笔记见个人博客——>呼延十 var gitment = new Gitment({ id: '超简单的shell爬虫示例', //
几个比较基础的题目,夯实基础! 求n！+(n-1)!+(n-2)!+………+1！...+= i; i++; } while (i<=10); System.out.println(sum); } 只有先夯实基础,才能更好的学习下去
Nginx专为性能优化而开发，性能是其最重要的考量，能经受高负载的考验，有报告表明能支持高达50000个并发连接数。...1.4 动静分离 为了加快服务器的解析速度，可以把动态页面和静态页面交给不同的服务器来解析，加快解析速度，降低原来单个服务器的压力。.../nginx -s reload 2.6 Nginx的配置文件 nginx的配置文件在/usr/local/nginx/conf中的nginx.conf。...现在浏览器访问www.javatrip.com，发现直接转发到了tomcat上了，这样简单的反向代理就完成了。...现在我们的nginx监听的端口号是7001。
1，简介； mybatis是一个优秀的基于 java的持久层框架，它内部封装了 jdbc，使开发者只需要关注 sql语句本身即可。...mybatis通过 xml或注解的方式将要执行的各种 statement配置起来，并通过 java对象和 statement中 sql的动态参数进行映射生成最终执行的 sql语句，最后由 mybatis...4，注意事项； UserDao和UserMapper.xml： 这两个文件的命名，上面也说过，在MyBatis持久层中，把操作接口和映射文件也叫做Mapper； MyBatis独有实体类的配置文件User...Mapper.xml： 这个文件是必须和dao层的接口包结构相同，最好放在一起；但是问题又来了，如果放在一起，IDEA是不会编译src的java目录的xml文件， 解决办法就是在pom配置文件加上如下代码...namespace属性必须是UserDao接口的全限定类名；还有它的操作配置（select）里面的id的取值必须是接口的方法名；
1.认识JS js概念：运行在浏览器（客户端）的解释性（一行一行得执行）脚本语言。 js引擎：执行js代码：从上往下一行一行执行，出现问题则终止。...js的作用： Html:结构，骨架 css：表现，美化 js：行为 动效（轮播图。tab切换。楼层。...拖拽，百度搜索，表单验证） js的核心： 1.ECAM-Script:制定了js的语法规范 2.BOM: (browser object model...2.JS的基础语法 2.1.js代码的书写 1.行内式 a标签的百度 非a标签的,按钮</button...2.demo.js中直接写js代码。 2.2JS的注释 注释：多行注释和单行注释 作用：对代码的解释说明 单行注释：多行注释 2.3js变量 变量：在程序中保存数据的一个容器！
挺简单的简单来说就是正则替换 $.fn.xuanran=function (tpl,data) { var tpl_data=tpl.replace(/{{\w{1,}}}/g,function
vue的使用相信大家都很熟练了，使用起来简单。但是大部分人不知道其内部的原理是怎么样的，今天我们就来一起实现一个简单的vue。...Object.defineProperty() 实现之前我们得先看一下Object.defineProperty的实现，因为vue主要是通过数据劫持来实现的，通过get、set来完成数据的读取和更新。...input type="text" v-model="form"> 改变值 {{form}} js...$el); }) } } } 这里代码比较多，我们拆分看你就会觉得很简单了 首先我们先遍历el元素下面的所有子节点...task => { task.update() }) 然后push的值是一个Watcher的实例，首先他new的时候会先执行一次，执行的操作就是去把纯双花括号 -> 1，也就是说把我们写好的模板数据更新到模板视图上
var res = ran * deg console.log(res); //让转盘至少转10圈，加25度是为了让指针指向选中块的中间
它是一种设计模式，由spring框架来负责控制对象的生命周期和对象间的关系 Spring的四个特点： 轻量级 依赖注入：在系统运行中，动态的向某个对象提供它所需要的其他对象 面向切面编程 是一个容器...在applicationContext.xml中通过注入 SpringIOC可以管理bean的生命周期，管理过程为： 通过构造方法或工厂方法创建bean实例 通过为bean的对象赋值 调用bean...的初始化方法 对SpringMVC的理解 MVC(Model, View and Controller) SpringMVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web...框架，即使用了MVC架构模式的思想，将web 层进行职责解耦，基于请求驱动指的就是使用请求(Request)‐响应(Response)模型，框架的目的就是帮助我们简化开发....DispatcherServlet对View进行渲染视图（即将模型数据填充至视图中） DispatcherServlet将渲染好的视图响应给用户 通过构造器注入和setter方法注入的区别 通过setter
1、编写程序，要求生成10240个随机[0,512)之间的整数，并统计每个元素出现的次数。...（以下代码均为python2的代码，本来我也是用python3的，因为某些原因，愣是把python3换成了python2） 第一题 1 #!...第二题 1 #!...第三题 1 #!...第四题 1 #!
一、简单的去重方法，利用数组indexOf方法 // 最简单数组去重法 /* * 新建一新数组，遍历传入数组，值不在新数组就push进该新数组中 * IE8以下不支持数组的indexOf方法 * */...console.log(array); 二、优化遍历数组法 /*==数组去重==*/ let ary = [1, 2, 3, 2, 2, 3, 4, 3, 4, 5]; /* * 1.依次拿出数组中的每一项...（排除最后一项：最后一项后面没有需要比较的内容） * 2.和当前拿出项后面的每一项依次比较 * 3.如果发现有重复的，我们把找到的这个重复项在原有数组中删除掉（splice） */ //=>i<ary.length...-1：不用拿最后一项 for (let i = 0; i < ary.length - 1; i++) { let item = ary[i]; //=>item：依次拿出的每一项...; k++) { //ary[k]：后面需要拿出来和当前项比较的这个值 if (item === ary[k]) { //=>相等：重复了,我们拿出来的
简介 ---- 使用起来超级简单的text验证框架，从此远离一堆代码验证一个表单。...ValidateAble{ } 如果只需要验空 if validateTexts(textsArray: [nameText,phoneText,emailText]){ } 更简单的方式...，你还可以使用：(会深度遍历所有self.view的子TextFlied，如果没有就提示placeholder) if checkSubmitView(self.view){...phone case email case okpwd case idcard case bankcard case number } 希望可以共同维护，遇到的多种规则...，让它越来越强大，让验证越来越简单。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
