前端
HTML5+CSS3+JavaScript
苦涩2020
这个作者很懒,什么都没留下…
展开
-
Vuejs 组件
组件的基本使用 2.0版本以前<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vuejs</title> <script src="js/vue.js"></script></head><body><div id='app'> <!-- 3.原创 2020-09-12 23:53:47 · 236 阅读 · 0 评论 -
Vuejs 过滤器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vuejs</title> <script src="js/vue.js"></script></head><body><div id="app"> <p>{{ 7000 | guoLv}原创 2020-08-31 04:07:34 · 206 阅读 · 0 评论 -
Vuejs 条件判断
v-if 使用<div id='app'> <h2 v-if="true"> {{message}} <div>aaa</div> <div>bbb</div> </h2></div><script> const app = new Vue({ el: '#app', data: { message: 'hello', .原创 2020-08-30 19:56:06 · 319 阅读 · 0 评论 -
Vuejs 事件监听
在前端开发中,我们需要经常和用户交互,这个时候,我们就必须监听用户发生的事件,比如点击、拖拽、键盘事件等等v-on 基础<div id='app'> <h2>{{counter}}</h2> <button v-on:click="add">+</button> <!-- v-on语法糖写法 @ --> <button @click="sub">-</button></div>原创 2020-08-30 19:30:47 · 355 阅读 · 0 评论 -
JavaScript let、const与var的区别
ES5中的var是没有块级作用域的(if/for)ES5中的let是有块级作用域的(if/for)ES5之前因为if和for都没有块级作用域的概念,所以在很多时候,我们都必须借助于function的作用域来解决外面变量的问题(闭包)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vuejs</title> <s原创 2020-08-30 15:44:47 · 202 阅读 · 0 评论 -
Vuejs 计算属性
基本使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vuejs</title> <script src="js/vue.js"></script></head><body><div id='app'> <h2>{{firstName.原创 2020-08-30 09:57:11 · 271 阅读 · 0 评论 -
Vuejs 动态绑定属性
v-bind 基础用法<div id='app'> <!-- 错误做法,mustache只能用在content中 --> <img src="{{imgURL}}"> <img src="imgURL"> <!-- 正确做法,使用v-bind指令 --> <img v-bind:src="imgURL"> <!-- 语法糖:简写 --> <img :src="imgURL".原创 2020-08-30 00:02:02 · 395 阅读 · 0 评论 -
Vuejs 插值操作
mustache语法<div id='app'> <h2>{{message}}</h2> <h2>{{message}}, 苦涩!</h2> <!-- mustache语法中,不仅仅可以直接写变量,也可以写简单的表达式 --> <h2>{{firstName + ' ' + lastName}}</h2> <h2>{{firstName}} {{lastName}}&l.原创 2020-08-29 16:23:13 · 163 阅读 · 0 评论 -
Vuejs 初体验
Hello Vuejs<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vuejs</title> <script src="js/vue.js"></script></head><body> <div id="app">{{message}} .原创 2020-08-29 09:46:05 · 91 阅读 · 0 评论 -
JavaScript Swiper插件
Swiper开发文档一款免费以及轻量级的移动设备触控滑块的js框架初始化Swiper实例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="./swiper.min.css"> <script src="./j.原创 2020-07-10 09:52:13 · 646 阅读 · 1 评论 -
JavaScript doT模板引擎
doT模板引擎js模板引擎,它的大小只有4KB,渲染性能很好,而且直接支持原生的写法,不用依赖别的库doT模板引擎使用流程<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <script src="./js/doT.min.js"></script> <.原创 2020-07-09 08:39:15 · 561 阅读 · 0 评论 -
JavaScript 音频插件和图表插件
howler音频插件配置项及事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <script src="./js/howler.min.js"></script></head><body> <script> .原创 2020-07-08 00:17:10 · 585 阅读 · 0 评论 -
HTML5 canvas组件
canvas简介canvas标签是用来绘制图像的canvas本身没有绘画的能力,仅仅是图形的容器,相当于一块画板必须要使用脚本完成绘制,JScanvas绘画<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #can.原创 2020-07-06 09:35:59 · 1439 阅读 · 0 评论 -
JavaScript 本地存储
本地存储简介在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的web 应用程序能够在用户浏览器中对数据进行本地的存储解决了cookie存储空间不足的问题(cookie的存储空间为4K)localStorage中一般浏览器支持的是5M大小,相当于一个5M大小的针对于前端页面的数据库HTML5本地存储优于cookie本地存储提供了两个在客户端存储数据的对象localStorage:永久存储,存储没有截止日期的数据sessionStorage.原创 2020-07-04 12:58:29 · 290 阅读 · 0 评论 -
基于jQuery实现幻灯片切换效果
效果图功能:1、幻灯片自动切换;2、点击下方小圆点切换对应幻灯片;3、点击左右两侧耳朵控制幻灯片切换至上一张或下一张;4、鼠标悬停幻灯片上时,幻灯片停止切换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>标题</title> <link rel="stylesheet" href="../css/res.原创 2020-07-02 11:28:32 · 709 阅读 · 0 评论 -
基于jQuery实现自动或点击切换效果
效果图功能:元素自动切换,当点击下方小圆点时,控制上方元素同步切换方法:主要是定义一个全局变量,通过自增变化来控制自动切换效果,其中当自身显示时,兄弟元素隐藏;给小圆点添加单击事件,当点击时,传递自身对象给单击切换函数,通过对象获取点击对象的下标值,从而切换元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>标题</.原创 2020-07-01 23:16:52 · 1044 阅读 · 0 评论 -
基于jQuery实现水平轮播效果
效果图方法:使用动画效果,让第一幅图的宽度逐渐变为0px,然后将第一幅图添加至父元素末尾<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>标题</title> <link rel="stylesheet" href="../css/reset.css"> <script src="./.原创 2020-07-01 22:18:53 · 383 阅读 · 1 评论 -
基于jQuery实现垂直轮播效果
效果图方法:使用定时器让元素不断替换及高度变化<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>标题</title> <link rel="stylesheet" href="../css/reset.css"> <script src="./jquery-3.4.1.min.js"&.原创 2020-07-01 16:58:13 · 648 阅读 · 0 评论 -
jQuery DOM操作
jQuery中文开发文档DOM操作是jQuery核心内容之一,在前端开发时,我们往往需要在页面某个地方添加元素或删除元素,这种添加元素、删除元素的操作就是通过DOM操作来实现的插入节点$(selector).append(content):向元素内部最后插入内容$(content).appendTo(selector):把元素插入到指定的元素内部最后$(selector).prepend(content):向元素内部最前插入内容$(content).prependTo(.原创 2020-06-29 13:07:52 · 167 阅读 · 0 评论 -
jQuery 选择器和筛选
基本选择器在CSS中使用的选择器,在jQuery中同样可以使用,而且不用做循环<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>标题</title> <script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script> <scr.原创 2020-06-26 09:52:01 · 379 阅读 · 0 评论 -
JavaScript Document对象DOM
Document对象 DOM描述每个载入浏览器的HTML文档都会成为Document对象Document对象使我们可以从脚本中对HTML页面中的所有元素进行访问Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问。当浏览器打开一个HTML文档时,浏览器解析HTML文档的标签,并创建表示这些标签的对象,这些对象就是HTML文档对象文档对象即Document对象,指的是一回事HTML DOM 模型被构造为对象的树JavaSc.原创 2020-06-23 00:10:17 · 226 阅读 · 0 评论 -
JavaScript 浏览器对象BOM
浏览器对象 BOMBOM是browser Object Model的缩写,简称浏览器对象模型BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性基本的BOM体系结构图BOM提供了一些访问窗口对象的一些方法,我们可以用它来移动窗口位置、改变窗口大小、打开新窗口或关闭窗口、弹出对话框、进行导航以及获取客户的一些信息,如:浏览器品牌版本,屏幕分辨率等。但BOM最强大的功能是它提供了一个访问HTML页面的接口------document对象,以使得我们可以通过这个口接口来使用DOM的强大.原创 2020-06-22 18:10:33 · 218 阅读 · 0 评论 -
JavaScript 时间、数字、字符串方法
创建时间对象Date是JavaScript的内置对象,系统在Date对象中封装了与日期和时间相关的属性和方法Date使用UTC1970年1月1日开始经过的毫秒数来存储时间GMT 格林尼治时间UTC 国际协调时间创建时间对象1、创建当前的时间对象var myDate = new Date();alert(myDate);2、使用参数创建时间对象(年,月,日,时,分,秒,毫秒)var myDate2 = new Date(2019, 10, 1, 9, 10, 40, 50.原创 2020-06-22 17:10:07 · 391 阅读 · 0 评论 -
基于JavaScript实现放大镜效果
基于JavaScript实现放大镜效果描述:右侧图片必须是左侧图片的倍数大,主要是获取鼠标相对与被触发元素的坐标位置,再通过位置定位实现效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>放大镜效果</title> <style type="text/css"> *{ .原创 2020-06-21 23:17:11 · 301 阅读 · 0 评论 -
JavaScript 获取元素及事件
使用ID获取元素对象document.getElementById( “ID” );:返回文档中一个指定ID的元素对象,用于精确获取;若找到则返回该元素对象,否则返回null获取或设置元素内容innerText方法元素对象.innerText = “文本”:返回或设置标签内的文本值,不包含HTML标签<div id="zxw">id选择器</div><script> var zxw = document.getElementById("zxw.原创 2020-06-19 17:23:33 · 2120 阅读 · 0 评论 -
JavaScript 数组和对象
数组数组:一组数据的集合,数组的每一个数据叫做一个元素数组元素可以是任何类型,同一个数组中的不同元素可能是对象或数组每个数组都具有一个length属性,通过该属性可以获取数组长度,并且可以给一个数组length赋值定义长度数组中每个元素在数组中有一个位置,以数字表示,称为索引(下标)索引从0开始排列,[0]表示第一个数据,以此类推数组的数据类型是一个对象,其实就是个加了数字索引和length属性的特殊对象创建数组方式隐式方式 var arr = ["梨.原创 2020-06-17 18:17:11 · 494 阅读 · 0 评论 -
JavaScript 条件语句和循环语句
if条件语句主要用于范围值的判断语法:1、条件成立时执行,条件不成立时什么也不做if(条件){条件成立时要执行的代码};2、条件成立时执行,执行if内的代码,条件不成立时,执行else内的代码if(条件){条件成立时要执行的代码}else{条件不成立时要执行的代码};3、多条件判断语句if(条件1){条件1成立时要执行的代码}else if(条件2){条件2成立时要执行的代码}else{条件不成立时要执行的代码};switch条件语句主要用于.原创 2020-06-15 18:35:25 · 283 阅读 · 0 评论 -
JavaScript 运算符
算术运算符算术运算符加减乘除:+ 、 - 、 * 、 /取余运算符:%正负运算符:+ 、 -自增自减运算符:++ 、 –a、++在后,先运算,后自增b、++在前,先自增,后运算c、一般将自增语句单独写一行,自增后再使用字符串运算符+ :如果+号一侧是字符串,表示连接,并不是加法运算除了加法以外,纯数字字符串可以进行算术运算如果存在纯数字字符串(如:“5”),计算机自动将其转为数字型进行运算;只要有一侧为非数字字符串,结果为NaN(非数字类型) var .原创 2020-06-15 11:04:45 · 130 阅读 · 0 评论 -
JavaScript 变量及数据类型
变量声明常量常量是始终不能被改变的数据。比如:数字123可以是常量,字符串“hello”也是一个常量常量通常用来表示固定不变的量,比如圆周率,万有引力常量变量从字面上看,变量是可变的量;从编程角度讲,变量是用于存储数据的容器使用关键字var来声明变量;使用等号“=”向变量赋值;可以在声明变量时对其赋值,也可以先声明后赋值<!DOCTYPE html><html lang="en"><head> <meta charset="UT.原创 2020-06-14 20:40:06 · 273 阅读 · 0 评论 -
CSS3 移动端开发技巧
媒体查询初始@media:媒体查询;可以针对不同的媒体类型定义不同的样式only:指定某种特定的媒体类型,可以用来排除不支持媒体查询的浏览器screen:用于电脑屏幕,平板电脑,智能手机等<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>标题</title> <link rel="stylesheet".原创 2020-06-10 11:43:29 · 189 阅读 · 0 评论 -
基于CSS3实现水平轮播效果
效果图方法:使用动画实现功能;鼠标悬停可以实现暂停<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>标题</title> <link rel="stylesheet" href="../css/reset.css"> <style type="text/css"> .原创 2020-06-01 11:48:38 · 349 阅读 · 0 评论 -
基于CSS3实现垂直轮播效果
效果图方法:使用动画<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>标题</title> <link rel="stylesheet" href="../css/reset.css"> <style type="text/css"> .box{ .原创 2020-05-31 23:47:18 · 1624 阅读 · 0 评论 -
基于CSS3实现闪光条效果
效果图方法一:使用转换中的倾斜转换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>标题</title> <link rel="stylesheet" href="../css/reset.css"> <style type="text/css"> .box{ .原创 2020-05-31 23:28:24 · 561 阅读 · 0 评论 -
基于CSS3实现元素宽度向两侧延伸
效果图方法一:使用转换中的角度转换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>标题</title> <link rel="stylesheet" href="../css/reset.css"> <style type="text/css"> nav{ .原创 2020-05-31 22:09:39 · 1375 阅读 · 0 评论 -
CSS3 转换
2D位移转换参考点(基点)在元素的中心点相对自身参考点进行位移位移设置成百分比后,是自身元素尺寸的百分比,元素的尺寸是否固定不会影响百分比的计算 transform: translateX(-150px); X轴:正往右,负往左transform: translateY(150px); Y轴:正往下,负往上transform: translate(100px, 100px); 2D位移简写,值1是X轴,值2是Y轴<!DOCTYPE html><html lang=".原创 2020-05-31 13:50:27 · 529 阅读 · 0 评论 -
CSS3 过渡和动画
过渡初识过渡:元素从一种样式变换为另一种样式时为元素添加的效果必须要触发一个事件才能实现过渡<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>标题</title> <link rel="stylesheet" href="../css/reset.css"> <style type=".原创 2020-05-30 23:51:41 · 254 阅读 · 0 评论 -
CSS3 渐变
线性渐变渐变分成线性渐变和径向渐变两种线性渐变的两大要素渐变方向,结束方向;默认从上向下渐变的起始色和终止色,至少两种;可以使用合法的颜色值线性渐变语法:background: linear-gradient(to bottom, red, blue);<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>标题</titl.原创 2020-05-29 23:25:54 · 192 阅读 · 0 评论 -
CSS3 元素居中
元素水平居中text-align: center;:设置行内元素、行内块级元素水平居中margin: 0 auto;:设置块级元素水平居中行高垂直居中法适用于单行,有父元素有固定高度line-height: 300px;:设置行内元素和行内块级元素垂直居中内、外边距居中法适用于父元素有固定高度方法一:内边距法(设置给父元素)水平居中:设置左内边距=(父元素宽度-自元素宽度)/ 2垂直居中:设置上内边距=(父元素高度-自元素高度)/ 2方法二:外边距法(设置给子元素;.原创 2020-05-28 23:36:19 · 225 阅读 · 0 评论 -
CSS3 弹性盒子模型
弹性盒子:flex布局弹性盒子是一种布局方式特点:改变元素的排列方式采用flex布局的元素:称为flex容器,简称“容器”。它的所有子元素自动成为容器成员,成为flex项目(简称“项目”)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>标题</title> <link rel="stylesheet".原创 2020-05-28 14:13:11 · 227 阅读 · 0 评论 -
CSS3 矢量图标及背景精灵
矢量图标浅解矢量图:根据几何特性来绘制图形。它的特点是放大后图像不会是真,和分辨率无关位图:是由称作像素(图片像素)的单个点组成的,放大后,会变成马赛克矢量图标引用矢量图标和字体的用法一样font-class 引用font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。与 Unicode 使用方式相比,具有如下特点:兼容性良好,支持 IE8+,及所有现代浏览器。相比于 Unicode 语意明确,书写更直观。可以.原创 2020-05-27 21:01:35 · 549 阅读 · 0 评论