eva-engine / 2021questions Goto Github PK

View Code? Open in Web Editor NEW

12.0 12.0 1.0 6 KB

2021questions's People

Contributors

Stargazers

Watchers

Forkers

brunadelafel

2021questions's Issues

2020-03-07 千位计数格式

/ **
 * 转换数字为千位计数格式
 * @params {Number} number - 输入数字
 * @renturn {String} 数字对应的千位格式的字符串
 */
function formatToThousands(number) {
 // ...
}
console.log(formatToThousands(123456789)) // 123,456,789

不强制要求使用正则，可以尽量使用正则实现，不太会正则的同学也可以顺便学习一下正则～
不需要考虑浏览器兼容性

2020-03-11 Canvas 实现小球动画

学习canvas的时候到了，你要是不会canvas，写完这道题，你就会canvas了，听我的。
预估学习完成用时：35min。

canvas 的宽500 高 500 底色黑色
创建一个小球宽20 高20
点击小球从 (20, 20) 的地方，向 (480, 480) 由慢到快移动

canvas 基础用法：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Basic_usage
canvas 绘制图形：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes
canvas 基础动画：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Basic_animations

动画实现：自己探索吧。

可以把自己的效果写在以下任意平台上：

http://codepen.io/ 大佬们都在上面写demo，不过国内访问巨慢
https://jsbin.com/ 这个平台比较简洁，如果能进得去可以用这个
https://code.h5jun.com/?html,output 这个是月影大佬自己搭建的jsbin，服务器在国内快一点

可以把核心代码放在回复里～

2020-03-06 取URL参数

今天第一天先来一道简单的

在日常开发中，我们经常会遇到取url上面参数的需求，今天这道题就是取URL上面的参数。

不需要考虑浏览器兼容性

2020-02-13 实现以下功能

题目：
html

<div id="people"></div>
<div id="language"></div>

javascript

//  在此处增加代码
function People() {
  const [name, setName] = useState('LiLei')
  const [old, setOld] = useState(1)
  let i = 1
  setInterval(()=>{
    i++
    console.log(i)
    setOld(i)
  }, 1000)

  return tmpl`<div>My name is ${name}, I\'m ${old} years old.</div>`;  
}

function Language() {
  const [language, setLanguage] = useState('Toy')

  setTimeout(()=>{
    setLanguage('HTML')
  }, 2000)
  setTimeout(()=>{
    setLanguage('CSS')
  }, 4000)
  setTimeout(()=>{
    setLanguage('JavaScript')
  }, 6000)

  return tmpl`<div>I love ${language}</div>`
}


render(document.querySelector('#people'), People)
render(document.querySelector('#language'), Language)

在 javascript 最上面增加代码，实现以下效果。

效果图：

2020-03-10 HTML与对象数据进行单向绑定

<div id="content">
    My name is {name}, I love {language}.
</div>

function bindHTMLContentWithObject(el, obj) {
  // ...
}
const obj = {
  name: 'LiLei',
  language: 'JavaScript'
}

const newObj = bindHTMLContentWithObject(document.querySelector('#content'), obj)
// content 内容 My name is LiLin, I love JavaScript.

newObj.name = 'HanMeimei' // #content 内容为 My name is HanMeimei, I love JavaScript.

newObj.language = 'Java' // #content 内容为 My name is HanMeimei, I love Java.

2020-03-15 实现一个编译器

let x=[1,2,3],sum=0;for(let i of x){sum+=i;}

写个编译器，编译成es5的语法，并运行成功

2020-03-18 四则运算

function calculator (string) {
// ...
}

请不要使用eval/Function等

calculator('1 + 2 +3+4') // 10
calculator('1 * 2 + 3 * 4') // 14
calculator('1+2* 3+4') // 11
calculator('1+ 2* 3*4') // 25
calculator('1+2+3/4') // 3.75
calculator('1/2+3+4') // 7.5
calculator('1+2/3+4') // 5.6666666666666
calculator('1+2-3+4') // 4
calculator('1+2+3-4') // 2
calculator('1-2+3+4') // 6
calculator('1+2-3*4') // -9
calculator('1 / 2 / 3 / 4') // 0.04

2020-03-08 对象合并

不需要考虑浏览器兼容性。

2020-02-24 实现一个抽奖程序

写一个爬虫，收集一下所有回复ISSUE做题的人，并且抽出一人中奖。
ps：不需要有UI，只需要有程序就好，不一定非要在浏览器中跑，node里面跑也可以。

2020-03-09 对象数组去重

2020-03-19 进制转化

实现一个进制转换函数，不要使用toString

function mulBase(num, base){
  // code here
}

mulBase(20, 2) // 10100
mulBase(20, 8) // 24
mulBase(20, 10) // 10
mulBase(20, 16) // 14

mulBase(020, 2) // 10000
mulBase(020, 8) // 20
mulBase(020, 10) // 16
mulBase(020, 16) // 10

mulBase(0x20, 2) // 100000
mulBase(0x20, 8) // 40
mulBase(0x20, 10) // 32
mulBase(0x20, 16) // 20

mulBase(0b10, 2) // 10
mulBase(0b10, 8) // 2
mulBase(0b10, 10) // 2
mulBase(0b10, 16) // 2

2020-03-16 实现简易版 EventEmitter

const ee = new EventEmitter()
// 绑定事件
ee.on('someAction', (a, b, c) => {
  console.log('action1',a,b,c)
)

// 绑定事件
ee.on('someAction', (a, b, c)=>{
  console.log('action2', a, b, c)
})

// 绑定单次事件
ee.once('someAction', (a, b, c)=> {
  console.log('actionOnce', a, b, c)
})

// 触发事件
ee.emit('someAction', 1, 2, 3)
// 输出 action1 1 2 3
// 输出 action2 1 2 3
// acitonOnce 1 2 3

// 再次触发事件
ee.emit('someAction', 3,4,5)
// 输出 action1 3 4 5
// 输出 action2 3 4 5

2020-03-12 实现add方法

function add(number) {
}

add(1)(2)() // 3， 1+2 = 3 

add(1)(2)(3)() // 6， 1+2+6 =6

add(5)(8)(8)(6)(5)() // 32，5+8+8+6+5 = 32
// ...  以此类推，后面的执行次数不限

实现该 add 方法

2020-03-17 实现目录结构

输出目录结构，目录深度最高10层，输出可折叠的效果，样式不限制。

const arr = [
  {
    "path": "src/assets/example.xlsx"
  },
  {
    "path": "src/assets/example.jpg"
  },
  {
    "path": "src/assets/example.png"
  },
  {
    "path": "src/components/File.vue"
  },
  {
    "path": "src/components/Header.vue"
  },
  {
    "path": "src/components/SenderList.vue"
  },
  {
    "path": "src/components/Step.vue"
  },
  {
    "path": "src/components/Uploader.vue"
  },
  {
    "path": "src/App.vue"
  }
]

类似：

2020-03-20 实现一个倒计时工具

设计一个倒计时工具，考虑稳定性、复用性、可用性。
相当于自己沉淀一个倒计时组件，未来工作中可以直接拿过来用。
做到简单易懂易用，未来进入公司工作到时候，遇到倒计时需求的时候，可以自信到把现在写的代码拿出来用，或许那时候已经是一个好用的npm包了。