![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
ccrispy
bebest
展开
-
js17 - Sort Without Articles
内容html部分<ul id="bands"></ul>css部分 <style> body { margin: 0; font-family: sans-serif; background: url("https://source.unsplash.com/nDqA4d5NL0k/2000x2000"); background-size: cover; display: flex;原创 2020-09-15 11:52:32 · 81 阅读 · 0 评论 -
js16 - Mouse Move Shadow
内容html部分<div class="hero"> <h1 contenteditable>????WOAH!</h1> </div>css部分<style> html { color:black; font-family: sans-serif; } body { margin: 0; } .hero { min-height: 100vh; display:原创 2020-09-15 10:39:49 · 114 阅读 · 0 评论 -
js15 - LocalStorage
内容html部分<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><g><path d="M495.9,425.3H16.1c-5.2,0-10原创 2020-09-14 16:24:40 · 130 阅读 · 0 评论 -
js14 - JavaScript References VS Copying
内容js中的复制<script> const players = ['Wes', 'Sarah', 'Ryan', 'Poppy']; const team = players ; console.log(players,team) team[3]='Lux' console.log(players,team) //--------------------------------------------- const team2 = p原创 2020-09-14 12:38:49 · 56 阅读 · 0 评论 -
js13 - Slide in on Scroll
内容html <div class="site-wrap"> <h1>Slide in on Scroll</h1> <p>Consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam原创 2020-09-14 10:53:26 · 118 阅读 · 0 评论 -
js12 - Key Sequence Detection
内容js部分pressCode.splice(- scCode.length - 1 ,pressCode.length + 1 - scCode.length)存在问题 //pressCode length max =6 const pressCode = []; //scCode length = 6 const scCode = 'hahaha' window.addEventListener('keyup',(e)=>{ // console.log(e.key原创 2020-09-11 17:43:00 · 69 阅读 · 0 评论 -
js11 - Custom Video Player
内容html部分(自带) <div class="player"> <video class="player__video viewer" src="https://player.vimeo.com/external/194837908.sd.mp4?s=c350076905b78c67f74d7ee39fdb4fef01d12420&profile_id=164"></video> <div class="player__co原创 2020-09-11 15:39:44 · 273 阅读 · 0 评论 -
js10 - Hold Shift and Check Checkboxes
内容css部分(自带) <style> html { font-family: sans-serif; background:#ffc600; } .inbox { max-width:400px; margin:50px auto; background:white; border-radius:5px; box-shadow:10px 10px 0 rgba(0,0,0,0.原创 2020-09-11 11:18:20 · 144 阅读 · 0 评论 -
js09 - Dev Tools Domination
内容<body> <p onClick="makeGreen()">×BREAK×DOWN×</p> <script> const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }]; function makeGreen() { const p = document.querySelector('p'); p.style.col原创 2020-09-10 14:47:21 · 106 阅读 · 0 评论 -
js08 - Fun with HTML5 Canvas
内容 <canvas id="draw" width="800" height="800"></canvas> <script> let canvas = document.querySelector('#draw'); let ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight;原创 2020-09-10 10:56:29 · 174 阅读 · 0 评论 -
js07 - Array Cardio Day 2
内容运用所给函数进行打印 <script> // ## Array Cardio Day 2 const people = [ { name: 'Wes', year: 1988 }, { name: 'Kait', year: 1986 }, { name: 'Irv', year: 1970 }, { name: 'Lux', year: 2015 } ]; const comments = [原创 2020-09-10 09:46:09 · 133 阅读 · 0 评论 -
js06 - Type Ahead
内容#涵括特性: - Promise fetch()//接受资源路径,返回一个promise对象 then() json()//使用json读取response中的数据 - Array filter() map() push()//arr1.push(...arr2) join() Spread syntax 拓展语句//利用拓展简化push语句 - RegExp match() replace() //定义json文件地址 const endpoin原创 2020-09-09 16:20:12 · 105 阅读 · 0 评论 -
js05 - Flex Panel Gallery
内容针对CSS学习flex部分#### 针对 Flex items 的特性(Children)- `flex-growth`:伸展值- `flex-shrink`:可接受的压缩值- `flex-basis`:元素默认的尺寸值- `flex`:以上三个值按顺序的缩写#### 针对 Flex container 的特性(Parent)- `display: flex`:将这个元素设置成弹性盒子- `flex-direction`:主轴方向 - `row`:横向 - `column`:原创 2020-09-09 14:35:58 · 145 阅读 · 0 评论 -
js04 - Array Cardio Day 1
主要学习js中数组的过滤方法<script> const inventors = [ { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 }, { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 }, { first: 'Galileo', last: 'Galilei', year: 1564, passed:原创 2020-09-08 17:00:28 · 177 阅读 · 0 评论 -
js03 - CSS Variables
html部分 <h2>Update CSS Variables with <span class='hl'>JS</span></h2> <div class="controls"> <label for="spacing">Spacing:</label> <input type="range" name="spacing" min="10" max="200" value="10" dat原创 2020-09-08 15:03:21 · 85 阅读 · 0 评论