javascript30
千追万追
目前是学生。熟悉Python、Java、HTML/CSS/JavaScript。关注Leetcode和Web全栈。
展开
-
JavaScript30 之01 – 架子鼓
JavaScript30是30天每天用原生JavaScript完成一个网页项目的挑战,附有免费的视频教程。 (https://javascript30.com/) 无意间在网上看到,觉得很有趣,就开始了。在这里记录一下过程中涉及到的自己不熟悉的内容吧。 01 – JavaScript Drum Kit HTML5中添加了data-*的方式来自定义属性,所谓data-*实际上上就是data-...原创 2019-06-13 22:05:23 · 217 阅读 · 0 评论 -
JavaScript30之13 – 在滚动时滑入
图片在滚动到时才浮现,这是一个除了酷炫没有什么卵用的功能。感觉挺高大上的,其实主要就是运用了窗口和元素的各种长度。 本项目中用到的: window.scrollY : 当前垂直滚动的像素数 window.innerHeight : 浏览器窗口的文档显示区的高度和宽度 element .offsetTop : 元素的垂直偏移位置 element.offsetHeight: 图片元...原创 2019-06-14 00:26:33 · 107 阅读 · 0 评论 -
JavaScript30之11 – 定制播放器
一, 箭头函数中的this。 箭头函数的this的绑定取决于外层(函数或全局)作用域。 这次真碰上了,没注意就出Bug了。改为使用function创建函数。 二, 这个项目主要是了解HTML5中的<video>相关的属性和事件。 http://www.w3school.com.cn/jsref/dom_obj_event.asp DOM video对象的属性和方法:http://...原创 2019-06-14 00:24:42 · 135 阅读 · 0 评论 -
JavaScript30之09 – 开发者工具
console的各种用法,一目了然 const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }]; function makeGreen() { const p = document.querySelector('p'); p.style.color = '#BADA55'; ...原创 2019-06-13 23:32:03 · 113 阅读 · 0 评论 -
JavaScript30之08 – 快乐的HTML5 Canvas
实现点击绘画功能。 监听到mousemove时调用draw。 isDrawing决定调用draw时是否绘画。监听mouseup和mouseout来维护isDrawing。 在draw中绘制路径时,路径的起始点为lastX, lastY。mousedown的位置或者是上一次路径的结尾。终点为mousemove时间的e.offsetX, e.offsetY。 <can...原创 2019-06-13 23:30:52 · 118 阅读 · 0 评论 -
JavaScript30之06 – 检索
JavaScript fetch(url),返回一个promise对象。XMLHttpRequest的替代方法。 /* 获取json的方法 */ let cities = []; fetch('gist.githubusercontent.com/.../cities.json') .then(blob => blob.json()) .then(data =>...原创 2019-06-13 23:10:47 · 136 阅读 · 0 评论 -
JavaScript30之04 – Flex酷炫相册
主要是学习理解flex。 .panels { min-height: 100vh; /* 高度为浏览器视窗高度 */ overflow: hidden; /* 隐藏scrollbar */ display: flex; } .panel { background: #6B0F9C; box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0...原创 2019-06-13 22:15:04 · 137 阅读 · 0 评论 -
Javascript30之03 – 图片变变变(CSS变量)
从这个项目的教学视频学会一个新的英语短语:smart alec – 自作聪明的人。 从图片可以看出这个项目就是一个可以调整三个参数对图片进行处理的网页,主要是为了介绍CSS原生的变量。 CSS中原生的变量定义语法是:--*,变量使用语法是:var(--*)。这也太麻烦了吧 :root 是根选择器,其实也就是选择<html>。在根上定义这几个CSS变量,就可以全局使用了。 ...原创 2019-06-13 22:10:57 · 429 阅读 · 0 评论 -
JavaScript30 之02 – 时钟
.clock { width: 30rem; height: 30rem; border: 20px solid white; border-radius: 50%; /*圆角半径为边的一半的正方形,就是圆了。*/ margin: 50px auto; position: relative; /* 设为relat...原创 2019-06-13 22:07:42 · 165 阅读 · 0 评论 -
JavaScript30之15 – LocalStorage和事件委托
因为使用了LocalStorage,添加的items再刷新后仍会保留。 这个教程挺好,很多我想了解的概念都出现了。 localStorage 特性 Cookie localStorage sessionStorage 数据的生命期 一般由服务器生成,可设置失效时间。如果在浏览器端生成Cookie,默认是关闭浏览器后失效 除非被清除,否则永久保存 仅在当...原创 2019-06-14 00:33:57 · 166 阅读 · 0 评论