mumu42的博客

原创 如何实现瀑布流布局？

在小编刚入行的时候，参考着度娘里的答案，用js实现过一次瀑布流布局。所以在接到瀑布流布局的设计稿时，第一反应就是利用js实现。## js实现大概思路是：### css- 1. 瀑布流容器设置绝对定位，然后给所有子元素设置相对定位。- 2. 通过ajax请求拿到数据，并渲染到页面上```javascript div class="waterfall-list-container" > <div class="item-container" > &...

原创 canvas合成图（js）

// 图片路径const data = ['./components/invite-poster.jpg', './components/feedback.jpg']let base64 = []window.onresize = () =&gt; {window.location.reload()} draw(() =&gt; {$('.poster-box')....

原创 jquery ui(datepicker快速使用)

一、准备下载需要的jquery_ui.js&amp;jquery_ui.css下载需要的jquery.js建立html文件引入相关的js、css文件添加input标签，并设置相关属性二、API（常用）属性1、dateFormat（设置日期格式：默认（dd-mm-yy））设置：$('.inputClassName').datepicker({dateFormat:'yy-mm-dd'})或者$('....

原创 类走马灯效果轮播（jquery）

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; .proListSub {     width: 1190px;     margin: 0px auto;     po

原创 类走马灯缓动效果

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; .proListSub {     width: 1190px;     margin: 0px auto;     po

转载 轮播图2

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;    &lt;meta charset="UTF-8"&gt;    &lt;title&gt;Title&lt;/title&gt;    &lt;script type="text/javascript" src="sta

原创 mysql常用语句

查询：1)查询所有select * from 表名

原创 node连接mysql获取数据

// 开启服务器server.jsconst express = require('express')const router = require('./router.js')const cors = require('cors')const bodyParser = require('body-parser')let app = express()app.use(cors({  origin: ...

原创 Navicat for MySQL连接mysql建数据库

my——&gt;打开数据库——&gt;输入要打开的数据库的名称右键相应的操作名称，点击新建：比如新建表表——&gt;新建表

原创 Navicat for MySQL连接mysql1.2

首先要保证mysql是已经启动状态的，如果当前mysql为禁用状态则需要手动启动：计算机——&gt;管理——&gt;服务与应用程序——&gt;服务——&gt;mysql右键启用打开Navicat for MySQL：将相关信息填写完整点击连接测试，如果显示成功则证明操作成功。点击你连接成功的数据库，右键打开连接。出现下图情况，你就可以操作数据库了。...

原创 安装mysql1.1

原创 官网下载mysql1.0

进入官网select operating system选择你要下的版本Micrsoft windows默认当前版本

转载 js使用MD5加密

下载md5引入md5文件：&lt;script src="md5.js"&gt;&lt;/script&gt;&lt;script&gt;    var pwd=hex_md5("pwd_string");&lt;/script&gt;原文链接

转载 闭包的简单应用

for(var i=0;i&lt;5;i++){    setTimeout(function(){        console.log(i);    },i*1000);};输出结果：55555//异步问题（javascript是单线程语言，先同步任务，所有同步任务执行完毕再执行队列中的异步任务）for(var i=0;i&lt;5;i++){    (function(x){        ...

转载 前端开发常用代码片段

作者：WEBINGsegmentfault.com/a/1190000014700549一、预加载图像如果你的网页中需要使用大量初始不可见的（例如，悬停的）图像，那么可以预加载这些图像。二、检查图像是否加载有时为了继续脚本，你可能需要检查图像是否全部加载完毕。你也可以使用 ID 或 CLASS 替换&lt;img&gt; 标签来检查某个特定的图像是否被加载。三、自动修复破坏的图像逐个替换已经破坏的...

原创 input表单

input  type:date（选择日期，在选择日期的项目中可使用）color（颜色）hidden（不知道有什么实际用途）image（图片表单控件，点击默认提交。&lt;input type="image" src="img/a.jpg"/&gt;）text（文本输入框）password（密码）button（按钮，使用vue框架时，点击按钮最好使用button）checkbox（复选）radio...

转载 4种常见的内存泄漏问题

内存泄漏：不再被应用需要的内存，由于某种原因，没有被归还给操作系统或者进入可用内存池。一 全局变量JavaScript用一个有趣的方式管理未被声明的变量：对未声明的变量的引用在全局对象里创建一个新的变量。在浏览器的情况下，这个全局对象是window。换句话说：function foo(){    bar="acs";}等同于function foo(){    window.bar="acs";}...

转载 css实现鼠标移入移出动态效果

知识点：transform-origin兼容性：IE10以上原文链接&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; div {     position: absolute;

转载 js对数组的操作

一、新增1影响原数组arr.push()//返回新增之后的新数组,原数组arr被改变arr.ushift()//返回新增之后的新数组，原数组arr被改变2不影响原数组arr.concat("f")&lt;----&gt;arr.concat(['a','b','c'])//返回新数组，原数组arr不被改变[...arr,'f']//(展开操作符)返回新数组，原数组arr不被改变二、移除1影响原数组...

原创 vue生命周期

页面第一次进入，钩子的触发顺序created-&gt; mounted-&gt; activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated

原创 jq中ajax的使用

$.ajax({    url:url,    type:'get',    cache:true,//是否缓存，推荐使用。用于性能优化，减少http请求    data:{},    success(){},    error(){}});

原创 js操作cookie

以下内容属于个人理解，如有错误欢迎指正。cookie:为了辨别用户身份而进行的session跟踪存储在本地终端上的数据。cookie的工作原理：初次：服务器  —（写入信息）—&gt;  客户端以后：客户端  —（cookies）—&gt;  服务器服务器  —(HTML代码)—&gt;  客户端cookies信息：name:cookie名称value:对应cookie名称的值domain:可以访...

原创 根据name属性查找到相关的表单元素

html:&lt;form name="a"&gt;    &lt;input name="b"/&gt;&lt;/form&gt;js:console.log(document.a.b);结果：兼容性：无兼容性问题前提条件：必须是表单元素并且必须在form元素下

原创 watch检测路由

在父容器检测才会有效果：watch:{    $router(to,from){        console.log(to);        console.log(from);    }}在网上查看资料的时候，看到有一些说的这样写没有效果的，据说解决办法是写成‘$router’(to,from)就可以了。...

转载 js判断IE浏览器版本

原文：点击打开链接知识点：navigator.userAgent（包含浏览器信息的相关信息，包括浏览器内核）function IEVersion() {            var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串              var isIE = userAgent.indexOf("compatible"...

原创 css设置小于12像素的字体

css设置小于12像素字体：一、html{-webkit-text-size-adjust:none;//旧版本的webkit内核的浏览器是支持，新版的webkit内核的浏览器已经不再支持这个属性}二、.class{transform: scale(0.5);//并不是真的小于12像素，只是在原来的基础上进行缩小了}...

原创 js基础知识

//设置全局变量var $ = function (id) {     return document.getElementById(id); };$('idName');//获取元素内容1.元素.innerHTML2.元素.innerText//添加内容1.元素.innerHTML+="&lt;a&gt;a&lt;/a&gt;"；$("").htm...

原创 js页面刷新

 重新刷新window.location.reload() 关闭当前窗口 window.opener=null;window.open('about：blank','_self');window.close();

原创 日历（vue）

days.vue文件&lt;template&gt; &lt;div class="tourDaysBox" ref="dayBox"&gt; &lt;div class="visaDetailTop"&gt; &lt;p&gt; &lt;button class="btnBack" @click=&q

转载 日历(js)

源代码：&lt;!DOCTYPE html&gt; &lt;html&gt;  &lt;head&gt;   &lt;meta charset="UTF-8"&gt;   &lt;title&gt;&lt;/title&gt;   &lt;style type="text/css"&gt;    *{     margin: 0px;     padding

原创 电子签名（vue）

&lt;template&gt; &lt;div class="signatureBox"&gt; &lt;div class="visaDetailTop"&gt; &lt;p&gt; &lt;button class="btnBack" @click="backHome"&gt;&l

原创 电子签名(js)

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head &gt;    &lt;meta charset="utf-8"&gt;    &lt;title&gt;&lt;/title&gt;    &lt;style type="text/css"&gt;        #canvas {            border: t

转载 css基础

一、css精灵图：优点：减少网页的http请求，从而大大的提高页面的性能；CSS Sprites能减少图片的字节二、overflow参数：scroll：必会出现滚动条。auto：子元素内容大于父元素时出现滚动条。visible：溢出的内容出现在父元素之外。hidden：溢出隐藏。三、图片png是便携式网络图片（Portable Network Graphics）...

转载 浏览器全屏

HTML5提供了启动和退出浏览器全屏模式，但是麻烦的是，必须要事件来触发。某个元素全屏：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &amp

转载 javaScript反调试技巧（禁用输出、断点、计算时间差）

一、函数重定向禁用console.log原本的功能：console.log('ff');var f=function(){};window['console']['log']=f;console.log('hh');输出结果：ff或者改变本来的输入值：var c=window['console']['log'];var f=function(){ c('error')};window['conso...

原创 vue跨域

一、假如目标服务器端口是8080，我需要把vue的端口改成其他的比如8081。在config目录下打开index.js,把port的8080改成8081port: 8081数据请求，后台不允许跨域，所有需要修改配置在在config目录下打开index.js,添加以下代码dev: {  // Various Dev Server settings  host: 'localhost', // can...

原创 axios请求

post请求：axios.post("",{}).then((res)=&gt;{})get请求：axios.get("",{}).then((res)=&gt;{})跨域：axios.get('http://dev.xxxxxxxxxxxxxxx',{withCredentials:true}).then((res)=&gt;[})执行多个请求：function getUserAccount()...

转载 vue.js常用的事件修饰符

.stop.prevent.capture.self.once.enter.tab.delete (捕获 “删除” 和 “退格” 键).esc.space.up.down.left.right

转载 js常用求宽高度方法

"屏幕分辨率为："+screen.width+"*"+screen.height"屏幕可用大小："+screen.availWidth+"*"+screen.availHeight"网页可见区域宽："+document.body.clientWidth"网页可见区域高："+document.body.clientHeight"网页可见区域宽(包括边线的宽)："+docu

原创 图片尺寸处理技巧

宽相同：var imgs = $('img');for(var i = 0;i&lt;imgs.length;i++){var width  = $(imgs[i])[0].width;$(imgs[i])[0].height=$(imgs[i])[0].width*1/5;$(imgs[i])[0].width=width;}