甘乐2333-CSDN博客

原创文本省略

p{ overflow:hidden; text-overflow:ellipsis; display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。 -webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式） -webkit-line-clamp:2; //这个属性不是css的规范属性，需要组合上...

2019-08-05 10:00:08 177

原创封装axios连接

import axios from "axios";import qs from "qs"import loading from "../lib/loading/index.js"let vm = loading()const server = axios.create({ // baseURL:"", timeout:5000, withCredentia...

2019-08-03 21:50:44 216

原创 JS实现拖拽不出浏览器距边50px吸附

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>拖拽</title> <style> html,body{ margin: 0; pa...

2019-08-03 16:57:36 465 1

转载 Vue.config常用配置项

只需要在项目的根目录下新建 vue.config.js 文件（是根目录，不是src目录）const path = require('path')module.exports = { publicPath: './', // 基本路径 outputDir: 'dist', // 输出文件目录 lintOnSave: false, // eslint-loader 是...

2019-08-02 08:03:35 557

原创封装 $on $emit $off

const eventList = {}const $on = (eventName,callback)=>{ if(!eventList[eventName]){ eventList[eventName] = []; } eventList[eventName].push(callback)}const $emit = (eventNam...

2019-07-26 15:44:41 140

原创寄生式组合继承

function Box(_f){ this.f=_f; } // 这样直接将原型指向一个对象,会将原有的constructor覆盖 Box.prototype={ a:1, b:function(){ this.a++; ...

2019-07-02 19:46:16 163

原创 JQuery 五星评价

//星级图片为雪碧图，上为满星，下为空星，每个星高14px<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g...

2019-06-25 23:34:40 148

原创 JS node通信

// 获取http模块var http=require("http");// 获取queryString模块var queryString=require("querystring");// 使用http中createServer创建服务,并且返回这个服务对象var server=http.createServer(function(req,res){ // req是指请求数据...

2019-06-21 12:02:34 163

原创 JS Promise实现红绿灯显示

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...

2019-06-19 19:25:29 781

原创 JS 可切换图片的商品放大镜

//Utils.jsvar Utils=(function () { return { //SSS loadImg:function (srcList,callBack) { var img=new Image(); img.num=0; img.imgList=[]; ...

2019-06-13 11:48:21 451

原创 JS 商品放大镜

//Utils1.jsvar Utils=(function () { return { //SSS loadImg:function (srcList,callBack) { var img=new Image(); img.num=0; img.imgList=[]; ...

2019-06-11 21:24:53 226

原创 JS 懒加载瀑布流

//Util1.jsvar Utils=(function () { return { //SSS loadImg:function (srcList,callBack) { var img=new Image(); img.num=0; img.imgList=[]; ...

2019-06-11 20:42:38 510

原创 JS无缝轮播图

//Utils.js//封装预加载图片var Utils=(function () { return { //SSS loadImg:function (srcList,callBack) {//图片地址回调函数 var img=new Image(); img.num=0;//初始化num为0 ...

2019-06-11 19:38:27 544

原创 JS 弹跳球2.0

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style type="text/css"> body { overflow...

2019-06-10 21:50:04 357 1

原创 JS 弹跳球体

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <script> class Ball{// ...

2019-06-10 20:24:41 643

原创 JS 判断输入数字是否为1-31之间的数

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .redFont { color: red; ...

2019-06-09 14:10:26 1951

原创 JS div键盘控制移动

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 50px; ...

2019-06-04 11:40:21 185

原创 JS input输入节流

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> input { color: #999999; ...

2019-06-04 11:37:48 2170

原创 JS 窗口图片滑动

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 557px; ...

2019-06-04 11:33:28 368

原创 JS 拖拽

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 50px; ...

2019-06-03 23:26:06 133

转载 JS 图片局部放大

前提：感谢松妹，感谢松妹，感谢松妹<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .small { wi...

2019-06-03 21:41:56 1445

原创 JS 三级目录

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <script> var list=[ ...

2019-06-03 19:35:41 961 1

原创 JS input中鼠标选中英文转大写

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><input type="text" name="user" id="user"/...

2019-06-03 17:52:55 241

原创 JS 三种轮播图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; }...

2019-06-01 21:52:19 309

原创 JS 倒计时

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="div0"></div> <sc...

2019-05-31 10:24:56 77

原创 JS Date英文转中文显示

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="div0"></div> <script type="text/...

2019-05-31 10:23:49 1498

转载 JS 实现点击div换颜色

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #div0{ width: 100px; ...

2019-05-29 22:18:16 4313

原创 JS 数组遍历

1、foreach变量概念 var arr=[1,3,5,7,9]; //数组的元素,当前下标,数组自身 arr.forEach(function (item,index,arr) { console.log(item,index,arr); })2、foreach求和 var arr=[1,3,5,7...

2019-05-28 20:24:07 2283

原创 JS 全选选择

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <input type="checkbox" name="hobby" i...

2019-05-28 19:48:30 213

原创 JS 实现随机点名

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 100%; hei...

2019-05-28 19:38:13 514

原创 JS 数组[1,3,5,2,3,5,4,6,2,3,5,2,5,3],去重

//Plan1 var arr = [1, 3, 5, 2, 3, 5, 4, 6, 2, 3, 5, 2, 5, 3]; var arr1 = []; for(var i = 0; i < arr.length; i++) { var bool = true; console.log(arr[i]); for(var j ...

2019-05-28 16:20:11 2102

原创 JS 随机生成一个五位以内的数，然后输出该数共有多少位，每位分别是什么

function randomNum() { var num=parseInt(Math.random()*10000); var a1=num%10; if(num<10) return [a1]; var a2=parseInt((num%100)/10); if(...

2019-05-28 14:38:15 3843

原创 JS 数组

1.数组基础字面量定义数组 var arr=[];//空数组,这个数组中没有任何元素 var arr1=[1,2,3];//定义数组,有3个元素,分别是1,2,3,用逗号区分数组的元素构造函数定义，实例化数组: 数组和对象一样都是引用类型，存储到堆中 var arr=new Array(1,2,3,4,5,6);//建立10个空元...

2019-05-27 20:41:45 143

原创 JS Day2 数据类型转换和运算

1.数据类型转换 parseInt()-将字符串转化为整型 parseFloat()—将字符串转化为浮点数 String()函数能够将任何类型的值转换为字符串。 Boolean()，将一个值转换为其对应的Boolean值。对象型不能强转字符串字符串中有字符,undefined,对象强转数值后都是NaN；false,null.""强转数值为0 使用Num...

2019-05-21 20:37:48 174

原创 JS Day1 数据基础

1.javascript引入及写法1）内部书写1. 位于 head 部分的脚本：当你把脚本放置到 head 部分后，必须等到全部的javascript代码都被下载、解析和执行完成后，才能开始呈现页面的内容（浏览器在遇到body标签才开始呈现内容）。2. 位于 body 部分的脚本：为了避免上述问题，现代web应用程序一般把javascript引用放在body中，放在页面内容后面。...

2019-05-20 17:51:58 89

原创 Day16 CSS3 3D

1、 3D位移在CSS3中3D位移主要包括两种函数translateZ()和translate3d()。translate3d()函数使一个元素在三维空间移动。语法：translate3d(tx,ty,tz)tx：代表横向坐标位移向量的长度；ty：代表纵向坐标位移向量的长度；tz：代表Z轴位移向量的长度。此值不能是一个百分比值，如果取值为百分比值，将会认为无效值。语法：tr...

2019-05-17 15:47:02 200

原创 Day15 CSS3渐变及2D转换

一.CSS3 渐变1、线性渐变语法：background: linear-gradient(direction, color-stop1, color-stop2, ...);说明：direction：默认为to bottom，即从上向下的渐变；stop：颜色的分布位置，默认均匀分布，例如有3个颜色，各个颜色的stop均为33.33%。示例1：to left、top rig...

2019-05-16 22:01:16 150

原创 Day14移动端布局

1.rem是什么?rem(font size of the root element)是指相对于根元素的字体大小的单位。2.为什么web app要使用rem？实现强大的屏幕适配布局(淘宝,腾讯,网易等网站都是rem布局适配)rem能等比例适配所有屏幕,根据变化html的字体大小来控制rem的大小。3 vw vhvw：viewpoint width，视窗宽度，1vw等于视窗宽度的...

2019-05-16 21:17:19 165

原创 Day13 媒体查询

1.准备工作：设置Meta标签<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum- scale=1.0,minimum-scale=1.0, user-scalable=no">这段代码的几个参数解释：width = device-width：宽度等于当前设备的宽度i...

2019-05-16 21:05:54 103

原创 Day12CSS选择器和属性

1.属性选择器1、E[attr]：只使用属性名，但没有确定任何属性值；2、E[attr="value"]：指定属性名，并指定了该属性的属性值；空格都不行3、E[attr~="value"]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写4、E[attr^="value"]：指定了属性名，并且有属性值...

2019-05-13 20:30:21 211

空空如也

空空如也