逆魂夜-CSDN博客

原创 vue + elementUI使用本地图片处理方法

<el-image :preview-src-list="ImgList" :src="imgUrl"></el-image>单个图片处理let imgUrl = require('../../assets/img/commonImg/1.png'),多图片处理let ImgList = [ require('../../assets/img/commonImg/1.png'), require('../../assets/img/commonI..

2020-06-16 11:47:07 3275

原创关于微信小程序

1.下载微信开发者工具,并安装地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html2.登录并注册小程序账号3.新建小程序新手再写程序前,一定要看文档文档地址:https://developers.weixin.qq.com/miniprogram/introduction/index.ht...

2019-04-24 19:23:41 126

转载 JQuery基础动画操作

1.jQuery动画效果，隐藏和显示。两个方法：hide()“隐藏” show()“显示”<p>JQuery动画效果，隐藏和显示</p><input type="button" value="隐藏" id="button1"><input type="button" value="显示" id="button2"> <s...

2019-04-17 18:38:07 138

转载作用域和作用域链及预解析

个人分类： JS类变量---->局部变量和全局变量,作用域：在某个空间范围内，可以对数据进行读写操作局部作用域和全局作用域js中没有块级作用域—一对括号中定义的变量,这个变量可以在大括号外面使用函数中定义的变量是局部变量作用域链:变量的使用,从里向外,层层的搜索,搜索到了就可以直接使用了层层搜索,搜索到0级作用域的时候,如果还是没有找到这个变量,结果就是报错在 JavaScr...

2019-04-16 19:11:54 106

转载弹性布局说明及flex容器属性

一、弹性布局说明：a) 给元素设置了display:flex;后，就成为了弹性盒或者弹性布局b) 当父元素设置了flex后，子元素的float，clear和vertical-align将会失效c) 我们把设置display:flex;属性的元素称之为Flex容器，把里面的子元素称之为Flex项目d) 当给元素设置了display:flex;后，会产生两根轴线：主轴和交叉轴♥二、flex...

2019-04-15 19:01:09 421

转载 Vue.js使用filter自定义过滤器对时间进行格式化（javascript原生写法）

**一、自定义date.js**/** * 对Date的扩展，将 Date 转化为指定格式的String * 月(M)、日(d)、12小时(h)、24小时(H)、分(m)、秒(s)、周(E)、季度(q) 可以用 1-2 个占位符 * 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字) * eg: ...

2019-04-14 20:36:19 519

转载 Vue 全局变量，局部变量

全局组件和局部组件1.先定义组件 Vue.component(‘组件名’, { 组件模板对象 })注意: 组件名不要使用原生的标签名, 若组件名定义时用的是驼峰命名法, 则调用时用中划线分割后小写例如: 组件-->mtText 使用时--> <my-text></my-text>2.配置组件的模板...

2019-04-12 21:52:55 3262

原创 vue中使用路由嵌套

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body>//创建app<div id="app"> //登录和注册按钮 ...

2019-04-11 19:24:18 116

原创用vue写储存在localStorage中的评论列表

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css"...

2019-04-10 21:59:19 195

转载前端做一个简单的随机气泡（随机大小，随机颜色，随机方向，随机速度，透明度改变）的静态网页

话不多说直接代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } body { overflo...

2019-04-07 21:40:28 1515

转载原生JS回到顶部

HTML代码：<div class="container"> <p>你好哇</p> ...</div><div id="top">回到顶部</div>CSS代码：.container{ border: 1px solid black;}#top{ position: fixed; padding: ...

2019-04-04 08:58:37 453

原创计数器

Title + - * /

2019-04-03 09:09:49 102

转载自定义表格的添加行/删除行

自定义表格的添加行/删除行1、创建好表头，定义好列名，以及删除控件的列，添加行的按钮 <div class="row col-lg-12 col-md-12" style="margin-left:2px;"> <button id="addrow">添加行</button> <table class="table"; id="tab...

2019-04-02 09:10:29 318

转载 JavaScript中的函数、对象

JS中的函数声明方式方式一function 函数名（）{函数体}方式二var 函数名=function(){函数体}方式三var 函数名=new Function(“函数体”)；执行方式函数名();JS中的对象类似Java中的一些系统预设好的类日期对象function testDate(){ var date=new Date(); ...

2019-03-31 22:04:19 72

原创 jQuery学习笔记

jQuery学习笔记（一）基本选择器名称用法描述ID选择器$(“#id”);获取指定ID的元素类选择器$(“.class”);获取同一类class的元素标签选择器$(“div”);获取同一类标签的所有元素并集选择器$(“div,p,li”);使用逗号分隔，只要符合条件之一就可。交集选择器$(“div.redClass”);获取c...

2019-03-29 20:41:22 83

转载 JS和jQuery的区别

一、本质上的区别1.JavaScript 是通过标签插入到HTML页面，可由所有的现代浏览器执行的一种轻量级的编程语言。2.JQuery是一个JavaScript函数库。或者说是JavaScript。使用JQuery首先要在 HTML 代码最前面加上对 jQuery 库的引用，比如：库文件既可以放在本地，也可以直接使用知名公司的 CDN，好处是这些大公司的 CDN 比较流行，用户访问你网站...

2019-03-28 21:19:09 213

转载【Web前端】CSS使用方法

*本文主要介绍CSS的基础语法，以及插入到HTML中的方法，供遗忘时快速查阅。（本文内容结合W3C教程编写）CSS基础语法CSS规则由选择器和声明组成选择器是要改变样式的HTML元素，也可以是表示多个元素的id或class；声明是要改变的属性和属性值，以冒号隔开；声明之间用分号隔开h1 {color:red; font-size:14px;} /改变h1元素的样式/.di...

2019-03-27 21:46:26 215

原创 ajax的原理

其原理: 通过XmlHttpRquest对象来向服务器发送异步请求的,从而从服务器中获得数据后,然后用js来操作DOM来更新页面简单来说: 用于后台与服务器交互数据,这就能实现可以在不重新加载整个网页的情况下,对网页的部分进行更新ajax的核心: 就是js对象 XmlHttpRequest特点: 异步加载, 局部更新ajax给我们带来的好处: 1.页面无刷新, 在页面与服务器通信时,...

2019-03-25 19:23:51 97

原创在HTML中监听网络是否连接

//查看当前网络状态console.log(window.navigator.onLine);//监听网络是否连接window.addEventListener('online',function () { console.log('111'); $('body').text("网络已连接").fadeIn(1000).delay(1000).fadeOut(1000);...

2019-03-24 22:17:41 605

原创绘制饼状图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><canvas width="600px" height="400px" style...

2019-03-18 21:24:16 159

原创滚动监听

引用bootstrap<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">调用滚动监听 data-spy="scroll"<body data-spy="scroll" data-target="#navbar-examp

2019-03-14 21:24:48 121

原创有关touch的一点内容

1.touch是移动端的触摸事件,是一组事件touchstart 当手指触摸屏幕的时候触发touchmove 当手指来回滑动的时候触发touchend 当手指离开屏幕的时候触发touchcancel 当被迫中止滑动的时候触发(来电, 弹消息)使用touch : 绑定事件 box.addEventListener(“touchstart”,function(){})事件对象 1....

2019-03-13 21:00:31 101

原创在canvas中画钟

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><canvas wi

2019-03-11 18:50:38 121

原创学习c3h5

使用画布 canvas1:创建画布<canvas width="500" height="500" style="border: 1px solid #eeeeee"></canvas>2:在script中获取画布var ctx = document.querySelector('canvas').getContext('2d');3:作画如:画圆 ...

2019-03-10 19:55:48 521

原创 canvas中的方块

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><canvas wi

2019-03-06 19:26:51 310

原创视屏标签

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><video src

2019-03-03 19:46:46 96

原创学习c3和h5第二天

animation:动画名称动画时间运动曲线何时开始播放次数是否反方向animation-iteration-count:infinite; 无限循环播放animation-play-state:paused; 暂停动画"@keyframes 动画名称 {from{ 开始位置 } 0%to{ 结束 } 100%}justify-content调整主轴对齐...

2019-02-28 20:48:35 95

原创学习c3和h5第一天

E::first-letter文本的第一个单词或字（如中文、日文、韩文等）E::first-line 文本第一行；E::selection 可改变选中文本的样式；E::before和E::after 在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用translate 移动平移的意思translate(x,y)水平方向和垂直方向同时移动（也就...

2019-02-26 19:21:31 125

原创学习jQuery第六天

什么是ajax? 用来做数据交互使用的其原理: 通过XmlHttpRquest对象来向服务器发送异步请求的,从而从服务器中获得数据后,然后用js来操作DOM来更新页面简单来说: 用于后台与服务器交互数据,这就能实现可以在不重新加载整个网页的情况下,对网页的部分进行更新ajax的核心: 就是js对象 XmlHttpRequest特点: 异步加载, 局部更新异步: 一次一堆, 前一个...

2019-02-25 18:30:52 63

原创学习jQuery第五天

今天做一个简单的小游戏部分js代码设置随机颜色 function colors() { var r = Math.floor(Math.random() * 255); var g = Math.floor(Math.random() * 255); var b = Math.floor(Math.random() * 255); ...

2019-02-24 19:56:19 89

原创学习jQuery第四天

一个手风琴案例的简单js封装$.fn.accordion = function (width) { //接受width,没有穿width默认为50 width = width || 50; //在后代中找li var $li = this.find("li"); //本身的宽 var Length=this.width() //鼠标移上去获得的最...

2019-02-21 19:16:34 106

原创学习jQuery第三天

通过js和jQuery分别写评星的代码js部分:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style>

2019-02-20 19:16:32 66

原创学习jQuery第二天

一个简单的弹幕代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> html, body {

2019-02-19 20:42:31 81

原创学习jQuery第一天

js和jQuery的关系: jq是js的一个库为什么要学习jQuery? —>简单粗暴,没有兼容性问题入口函数 $(function(){}) 全写: $(document).ready(function{})js与jq对象的区别1.方法不能互相调用2.可以转换 js–>jq: 给钱就行 jq–>js: jq对象[索引] .get(索引)选择器: 类...

2019-02-18 18:37:05 112

原创学习js高级第五天

今天学习正则表达式身份证的表达式 18位[1-9][0-9]{16}|[0-9X]座机号的表达式0716-12345670716-12345678027-1234567[0][1-9]{2,3}[-][0-9]{7,8}QQ号的正则表达式 5位-10位[1-9][0-9]{4-9}手机号码的正则表达式130-139150-159170 171 173 177180-1...

2019-01-23 21:10:32 106

原创学习js高级第四天

表格排序:因为不知道怎么循环添加不同的td中的不同内容,边写的很麻烦代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>对自己狠点</title> <style&am

2019-01-22 19:29:29 91

原创学习js高级第三天

今天学习原型、原型链和继承原型链: 就是实例对象和原型对象之间的关系, 是通过__proto__原型来联系的实例对象中有__proto__原型构造函数中有prototype原型prototype对象中也有__proto__原型, 指向了哪里—>系统的构造函数 Object继承: 继承是一种关系, 值的是类与类之间的关系, 但js中没有类,有构造函数模拟类,通过原型来实现继承.继承也...

2019-01-21 19:27:49 85

原创学习js高级第二天

今天学习贪吃蛇代码(优化后的,但还有bug):<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #

2019-01-20 19:00:05 114

原创学习js高级第一天

贪吃蛇(上) &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&

2019-01-17 18:17:46 119

原创学习webAP第七天

client可视区域clientWidth: 可视区域的宽度(没有边框)clientHeight: 可视区域的高度(没有边框)clientLeft: 左边边框的宽度clientTop: 上边边框的宽度clientX: 离窗口左边的距离clientY: 离窗口上边的距离event事件: 谷歌和火狐支持window.event: 谷歌和ie8支持document.on...

2019-01-16 19:30:13 245

空空如也

空空如也