最近更新了一波轻交互的公众号文章: 第一期 超简单的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 注释下的那样: 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 就像是在死背一些东西。
几个比较基础的题目,夯实基础! 求n!+(n-1)!+(n-2)!+………+1!...+= i; i++; } while (i<=10); System.out.println(sum); } 只有先夯实基础,才能更好的学习下去
因此,在下方的实现方法并不一定是最优解,甚至是比较笨的解决方法,但是仍然决定记录下来。...需求 我的一部分博客偶尔也发在csdn上面,然后由于自己的”小心思”,我老是想知道自己在csdn的排名及浏览量是多少,每次登陆去查看显得太烦了,因此写了个shell脚本,每天自动抓取自己账号的浏览量及排名存进...,使用了简单粗暴的grep,原理是先获取我个人页面的所有源码,然后根据源码发现,排名数字在排名字符串上一行,因此搜索得到上一行,之后再拿到的一行里面匹配整数。...之后重启crontab以使我们的任务生效service cron restart. 好了,到了这里就完成啦,以后就可以再数据库中直接看到以往的排名信息及浏览量了。 完。...联系邮箱:huyanshi2580@gmail.com 更多学习笔记见个人博客——>呼延十 var gitment = new Gitment({ id: '超简单的shell爬虫示例', //
1.认识JS js概念:运行在浏览器(客户端)的解释性(一行一行得执行)脚本语言。 js引擎:执行js代码:从上往下一行一行执行,出现问题则终止。...js的作用: Html:结构,骨架 css:表现,美化 js:行为 动效(轮播图。tab切换。楼层。...拖拽,百度搜索,表单验证) js的核心: JS语法> 1.ECAM-Script:制定了js的语法规范 2.BOM: (browser object model...2.JS的基础语法 2.1.js代码的书写 1.行内式 a标签的js代码;">百度 非a标签的,js代码">按钮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度是为了让指针指向选中块的中间
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的取值必须是接口的方法名;
它是一种设计模式,由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 #!
reverse().join(""); 6 // 和原字符串做对比 7 return reverseStr === toStr; 8}; 9isReverseStr("121"); 找出数组中出现次数最多的...item]) { 7 obj[item] = 1; 8 } else { 9 obj[item]++; 10 } 11 }); 12 13 // 找出出现次数最大的数...利用Set不能接收重复数据的特点 再利用展开运算符可以把一个类数组转为真实数组的特点 秒去重 1const arr = [1,9,8,8,7,2,5,3,3,3,2,3,1,4,5,444,55,22...]; 2 3 function noRepeat(arr){ 4 5 const newArr = [...new Set(arr)]; //利用了Set结构不能接收重复数据的特点 6 7...10 11 console.log(noRepeat(arr)) 12 //[1, 9, 8,7, 2,5, 3, 4, 444, 55 ,22] 数组去重2 利用了indexOf只能查找到第一个的下标
一、简单的去重方法,利用数组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]) { //=>相等:重复了,我们拿出来的
领取专属 10元无门槛券
手把手带您无忧上云