- 博客(19)
- 收藏
- 关注
RSS订阅原创 JavaScript 定义类时如何将方法提取出来
现在我们有一个海洋生物类function marineLife(name,job,friend){ this.name = name; this.job = job; this.friend = friend; this.introduceMyself = function(){ console.log('大家好！我叫'+this.name+',我是一名'+this.job+',我最好的朋友是'+this.friend); }}让我们用这个
2021-11-22 09:32:54
580
1
原创 apply()智用:需要几个参数但只有一个参数数组
比奇堡的居民海绵宝宝，派大星，蟹老板正在开partylet arr = ['SpongeBob','Patrick','Mr.Crab'];如果章鱼哥来了，珊迪也来了arr.push('Squidward Tentacles','Sandy');此时一共派对有5人如果章鱼哥和珊迪一起来了arr.push.apply(arr,['Squidward Tentacles','Sandy']);可以看出，当需要anargument list，但是只有asingle ...
2021-11-21 17:51:59
450
原创 数据可视化相关网站
D3 galleryGallery / D3 / ObservableFlowing Data / NYTimes / …FlowingData | Data Visualization and StatisticsData Video ExplorerData Video Explorer配色网站ColorBrewer: Color Advice for MapsTensorFlowPlayground / Embedding ProjectorA Neural Net
2021-11-20 14:30:01
122
原创 关于2D互动技术的一些要点
没有动画的程序很难称作是互动产品。2D图形技术主要涵盖动画原理动画是定时器改变元素属性，渲染引擎重新渲染的过程。动画的本质是关于时间的函数PS:右图就是一个快进慢出的动画动画的要素...
2021-11-17 19:48:12
364
原创 Egg 初学笔记
egg是什么egg.js简称egg，属于小而美的框架，不直接提供功能，它拥有强大的插件机制，扩展性好，egg基于koa(https://eggjs.org/zh-cn/intro/egg-and-koa.html)开发，可基于egg制定上层框架。Koa特点提供很好的异步解决方案(callback形式的异步编程模型会带来很多问题)。 增加Context对象，一次请求的上下文(类似traceId这种需要贯穿整个请求的属性)都挂在在这个对象上，在Koa1中为中间件的this，在Koa2.
2021-11-15 16:16:29
1165
原创 ECMAScript 6 模板字面量的常见用法
模板字面量可以理解成是字符串的一种，形式上用反引号 `` 将内容括起来。目录特点一：模板字面量会保留反引号内部的空格、回车、tab,会将\n,\t翻译。特点二：支持字符串插值特点三：和标签函数搭配食用特点一：模板字面量会保留反引号内部的空格、回车、tab,会将\n,\t翻译。 //展示保留空格、回车，翻译\n let templateLiteral = ` 当时共客长安。\n似二陆初来俱少年。`; console.log(te...
2021-11-15 09:37:30
1024
原创 JavaScript 慢慢移动的海绵宝宝
前情提要：Javascript 移动的海绵宝宝这个海绵宝宝是匀速运动、突然停下来的，有点不合理。现实中我们跑步都是速度慢慢减小到0。要实现这个效果，就必须速度逐渐减小，本质上是盒子的步长逐渐减小。step = (targetLocation - nowLocation)/num其中目标位置不变，当前位置却在不断增大，num是一个定值，因此步长会逐渐减小。但是试想一下，如targetLocation和nowLocation都是整数，num也是，step极可能出现小数，这样if(..
2021-11-11 11:19:00
666
原创 Javascript 移动的海绵宝宝
效果描述：做一个简单的动画效果，刚刷新页面时，SpongeBob在页面的左上角位置，随着时间推移，他匀速向右移动，直到右侧抵达页面右侧停下来。分析：SpongeBob作为一张图片被存放在<img>里面，<img>又被存放在<div>里面。图片运动的本质：盒子的位移变化只变化一次还不够，因此需要setInterval这个定时器位移，读取时使用offsetLeft属性，赋值时使用style.left属性注意：1. 前者无单位，后者有2. 只
2021-11-11 09:47:10
2134
原创 JavaScript 立即执行函数的两种写法
(function(str){ console.log(str+'欢迎你~'); })('行步至春深'); (function(str) { console.log(str+'欢迎你~'); }('行路易知难'));可以看到，每种写法都比平常多出两个小括号，其中一个可以看作是调用，里面装参数，另一个可以看作防止语法错误。立即执行函数除了可以传参，其实也可以有名字，写成下面这样并不算错。 (function fn(str)...
2021-11-10 16:35:28
511
原创 JavaScript实现鼠标拖拽登录框
拖拽的本质是登录框获得光标的偏移来调整自身的偏移。拖拽发生时，光标相对盒子的坐标不会变化，相对于页面的坐标却在变化，二者的差值就是盒子需要的。两个注意点：1. 赋值给盒子的什么属性outer.style.top = e.pageY - y + 'px';outer.style.left = e.pageX - x + 'px';2. 差值是数字型的，需要加上'px'这里面涉及三个鼠标事件，总结来说就是：（1）鼠标按下，获得坐标（2）鼠标移动，盒子移动（调用boxMove(
2021-11-10 11:44:04
299
原创 JavaScript 实现鼠标移动时实时获取其相对盒子的偏移
实现思路：1. 获得盒子相对于页面的偏移量 div.offsetTop和div.offsetLeft2. 获得鼠标相对于页面的偏移量 e.pageY和e.pageX3. 前两者相减即可获得鼠标相对于盒子上沿和左侧的偏移4. 使用鼠标移动事件 mousemove实现效果：代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <me.
2021-11-10 10:14:50
676
原创 JavaScript 利用location对象实现跨页面传参
需求简述：两个页面login.html和homepage.html，在login页输入用户名，点击登录会跳转到主页，主页拿到login页输入的用户名实现思路：1. 跳转：修改location.html2. 拿参：处理location.search，先去掉?，再根据“=”来分隔键值对，拿到值注意：想要url中加上参数，login页面的form不可少实现效果login.html页面homepage.html页面代码login.html<!DOCTYP.
2021-11-09 17:42:19
992
原创 JavaScript实现 按钮不可过频繁使用
主要用到setInterval和clearInterval方法和一个计时变量。效果代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d.
2021-11-09 14:51:45
92
原创 JavaScript实时更新中国标准时间
用到Date对象和BOM中的setInterval()定时器。效果如下（每隔1s刷新一次）代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d
2021-11-09 14:14:53
105
原创 JavaScript实现智能搜索框
应用场景：1. 搜索框在页面中占据的空间过小，希望无论浏览到什么位置，可以轻易地回到并聚焦搜索框。2. 搜索框里面的文字大小过小，希望能够在上方开辟一块空间放大内容解决思路：1. 对整个页面添加键盘事件keyup类型的侦听器，然后使用e.keyCode属性来获得用户按下的键，如果是s/S，就让搜索框聚焦。2. 对搜索框添加键盘事件keyup类型的侦听器，将搜索框的value赋给放大内容盒子(我用的是<p>标签)的innerText，如果不为空，就将盒子通过style.disp
2021-11-09 10:42:58
3335
原创 JavaScript封装一个注册函数解决兼容问题
我们知道JavaScript注册(绑定)事件主要有两类方式，第一类传统方式具有注册事件的唯一性，即对于同一元素的同一事件，不会出现两个处理函数，如下 var btn = document.querySelector('button'); btn.onclick = function(){ document.body.style.backgroundColor = "yellow"; }第二类没有唯一性限制，具体有两种做法，其中addEventListener
2021-11-08 15:48:58
221
4
原创 JavaScript对象数组示例
可以用于暂时无法从数据库中拿到数据时，模拟数据使用var datas = [{ name:'囧菌', subject:'JavaScript', grade:'100'},{ name = '双笙', subject = 'React', grade = '100'},{ name:'陈拾月', subject:'Vue', grade:'100'}];其实相当于var datasInt = [1,2,3];
2021-11-08 09:40:58
638
原创 翻译：seq2seq model in Machine Learning
原文链接：seq2seq model in Machine Learningseq2seq 首次被谷歌引用是用于机器翻译。在那之前的翻译方式十分朴素。敲入的每个单词会被忽视语法和上下文直接转换成目标语言。seq2seq 利用深度学习革新了这种翻译过程。它在翻译时不仅会考虑当前的输入，还会考虑邻居。现在 seq2seq有了更广泛的应用，如图像描述、对话模型、文本总结等。seq2seq的工作过程：顾名思义，seq2seq将词序列(一个或多个句子)作为输入，再输出一个词序列。它通过一个循环神经网络
2021-11-01 15:22:45
304
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人