2020年03月_ATWLee

原创 3_1_4.JS--正则表达式

正则表达式正则表达式是用来描述一种特定的字符规则的表达式常用于一段文本中搜索，匹配或替换特定形式的文本。如：词语出现频率统计，验证字符串是否符合邮箱格式，屏蔽帖子中的限制性词语等，也叫做“模式匹配”正则表达式由一些普通字符和一些元字符及特殊符号组成，普通字符包括大小写的字母和数字，而元字符则具有特殊的含义。定义使用//来表示一个正则表达式最简单的正则表达式，就是字符串本身，如/hel...

2020-03-24 17:25:29 117

原创 2_4.Canvas

概念Canvas是新推出的元素标签，用于图形绘制和所有DOM元素一样，拥有自己的属性、方法和事件通过JS脚本可以调用绘图API在网页上完成绘图功能创建Canvas通过canvas标签创建一个空白的矩形区域通过API（js）操作这个区域默认情况下，canvas元素是没有边框和内容的<canvas id="canvas" width='300' height='360'>&...

2020-03-24 17:25:16 119

原创 3_1_5.JS--Math_随机数

随机数Math.random()随机生成一个[0,1)的数。小练习：<script> var r=Math.random(); console.log(r); console.log(r<0.9?"三等奖": r<0.99?"二等奖": "一等奖"); </script>公式一：随...

2020-03-24 17:25:10 143

原创首字母转化成大写

2020-03-24 17:25:05 486

原创 3_1_6.JS--日期Date

Datedate对象，用于封装一个日期/时间，并提供操作日期/时间的API创建一个日期对象，并初始化为当前系统时间：new Date();创建一个日期对象，初始化为一个自定义时间new Date(“yy/MM//dd hh:mm:ss”);new Date(yyyy,MM-1,dd,hh,mm,ss);//月份0-11new Date(ms);//从计算机元年1970.1.1 00：...

2020-03-24 17:24:57 181

原创通过正则表达式判断格式是否正确

2020-03-24 17:24:52 1123

原创 3_1.JS

1.JS概述组成ECMAscript：js标准DOM：document object model 文档对象模型BOM：browser object model 浏览器对象模型变量及常量const：定义常量数据类型原始数据类型：number string boolean underfined null引用数据类型：object date 等等数据类型转换转化为Number类型：...

2020-03-24 17:24:44 114

原创 4_4.DOM--实现推拉门效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .list{ width: 50%; } #d1,#d2,#d3{ height: 300px;...

2020-03-24 17:24:39 324

原创 4_2.DOM--实现表格隔行变色

<html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> table,th,td{ border: 1px solid #aaa; border-collapse: collapse; } tabl...

2020-03-24 17:24:27 137

原创 4_6.DOM--实现客户端购物车计算

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> table{ width: 30%; border-collapse: collapse; tex...

2020-03-24 17:24:22 205

原创 4_5.DOM--实现伸缩二级菜单效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> li{list-style: none;} /*初始样式*/ li span{ background:...

2020-03-24 17:24:15 354

原创 6.1Vue实例生命周期

1.生命周期函数生命周期函数就是vue实例在某一个时间点会自动执行的函数8个beforeCreatecreatedbeforeMountmountedbeforeDestroydestroyedbeforeUpdateupdated

2020-03-24 17:24:10 102

原创 3_1_2.JS--数组

数组的创建数组，是一种保存批量数据的数据结构。程序=数据+算法数据，就是数据结构，指数据在内存中的存储结构算法，就是流程控制，指程序的执行流程好的数据结构可以极大的提高程序的执行效率在一个程序开始之前，首先要考虑数据怎么存储，然后再去思考程序如何执行。<script>//使用new Array（） var arr = new Array();//创建一个空数组 va...

2020-03-24 17:24:06 241

原创 6.2Vue计算属性，方法和侦听器

1.计算属性特点：内置缓存，意思是，如果里面的内容不改变的话，这个计算属性不会再执行一遍，会调用上次的结果。<div id="app">{{fullName}}</div><script> var vm=new Vue({ el: '#app', data: { firstName: 'L', lastName: 'Y' },...

2020-03-24 17:24:01 144

原创 6.3Vue样式绑定

1.class的对象绑定<style> .css{ color: red; }</style> <div id="app" :class="{css:iscss}">//对象，css（样式名），iscss（true还是false） <span>Hello World</span><br>&lt...

2020-03-24 17:23:56 92

原创 6.4Vue条件渲染、列表渲染

v-ifv-showv-ifv-else-ifv-elsekey=“”：元素标签独立性

2020-03-24 17:23:42 101

原创 4_7.DOM--实现全选、反选功能

html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #table{ width: 30%; border-collapse: collapse;...

2020-03-24 17:23:37 307

原创 4_3.DOM--元素—内容、属性、样式

元素内容读取或修改元素节点中的HTML内容：innerHTML读取时会将元素内的所有内容都读出，包括文本和标签。修改时，会将内容中的标签部分解析为html元素读取或修改元素节点中的文本内容：textContent读取时去掉元素内的所有标签，只返回文本内容，并将转义字符翻译为正文修改时会将内容中的标签部分作为字符串写入<div id="div"> </div&gt...

2020-03-24 17:23:32 330

原创 4_9.DOM--添加删除替换元素

创建元素使用JS可以为一个已有的元素添加一个新的子元素1.创建空元素var elem=document.creatElement(“标签名”)元素创建后，可以像使用DOM树种的任意元素一样，为此元素添加属性或内容elem.id=“xxx”elem.innerHTML=“xxx”注意：元素创建完成后，知识在内存中保存，并没有添加到DOM树2.将新创建的元素添加到DOM树的指定父元素...

2020-03-24 17:23:26 294

原创 5_1.BOM--定时器

定时器指程序可以在设定的时间间隔后，在执行，而不是立刻执行JS中有两种定时器：一次性定时器：程序等待一定的时间间隔后，自动执行，只执行一次周期性定时器：程序每隔一段时间间隔，就自动反复执行一次性定时器：var timer=setTimeout（task，ms）参数task：要执行的程序参数ms：要等待的毫秒数定时器启动时，会获得一个定时器序号，如果一个定时器需要被停止。则必须使用...

2020-03-24 17:23:21 251

原创 4_8.DOM--实现标签页切换

html/js<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="./s.css"></head><bod...

2020-03-24 17:23:12 304

文档片段文档片段就是一个虚拟的父元素，可以先将其他新创建的子元素添加到此文档片段中，一次性的添加到页面，可以减少对DOM树的操作，优化页面var frat=document.creatDocumentFragment()比如：要在select下添加许多option。通过循环添加，每次都要操作DOM树，所以可以先创建一个虚拟的父元素，即文档片段，把option子元素先添加到文档片段中，再添加到...

2020-03-24 17:23:07 1186 1

原创 4_12.DOM--实现省市二级列表

.hide{display: none;}<select id="selProvs"> <option value="请选择">--请选择--</option> <option value="北京">北京</option> <option value="山东">山东</option> <opti...

2020-03-24 17:23:03 138

原创 5.BOM

BOM概述Browser Object Model，浏览器对象模型用来访问和操作浏览器窗口，使JS有能力与浏览器交互通过BOM的API，可以操作浏览器的窗口，比如：大小、位置、打开、关闭；还可以访问浏览器软件的配置信息等BOM没有相关标准，不同的浏览器可能会呈现不同的效果主要包括对象window：表示浏览器中打开的窗口navigator：包含有关浏览器的信息screen：包含有关客...

2020-03-24 17:22:57 124

原创 5_3.BOM--event对象

event对象event属于DOM事件：是浏览器自动触发或用户手动触发的与页面进行的交互行为事件处理函数：指事件发生时，自动调用的函数为事件绑定处理函数，通常是为了使页面的内容或状态发生改变每一个元素对象都可以触发各种事件每一个事件均对应一个或多个事件处理函数常用事件：click:鼠标单击时dblclick:鼠标双击时mousedown:鼠标按键被按下mouseup:鼠标按键...

2020-03-24 17:22:52 223

原创 6.5.5Vue组件深入理解--非父子组件间的传值

//Vue非父子组件间的传值<body> <div id="app"> <child content="L"></child> <child content="Y"></child> </div> <script> Vue.prototype.bus = new Vue(); ...

2020-03-24 17:22:44 122

原创 4_14.DOM--Form表单验证

//js//1.构建DOMTree//2.查找触发事件的元素：inputvar input=document.querySelectorAll("#form input");//3.绑定事件for(var i=0;i<input.length;i++){ //功能1：获取焦点事件 input[i].onfocus=function(){ //查找相对应的提示信息并显示 ...

2020-03-24 17:22:30 214

原创 5_2.BOM--图片轮播

<div id="ad">  <ul> <li class="show"><a href="#"><img src="images/a.jpg"></a></li> <li><a href="#"><img src="images/b....

2020-03-24 17:22:24 280

原创 6.5.1Vue组件深入理解--组件使用的细节点

1.is<body> <div id="app"> <table> <tbody> <row></row> <row></row> <row></row> </tbody> </table> </di...

2020-03-24 17:22:19 158

原创 6.5.2Vue组件深入理解--父子组件间的数据传递

父组件向子组件传值，都是通过属性的方式传递：:content="value"在子组件中要props接受这个content，这样子组件就能够使用value值了注意：单向数据流，建议父组件传递过来的值，在子组件中赋给一个新值，这样修改的话，直接是i修改子组件中的新值，就不用对父组件传递过来的值进行操作。子组件向父组件传值，通过emit方法的方式传递：this.$emit(“fn”,value...

2020-03-24 17:22:14 123

原创 4_13.DOM--常用HTML DOM对象:Image\Table\Select\Form

之前介绍的创建新元素以及添加到DOM树等操作，都是使用核心DOM的API进行操作的。HTML DOM对一些常用的，复杂的元素对象进行了部分简化Image对象，Table对象，Select对象，Form对象Image对象image对象，代表< img>元素< img>标签每出现一次，一个image对象就会被创建HTML DOM提供了更加方便的创建image对象的A...

2020-03-24 17:22:08 201

原创 6.7.2旅游网站小项目练习之首页图片轮播区组件代码

<template> <div class="wrapper"> <swiper :options="swiperOption"> <swiper-slide v-for="item in swiperList" :key="item.id"> <img class="swiper...

2020-03-24 17:22:03 239

原创 6.7.3旅游网站小项目练习之首页图标区页面布局组件代码

<template> <div class="icons"> <swiper :options="swiperOption"> <swiper-slide v-for="(page,index) of pages" :key="index"> <div class...

2020-03-24 17:21:58 277

原创 6.5.3Vue组件深入理解--组件参数校验与非props特性

组件参数校验：//子组件接受到的数据content必须是字符串的类型props: { content: String }//子组件接受到的数据content必须是字符串类型或Number类型props: { content: [String,Number] }//子组件接受到的数据content还可以是一个对象props: { content: { ...

2020-03-24 17:21:43 195

原创 6.6Vue中的动画特效

1.Vue中的CSS动画以及CSS动画原理（过渡）上图是由隐藏变为显示：enter的原理过程：例如：一开始，enter为0（需要在css样式自己写这个类，并赋值opacity（透明度）为0）（opacity为0，隐藏），下一帧，enter销毁变为enter-to（opacity为1，显示），enter-active贯穿整个过程，监测是否变化。显示变为隐藏：leave不同的是，一开始lea...

2020-03-24 17:21:37 477

原创 6.7.1旅游网站小项目练习之首页header区组件代码

<template> <div class="header"> <div class="header-left"> <div class="iconfont back-icon"></div> </div> <div class="header-input"><s...

2020-03-24 17:21:32 135

原创 6.7.4旅游网站小项目练习之首页推荐区组件代码

<template> <div> <div class="title">热销推荐</div> <ul> <li class="item border-bottom" v-for="item of RecommendList" :key="item.id"> ...

2020-03-24 17:21:19 289

原创 6.7.5旅游网站小项目练习之城市列表页header区组件代码

<template> <div class="header"> <router-link to="/"> <div class="iconfont header-back"></div> </router-link> 城市选...

2020-03-24 17:21:10 148

原创 6.7.6旅游网站小项目练习之城市列表页搜索区组件代码

<template> <div class="search-wrapper"> <input type="text" class="search-input" placeholder="输入城市名或拼音"> </div></template><script>export defau...

2020-03-24 17:21:04 159

原创 6.7.7旅游网站小项目练习之城市列表页右侧字母表区组件代码

<template> <ul class="list"> <li class="item">A</li> <li class="item">B</li> <li class="item">C</li> <li class="item"...

2020-03-24 17:19:08 144

高亮img、pdf重点部分（html2canvas、pdfjs-dist、react-pdf）demo

Lingo3d，元宇宙展厅Demo

空空如也