- 博客(29)
- 收藏
- 关注
RSS订阅原创 AMD、CMD规范详解
AMD规范1.1什么是AMD规范Asynchronous Module Definition，用白话文讲就是 异步模块定义，对于 JSer 来说，异步是再也熟悉不过的词了，所有的模块将被异步加载，模块加载不影响后面语句运行。所有依赖某些模块的语句均放置在回调函数中。1.1.2AMD规范是怎么出来的是 RequireJS 在推广过程中对模块定义的规范化产出的1.2用法AMD规范定义了一个自由变量或者说是全局变量 define 的函数。define( id?, dependencies?, fac
2021-04-26 20:00:40
1295
原创 Es6模板字符串封装与使用
前言ES6（ES2015）为 JavaScript 引入了许多新特性，其中与字符串处理相关的一个新特性——模板字面量，提供了多行字符串、字符串模板的功能，相信很多人已经在使用了。字符串模板的基本使用很简单，今天就带大家来了解了解模板字符串。一、基本使用1、传统字符串传统做法需要使用大量的“”（双引号）和+来拼接才能得到我们需要的模版。但是这样是十分不方便的。并且存下一下几点缺陷：1）传统的字符串拼接不能正常换行2）传统的字符串拼接不能友好的插入变量3）传统的字符串拼接不能友好的处理单引号、双引
2021-04-10 11:23:59
377
原创 Ajax详谈
大家学习web的小伙伴们，今天来个大家讲讲关于Ajax的东西，Ajax是一个很特殊的东西，主要的作用也很简单明了。简单的八个字“异步加载 局部更新 ”首先我们先了解Ajax是什么1. 基于web标签的xhtml+css2. 可以使用dom进行动态的显示和交互3. 使用XML和XSLT(是一种用于将XML[文档](https://baike.baidu.com/item/%E6%96%87%E6%A1%A3)转换任意文本的描述语言)进行数据的交换和操作4. 使用XMLHttpRequest进行异
2021-04-07 19:38:04
128
原创 数组去重最详细的方法
ES6set方法第一种 利用set特有的属性将其去重然后用Array.from方法将其转换为数组 <script> let arr = [11, 22, 33, 11, 22, 45, 69, 45, 78, 33] let newArr = new Set(arr) let result = Array.from(newArr) console.log(result) </script>第二种 利用
2021-03-28 22:04:30
162
原创 用C3做一个盾牌
很久没有玩C3今天心血来潮玩了这么一个小玩意话不多说看效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>盾牌</title> <style> * { margin: 0; padding: 0; } body { background-color: #ff3040; } .
2021-03-21 23:33:34
75
原创 数组的方法复习
温故而知新今天来一起复习复习数组的方法1.Array.map 映射 一一对应 Array.map 映射 一一对应 let arr = [1, 2, 3, 4, 5] let arr1 = arr.map(v => v * 2) console.log(arr1);2.Array.forEach 遍历数组 字符串没有这个方法 Array.forEach 遍历数组 字符串没有这个方法 let arr = ['修炼爱情', '剪云
2021-03-17 20:40:56
111
原创 ES6观察者模式，代理
观察者模式，见名知意，就是自己作为一个观察者，观察所发生的事情。<body> <p>监听dom里面的变化</p> <ul id="container"> <li>不为谁而作的歌</li> </ul> <button id="btn">clivk</button> <script> let ul = document
2021-03-11 19:39:41
153
原创 防抖节流
防抖和节流是在很多都会见到的东西 特别是在登录注册等等请求服务器的场景下。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> &
2021-01-25 19:03:52
82
原创 jQuery浅谈
对于很多学习web的小伙伴们来说，jQuery的学习是非常重要的，jQuery能简化代码，带来更好的体验，今天就带大家来一起学习学习jQuery。jQuery的概念jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。j 就是 JavaScript； Query 查询； 意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。jQuery 封装了 JavaScri
2021-01-25 18:58:18
98
原创 HTML5新增标签简谈
上期带大家了解了关于移动端的单位和媒体查询的问题，今天继续带大家来了解关于移动端的新东西，html5。HTML5是什么，有什么用简单来说HTML5 就是HTML 版本的第五次重大修改，目的为了适用移动端的发展广义的HTML5 是 HTML5本身 + CSS3 + JavaScriptHTML5新增了哪些东西语义化标签header 头部标签nav 导航标签article 内容标签section 块级标签aside 侧边栏标签footer 尾部标签以下几点需要注意这种语义化标准
2021-01-11 19:32:10
110
原创 移动端开发之rem，em，px的区别，媒体查询
相信很多小伙伴在学习有关移动端的时候，一开始都是一脸懵的情况，那今天就带大家来回顾回顾移动端的一些小知识点移动端的单位因为市面上的手机众多，而且屏幕的大小不一样，有的大，有的小，所以全部用px是不可取的。这就衍生出了em和rem。那么问题来了，三者的区别在哪。px是一个绝对单位，就像cm m一样多少就是多少是固定的em是一个相对单位，是相对父元素的大小的倍数比如父元素大小是14px，那子元素设置1em就是14px，2em就是28px。rem也是一个相对单位，是相对于根元素HTML的大小来设置的大小
2021-01-11 19:00:05
241
原创 CSS3动画
要说css3新增的属性中那个是最具有颠覆性的，那一定是动画，css3动画可以完成很多想象不到的事情1 过渡(CSS3)过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。transition: 要过渡的属性 花费时间 运动曲线 何时开始;如果有多组属性变化，还是用逗号隔开。<!DOCTYPE html><html lang="en">
2021-01-05 19:41:52
74
原创 Web开发 Flex布局 弹性布局
相信对于很多学习Web的小伙伴们来说，布局方式是一门必修课，今天带带大家其中比较特殊的一种布局方式，弹性布局。弹性布局和常规布局的区别正常来说页面的布局方式分为两大类，一类是常规布局，另一类是弹性布局。常规布局兼容性好布局繁琐局限性，不能在移动端很好的布局flex布局操作方便，布局及其简单，移动端使用比较广泛pc端浏览器支持较差IE11或更低版本不支持flex或仅支持一部分Flex布局的原理flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活
2021-01-05 19:16:37
258
原创 初识正则表达式
正则表达式也是小伙伴们学习js的时候遇到的一大难题，因为正则表达式的内容都是小知识点，很多而且和很杂，其他的东西学多了之后，就容易忘记正则表达式的书写，今天就带大家来学习学习正则表达式。正则表达式的创建一般正则表达式的创建就以下两种1) 构造函数 var regex = new RegExp( 正则表达式字符串[, 匹配模式] );2) 字面量 var regex = /正则表达式/; var reg = new RegExp() var reg = //
2020-12-26 11:15:03
90
原创 如何用JS写一个渐变轮播图
上期我们写了一种无缝滚动的轮播图，今天我们继续学习另一种轮播图，那就是渐变轮播图。搭建html和css其实html和css的内容挺简单的 主要就是放上需要轮播的照片，然后把照片固定在合适的地方即可。渐变轮播图和顺序轮播图不同的地方在于，渐变轮播图是利用透明度来实现的。书写js代码轮播图的主要内容，也是最难的地方。我直接把注释的需要理解的地方都写在代码里面了所以大家直接看代码就好<!DOCTYPE html><html lang="en"><head>
2020-12-26 10:41:40
667
原创 如何用js写放大镜
今天带大家来学习学习如何使用js来写一个放大镜，放大镜的代码其实不难，难在对于结构的理解。结构的理解这点大家可以参考一下，某宝某东等等购物网站，其中的商品都会放上去就会显示一张大照片。一般情况下都是左边一个小盒子，里面一张照片和一个遮盖层 这里面的照片要比盒子的大小小右边一个大盒子，里面放一张大照片，这个大照片的长宽要比和盒子要大结构搭建大家理解了结构的原理的话，搭建起来还是很简单的js的书写js的最主要的就是理解最后一步，求大图片在大盒子里面能移动的最大距离注释我都写在代码里面了大家仔
2020-12-19 09:43:03
371
1
原创 用JS写一个无缝滚动轮播图
大家在学习js的dom和bom的时候，一定遇到了一个比较大的麻烦，那就是轮播图今天来个写一个最常见的顺序轮播图搭建html和css其实html和css的内容挺简单的 主要就是放上需要轮播的照片，然后把照片固定在合适的地方即可书写js代码轮播图的主要内容，也是最难的地方。我直接把注释的需要理解的地方都写在代码里面了所以大家直接看代码就好<!DOCTYPE html><html lang="en"><head> <meta charset=
2020-12-19 09:17:14
236
1
原创 计时器的书写
对于很多网页和很多生活中的地方，都会用到计时器，那么这个准确来计时的东西是怎么写出来的呢，今天带大家写一个简单的计时器。书写css和html的内容<h1 class="title">距离2021高考，还有</h1> <div class="time-item"> <span><span id="day">00</span>天</span> <strong><sp
2020-12-12 17:41:38
1345
1
原创 图片跟着鼠标飞
相信很多小伙伴在浏览很多网页的时候，鼠标的样式发生了改变，或者说是有一张图片跟着鼠标一起动，那么这个跟着鼠标动的图片是如何实现的呢，今天教大家来实现这个动画。
2020-12-12 17:27:14
138
原创 Array高级
上一期到时候我们了解到了关于数组的基础内容，现在我们来学习学习关于Array的高级应用。实例方法sort :对数组的数据进行排序var arr = [1, 2, 11, 0, 9]; arr.sort(); function cmp(a,b){ // a.unicode - b.unicode } // 给arr乱序 arr.sort(function(){
2020-12-05 11:31:52
88
原创 Array基本
数组对于很多学习js的小伙伴来说，肯定是一个非常常用的东西，今天带大家来学习数组的相关内容。数组的基本使用数组用于存放多个数据，每个数据都有唯一的下标（不限任何类型）。创建一个数组[数据,数据,数据,…]new Array(长度) // 空数组 var arr = []; var arr1 = new Array(); // 创建一个长度为10的空数组 var arr2 = new Array(10); // 创
2020-12-05 10:08:45
129
原创 逻辑运算符与if else的配合使用
谈到判断语句，相信大家第一反应就是逻辑运算符和if else，今天带大家来谈谈关于逻辑运算符和if else。逻辑运算符与 或 非 ，布尔运算符与（并且）符号：&&语法： 表达式1 && 表达式2 [&& 表达式3 …]将 表达式1 进行 boolean 判定以下数据会被判定为falsenullundefinedfalseNaN‘’ “”0其他数据全部为真如果表达式1 的判定结果为假，则直接返回表达式1的结果
2020-11-27 20:26:10
615
原创 循环的那些事
相信很多小伙伴在学习js的时候，一开始遇到第一个问题肯定就是关于循环的。今天带大家来了解了解循环的内容。1.循环的作用重复的运行一段代码[做的是相同或相似的事情]2.循环的特点：一 循环条件 ： 规定了循环的执行次数 循环变量二. 循环操作： 相同或相似的语句 - 循环体3循环的分类一：do while循环do{// 循环体 其中需要包括循环变量的 变化}while(条件) var count = 0; while(count < 10){//2. 循环的条件
2020-11-27 17:11:42
72
原创 如何使用精灵图
刚刚带大家学习了一下二级菜单的写法，这次我们来聊聊精灵图的使用，因为我想大家在仿写其他页面的时候总会遇到各种各样的小图标，很多小图标都能找到，这里推荐大家去搜 -阿里矢量图-这是阿里的矢量图库，里面的矢量图基本能满足大部分人的需求，但是一些奇奇怪怪的小图标确实是找不到，这个时候推荐大家使用精灵图，精灵图的对于很多大项目来说是很友好的，为什么呢，因为精灵图只需要访问一次，不需要占用服务器端太多的内存。因为精灵图一般位于导航栏里面，所以我们还是要先见一个框出来，也是差不多1200px,浏览器效果如下然后
2020-11-21 12:01:09
778
1
原创 如何写一个二级菜单
相信现在的你打开任何一个网页，它的导航栏的内容绝对会决定是是否浏览下去的关键因素，今天就来教大家如何书写一个二级菜单。对于一个正常网页来说，其正常的内容都显示在中间1200px里面，所以我们要把这个导航栏的框建好。浏览器显示效果如下大家也都知道一级菜单是大部分是通过li来写的，其实二级菜单也是用li写的。我们只需在以有的ul li里面再写一个盒子加上一个ul li。在css里面也只需通过display来显示的隐藏二级菜单。网页显示效果如下完整代码如下<!DOCTYPE html&g
2020-11-21 10:34:52
1911
原创 盒子模型详谈
对于每个web的小伙伴来说，如何完美的布局是件十分重要的事情。这其中最重要的就是对于盒子模型的理解。一个页面做的怎么样，往往取决于你的盒子放的怎么样，今天就带大家来回顾一下css的盒子模型。一.盒子类型行盒，display等于inline的元素行盒在页面中不换行浏览器默认样式表设置的行盒：span a img 文本元素 label input…块盒，display等于block的元素块盒在页面独占一行浏览器默认样式表设置的块盒： 容器元素（div、header、nav 、footer…）、h
2020-11-15 22:49:26
80
原创 定位和浮动不得不说的那些事
相信对于很多学习web的小伙伴来说，何时用定位、何时用浮动这个问题肯定是被困扰一时的，今天就带大家来一起了解了解。在此之前第一步我们要了解什么是浮动、什么是定位。然后才能知道他们的区别和用法。1.浮动（float）CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。Float（浮动），往往是用于图像，但它在布局时一样非常有用。元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素
2020-11-15 22:38:05
875
原创 五大浏览器的简谈
目前来说，市面上的浏览器有太多太多，例如QQ浏览器，UC浏览器，谷歌浏览器，360浏览器…等等很多很多的浏览器，但其实很多浏览器都是这五大浏览器的换皮版本，这五大浏览器便是- IE：Microsoft Internet Explorer （edge）- 火狐：Mozilla Firefox- 谷歌： Goolge Chrome- 苹果：Apple Safari- 欧朋： Opera1.IE：Microsoft Internet Explorer （edge）相信各位的win电脑上面都有这款浏览
2020-11-08 21:32:12
492
原创 初学者如何学习HTML和CSS
今天想和大家聊聊关于初学者如何学习html和css。其实对于我来说，也是一个初学者，差不多算是一个零基础的学者。分享给大家一些学习的方法和 心得。1.想学习一门语言，首先得了解这门语言是什么、是做什么的拿html为例子 HTML的全称是Hypertext Markup Language, 中文也就是超文本标示语言。是WWW的描述语言。设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电
2020-11-08 21:13:44
616
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人