- 博客(37)
- 收藏
- 关注
RSS订阅原创 js分割文本
代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>分割文本</title> <style> *{ box-sizing: border-box; } body{ height: 100vh; .
2021-12-03 17:51:20
1589
原创 css小练习----提问app
效果图代码1.label标签的for属性用来关联同一文档中另一元素的id属性。详见MDN<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>回答问题</title> <style> *{ box-sizing: border-box; }
2021-12-02 12:30:22
958
原创 CSS练习——进度条
等待真的是最磨人的~除了练习什么也干不进去。使用到了伪元素，可以熟悉伪元素的使用。注意的点：伪元素的content总是忘加代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>进度条</title> <style> *{ box-sizing: border-b.
2021-11-03 15:19:50
265
原创 js实现简单记事本
用的localstorage存储。先上效果图这里确实有很多容易忘的细节，还有需要理解的代码。不过配的颜色还挺满意的，这里是代码<!DocType html><html><head> <title>记事本</title> <meta charset="UTF-8"> <link rel="stylesheet" href="../iconfont/font_2905111_ufj9v4xzgl/ic
2021-11-01 17:35:53
1057
1
原创 手机页面导航案例+iconfont的使用
CSS小练习，先看效果图通过这个练习还熟悉了iconfont图标的使用。步骤如下1.到iconfont搜索想要的图片，加入购物车；2.选中所有需要下载的图标（最好将所有需要的图标放在一个项目中），点击下载3.下载得到的是一个压缩包，解压缩拿到文件夹。文件夹中内容如下图4.在你需要使用图标的文件内引入iconfont样式文档，上图红线文档。5.添加span标签，class设置为iconfont 以及你要使用的图标的名字。图标名字可以在文件夹的demo_index页面中查看。6.设置span标
2021-10-31 15:54:01
272
原创 加载动画一
之前在B站收藏了一个加载动画合集，但是一直忘记看了。今天先写另外一个加载动画。先上效果图这是一个简单的加载动画，正好熟悉一下之前学习伪元素和动画<!DocType html><html><head> <meta charset="UTF-8"> <title>加载动画</title> <style> *{ box-sizing: border-box;
2021-10-29 22:23:50
110
原创 会扩展的图片
先上效果图上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>会展开的画</title> <style> *{ box-sizing: border-box; } body{ display: flex;
2021-10-23 22:26:18
112
原创 热点图热点图
热点的城市是自己动手加的，然后找的图片上就没有海南了。不怪我，不是故意的。效果图粘完图发现速度设置的快了animation时间调大就好了<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>热点图</title> <style> body{ background-co
2021-10-19 21:26:12
177
原创 日历 ——练习CSS结构伪类选择器
今天拿到一个日历的练习题，试着实现了一下。题目照片如下：然后下面是我最后实现的感觉还可以，第一次拿着图实现。主要是练习结构伪类选择器。代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>rili</title> <style> *{ box-sizing:
2021-10-01 18:09:51
325
原创 js实现todoList
原来用js也能写出来很漂亮的todoList实现了todolist的添加，切换完成状态，删除功能。数据是存储在localStorgage上的因此刷新，或者重新进入数据都是存在的。思路：将每个li节点用js对象来模拟，监听form，提交时添加li元素并追加到ul列表中。为每个创建的li绑定事件，切换状态。代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &
2021-09-30 11:26:26
1670
1
原创 轮播第五遍
轮播都第五遍了大哥！终于熟练写轮播了（老母亲都留下了欣慰的泪水）终于在我对轮播的执着下，很熟练的写出轮播了“小二，上代码”<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>轮播5</title> <style> *{ padding: 0;
2021-09-23 11:34:28
135
原创 css常见布局实现
最近面试呢总虐在css这块，然后总结了面试中常问的两栏、三栏布局的实现一、两栏布局左边固定宽度，右边自适应1.设置浮动设置浮动可以有三种实现两个div，左边都一样。左边：左边设置宽度和float:left右边可以1.什么也不做，2.overflow:hidden，3.margin-left:左边宽度<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <
2021-09-21 16:45:18
182
原创 React项目——简书网站的部分仿写
React的简书仿写项目肯定好多人都实践过了，因为这是慕课特别有名的Dell Lee老师的课程，2021学习这个课程算比较老了。但是涉及到的react的知识点和思想肯定是相通的，对于没有项目经验的我是足够的。其实还有两个页面是空白的，写文章页面和作者的个人主页。但是我着急想试试打包和部署，然后今天就部署到服务器上了。下面是效果图学习过程中笔记存档：第一页：react-create-app是react的官方脚手架工具，帮助我们构建前端工程目录。npm是node的包管理工具node-modul
2021-09-19 17:13:04
441
原创 喝水小案例
先上效果图感觉github上这个系列是专门练习flex布局的，而不是css整个。每个案例基本都是flex布局踩得坑：大杯子的样式cup中align不要设置center，overflow设置为hidden<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>喝水</title> <style>
2021-09-17 18:05:15
161
原创 火车移动小球长大
我不想断更啊，我也不想水的，但是最近笔试太多了。唉，菜是原罪起因是笔试的时候遇到了一个题让实现小球运动以及长大的（人家是一起的）。我就想去看看动画这块的东西，然后继感受到JS的酷之后，我又被CSS震撼到了，是我没见识了。代码很少，我就不分开了。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>火车移动和小球放大</title&g
2021-09-08 23:02:10
175
原创 TodoList之Redux初体验
“todolist的Redux实现至少要默写五遍哦”，Dell Lee老师用最温柔的语气说着最狠的话~该默写还是要默写。效果图代码index.js就不粘了import React,{Component} from 'react';import {Input,Button,List} from 'antd';import store from "./store/store";import 'antd/dist/antd.css';import './App.css';import {ge
2021-09-05 22:55:32
124
原创 五彩斑斓板
那天看到一个贼好看的小案例，一看代码还挺简单，马上我就抄了一遍今天自己写出来了。非常简单。先上效果图，是不是很酷炫代码index<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>色彩斑斓</title> <link rel="stylesheet" href="style.css"></he
2021-09-03 22:49:16
121
原创 React初体验之-TodoList
今天第一天学习react，写的一个练习。先上图创建一个react项目只需三个命令：npx create-react-app myAppcd myAppnpm startApp.js代码import React ,{Component,Fragment}from 'react'import TodoItem from "./TodoItem";import './todoList.css'class App extends Component{ constructor(pr
2021-09-01 17:34:56
156
原创 js轮播图-简易粗糙版
粗糙简易版轮播图实现效果代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>轮播</title> <style> *{ box-sizing: border-box; } body{ display: fl
2021-08-31 12:03:47
124
原创 虚拟DOM基础（一）
首先虚拟DOM就是用JS对象模拟DOM节点，当要改变DOM节点时，页面的更新可以反映在虚拟DOM上。对于使用原生JS操作DOM时，例如，我们要更新10个DOM节点，浏览器收到第一个后不知道后面还有9个，会立即执行更新，最终更新操作执行10次。频繁操作会出现页面卡顿，影响用户体验，降低浏览器性能。有了虚拟DOM以后，如果还是有10次DOM更新操作，虚拟DOM不会立马执行，而是先将10次更新的diff内容保存到JS对象中，将这个对象一次性的attach到DOM树上，避免了大量无用的计算。下面是虚拟D
2021-08-29 18:09:04
168
原创 canvas实现画板
Canvas API提供了一个js和html元素来绘制图形。案例中涉及的canvas的方法主要有canvasEl.getContext()：获取元素的内容canvas提供了三种方法绘制矩形：fillRect(x,yxwidth,height)方法说明：用来绘制填充的矩形填充颜色使用fillstyle属性指定参数说明：x：矩形起点的x轴坐标y：矩形起点的y轴坐标width：矩形的宽height：矩形的高strokeRect(x,y,width,height)方法说明：用来绘制
2021-08-28 22:02:32
490
原创 JS实现对象的浅、深拷贝
JS手写系列要告一段落了，（https://blog.youkuaiyun.com/weixin_47207556/category_11305372.html?spm=1001.2014.3001.5482）作为一个刚接触前端的小白，最开始喜欢上前端也是因为JS，学习的过程中也越来越感受到它的魅力。手写系列真是让我有很大收获和提升，想想一开始看的时候，很多完全看不懂，但是又非常想看懂。一行一行地看，不懂的api就去MDN查，看函数说明，看参数，看返回值。知道的也去查，再巩固一下，或者去翻红宝书。这样开始学了
2021-08-27 18:26:16
128
原创 JS实现Promise
Promise是ES6新增的特性，已经被正式列入ES6的规范中。Promise是一个对象，代表了一个异步操作的失败或成功。应该先熟悉Promise的使用再学习Promise的实现。//实现Promise//Promise的实现需要考虑一下几点/*1.then 支持链式调用,返回一个新的Promise 2.处理异步问题,先用onResolvedCallbacks和onRejectedCallbacks分别把成功和失败的回调存起来 3.为了让链式回调正常进行下去,需要判断onFulfilled和o
2021-08-27 16:26:05
521
1
原创 java知识思维导图
之前学习java的时候记得笔记语雀链接：https://www.yuque.com/u12223705/kb/qqor6u
2021-08-26 16:18:50
271
2
原创 JS手写实现几种继承方式。
继承的几种方式：原型链方式，盗用构造函数方式，组合继承，寄生式组合继承，类继承。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>组合继承</title></head><body> <script> function Animal(name) {
2021-08-26 14:59:21
472
原创 JS数组扁平化
数组扁平化<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>数组扁平化</title></head><body> <script> let arr = [1,2,[3,4],[[5]]] let Farr=arr.flat(2) c
2021-08-25 17:58:54
122
原创 JS数组去重
ES5和ES6中数组去重方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>数组去重</title></head><body> <script> //ES5中数组去重,即使是ES5 也够酷 function unique(arr) {
2021-08-25 17:56:56
93
原创 JS实现new，instanceof关键字，Object.create()、Object.assign()方法
JS实现new，instanceof关键字，Object.create()、Object.assign()方法。最后还有其他小知识点的总结<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>实现instanceof,new关键字，以及Object的两个方法</title></head><body>
2021-08-25 11:03:01
176
原创 JS数组原型中方法实现，forEach，map，filter，some，reduce
forEach，map，filter，some，reduce五个方法都是不会改变原数组的方法。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>实现数组原型方法</title></head><body> <script> //实现forEach方法。forEach
2021-08-24 17:11:57
292
原创 JS函数柯里化，偏函数。最简洁的版本
函数柯里化就是将使用多个参数的函数转化为一系列使用一个参数的函数<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>函数柯里化</title></head><body> <script> function add(a,b,c,d) { retu
2021-08-23 21:01:57
129
原创 js函数节流 时间戳的简易版
函数节流触发高频事件，在N秒内执行一次。采用时间戳方法的思路是：保存函数上次执行时的时间，此次时间与上次执行时间差大于给定时间执行函数。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>函数节流</title></head><body> <div id="layout" style="b
2021-08-23 12:13:18
470
原创 js函数防抖
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>函数防抖</title></head><body> <div id="layout" style="height: 100px; width: 100px; background-color: mistyrose"></div&
2021-08-22 22:22:33
85
原创 js图片懒加载（无防抖），数组方法复习
js图片懒加载可以延迟内存占用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片懒加载</title></head><body> <div style="height: 100vh;width: 100vh;background-color: #FFB866" ></div
2021-08-22 21:35:44
206
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人