- 博客(40)
- 收藏
- 关注
转载 vue地址栏直接输入路由无效问题
vue 项目只要不是静态页面,一般都会和官方的路由管理器 vue-router 一起使用。最近项目有一个需求,是在地址栏输入路由,跳转到对应路由组件,在开发环境中这样做是可以跳转的,但是项目打包后,通过地址栏跳转会报错。因为 vue 在页面上显示哪个组件是根据 vue-router 进行控制的,在地址栏上直接输入路由名称,并不能触发 vue-router 的规则,所以只能通过监听地址的改变...
2019-04-17 16:58:52
3996
转载 Vue应用
Vue项目1. npm/cnpm install vue-cli 1. 全局安装Vue脚手架工具,用于构建Vue项目,输入"vue"命令可检查是否成功2. vue init webpack vue_demo ==> 构建一个Vue项目 1. webpack:模板名称; vue_demo:项目名称,不能包含大写字母;3. cd vue_demo --> npm/cn...
2019-04-15 18:09:25
240
转载 mint-ui 时间选择插件
// main.js引入import MintUI from 'mint-ui';Vue.use(MintUI)// DatetimePicker<template> <div> <span @click="openPicker()">点击</span> <DatetimePicker ref="pic...
2019-04-14 21:42:54
578
转载 webpack由浅入深——(webpack优化配置)
webpack系列文章webpack由浅入深——(webpack基础配置)webpack由浅入深——(webpack优化配置)webpack由浅入深——(tapable)webpack由浅入深——(ast)webpack由浅入深——(webapck简易版)webpack由浅入深——(loader实现)webpack由浅入深——(plugin实现)开发优化开发时的优化主要在于减少w...
2019-04-12 08:52:06
350
原创 localStorage使用总结
一、什么是localStorage、sessionStorage在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。二、localStorage的优势与...
2019-04-10 15:46:27
247
原创 学习fullpage.js插件实现滚屏心得
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> ...
2019-04-07 20:39:23
537
1
转载 less的用法
一、在浏览器使用方法:1.下载less.js文件到本地。2.在页面中引入自己的.less文件。3.引入下载的less.js文件。 注意2、3步骤顺序,自己的文件要先引入。如果不想下载到本地,也可以使用cdn,即省略1、3步。下面是我的目录:注意:在本地打开时(也就是url地址开头为file或者有跨域访问的情况时)是会报错的,因为浏览器端使用less时是使用ajax来拉取的,如果...
2019-04-04 08:56:56
125
转载 详解rem布局-利用rem布局实现移动端高清显示
目录一、初探rem布局1.1 rem是什么?1.2 rem实现新闻字体“小中大”设置二、利用rem布局实现移动端高清显示一、初探rem布局1.1 rem是什么?rem是CSS3新增的一个相对单位(root em,根em)。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它...
2019-04-04 08:55:42
256
转载 jquery购物车
注意引入jquery.js文件:百度搜索jquery,点击进入找到jquery-3.2.1.min.js,引入自己的文件中。<script src="jquery-3.2.1.min.js"></script><script>// 六个触发事件地方// 全选 单选 删除 删除所有 加 减// 全选$("#selectAll").cli...
2019-03-31 22:48:09
290
原创 知识点-----组件化、模块化
1.1组件化 就是"基础库"或者“基础组件",意思是把代码重复的部分提炼出一个个组件供给功能使用。 使用:Dialog,各种自定义的UI控件、能在项目或者不同项目重复应用的代码等等。 目的:复用,解耦。 依赖:组件之间低依赖,比较独立。 架构定位:纵向分层(位于架构底层,被其他层所依赖)。1.2模块化 就是"业务框架"或者“业务模块",也可以理解为“框架”,意...
2019-03-29 22:24:01
236
转载 rem/em/响应式用法总结
Js动态设置rem来实现移动端字体的自适应 实际上讲了这么多,大家可能已经了解了rem的用法,但是还不了解如何利用rem去实现移动端的自适应。说到底,rem实现移动端自适应的原来在于它本身的特性,它可以始终根据根元素的字体大小去改变自己的值。目前各种常见手机的屏幕尺寸大小如下图所示:想实现手机端自适应,就是可以让页面的元素字体、间距、宽高等属性的属性值可以随着手机屏幕尺寸的变化而变化,接...
2019-03-29 08:43:51
153
转载 面试题
1、Doctype 作用? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义?(1)、<!DOCTYPE> 声明位于文档中的最前面,处于 标签之前。告知浏览器的解析器,用什么文档类型 规范来解析这个文档。(2)、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。(3)、在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工...
2019-03-27 22:55:00
87
原创 ScrollPic js——图片左右滚动插件(单一功能)
客观的讲,scrollpic.js的确是一个很好用的图文滚动插件,它不但可以左右控制无缝连续滚动,还可以兼容如此多的浏览器,真的是难能可贵。对于没有太多JS专业功底的网页生产者,这个插件用起来也不是很难,所以当你需要时就不妨大胆的用吧。插件的下载地址:ScrollPic.js使用方法:// 先加载ScrollPic.js插件后再执行以下语句window.onload = function(...
2019-03-25 19:33:35
580
原创 AJAX 基础
AJAX 基础AJAX 指异步 JavaScript 及 XML (Asynchronous JavaScript And XML )。AJAX 是一种在 2005 年由 Google 推广开来的编程模式。AJAX 不是一种新的编程语言,而是一种使用现有标准的新方法。通过 AJAX ,你可以创建更好、更快以及更友好的 WEB 应用程序。AJAX 基于 JavaScript 和 HTTP ...
2019-03-25 19:29:45
166
转载 响应式布局的实现方法和原理
昨天我在马海祥博客上跟大家详细的介绍过《什么是响应式网页设计?》,我觉的响应式网页设计不仅仅是一种趋势,还更是一个新的设计解决方案!它有助于解决不同的分辨率和设备(台式电脑,笔记本电脑,平板,手机)相关的设计问题。既然是设计的问题,这里就会涉及到很多层面的角色,包括交互设计师,视觉设计师,前端工程师,后台开发工程师。交互设计师,要满足各自不通分辨率和设备的页面布局展现方式。而视觉设计师,则要考虑...
2019-03-25 19:28:28
1520
原创 bootstrap插件手风琴
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link href="https://cdn.jsdelivr.net/npm/boo
2019-03-14 19:27:43
310
原创 c3h5笔记
浏览器前缀 浏览器前缀 浏览器 -webkit- Google Chrome, Safari, Android Browser -moz- Firefox -o- Opera ...
2019-02-28 19:41:01
986
原创 3d按钮练习
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>按钮练习</title> <style type="text/css"> .box{ width: 4
2019-02-27 18:01:10
119
原创 跨域的问题
/* * 为什么会出现跨域 跨域问题来源于JavaScript的同源策略,即只有 协议+主机名+端口号 (如存在)相同,则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源,不能访问和操作其他域下的资源。跨域问题是针对JS和ajax的,html本身没有跨域问题,比如a标签、script标签、甚至form标签(可以直接跨域发送数据并接收数据)等...
2019-02-25 18:28:27
351
原创 jquery小游戏
$(function () { //一:生成柱子 思路:设置柱子的宽度,一次性的创建柱子,并添加到盒子里 var wellWidth=100; var bgColor=Math.ceil(Math.random()*19+1);//区间 1-20 //封装柱子 function well() { $("body").removeClass...
2019-02-24 14:52:54
766
原创 封装的jquery手风琴插件
$.fn.accordion=function (colors,width) { //如果用户没有传参数,可以设置默认值 colors=colors||[]; width=width||20; //让当前的对象去找li var $li=this.find("li"); //渲染颜色 $li.each(function (index,ele)...
2019-02-21 19:25:48
95
原创 jquery方法小星星评分
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> ..
2019-02-20 19:13:05
143
原创 jquery弹幕
<!doctype html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> html, body {
2019-02-19 19:29:22
349
原创 jquery第一天总结
/** js和jquery的关系:jq是js的一个库** 为什么要学习jq? --》简单粗暴,没有兼容性问题* 版本 区别** 入口函数 (function())全写:(function(){}) 全写:(function())全写:(document).ready(function{})* js与jq对象的区别* 1.方法不能互相调用* 2.可以转化 js–&g...
2019-02-18 17:27:56
81
原创 HTML DOM selectedIndex 属性
定义和用法selectedIndex 属性可设置或返回下拉列表中被选选项的索引号。注释:若允许多重选择,则仅会返回第一个被选选项的索引号。语法selectObject.selectedIndex=number例子<html><head><script type="text/javascript">function getIndex() {...
2019-01-23 19:12:20
186
原创 js排序功能函数
function fn(attr) { return function getSort(a,b) { if (a[attr]>b[attr]){ return 1; } else if(a[attr]==b[attr]){ return 0; ...
2019-01-22 23:19:21
300
原创 淘宝购物车js代码
function my$(id){ return document.getElementById(id);}function myName(className) { return document.getElementsByClassName(className)}var cheAll=my$("j_cbAll");var check=myName("xuan") ...
2019-01-22 00:06:27
4398
转载 js实现购物车类似功能
ShoppingCart 购物车这个前端Deom中的很多功能是使用js脚本实现的。 具体效果有:1.可以全选,全不选商品。2.选中的商品,点击下面“删除所选”按钮可以批量删除3.每个商品,可以在该商品信息栏最后的“删除”按钮删除该商品4.每个商品,可以在该商品信息栏增加或减少商品的数量,改变后该商品的小计价格及最后的商品总价自动发生变化。阅读提示:html是网上练习的模...
2019-01-20 21:56:12
445
原创 随机产生小方块
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #map{ width: 8
2019-01-17 18:37:35
592
原创 封装的函数
var evt={ //1.window.event 和对象event的兼容 getEvent:function (e) { return window.event||e; }, //2.scroolTop和scroolLeft的兼容 //向左卷曲的距离 getScrollLeft:function () { retu...
2019-01-16 21:16:02
103
原创 封装变速函数
function getStyle(element,attr){ return window.getComputedStyle ? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr]; } function biansu(element,json,fn) { cle...
2019-01-15 19:30:19
218
原创 封装的动画函数
function dong(element,target) { clearInterval(element.timeId); element.timeId=setInterval(function () { var zuobian=element.offsetLeft; var step=10; step...
2019-01-14 21:05:02
264
原创 js注册表单
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <script> function showTips(id, info) { documen
2019-01-13 17:25:12
1178
原创 js简单的计算器
var a=Number(prompt("请输入第一个数"));var c=prompt("请输入运算符")var b=Number(prompt("请输入第二个数"));if (c=="+"){ alert(a+"+"+b+"="+(a+b))}else if(c=="-"){ alert(a+"-"+b+"=&
2019-01-10 21:38:35
76
转载 使用js实现tab选项卡效果
// JS实现选项卡切换 window.onload = function() { var tabList = document.getElementById("tab-list"); var aLis = tabList.getElementsByTagName("li"); var tDiv = document.getEleme...
2019-01-09 19:40:39
252
转载 高亮显示输入的文本框
var inputs = document.getElementsByTagName("input"); for (var i = 0; i < inputs.length; i++) { var input = inputs[i]; //判断input是否是text if (input.type != "text") { ...
2019-01-08 19:44:55
676
原创 四种对象
Array.isArray(对象) 判断这个对象是否是数组对象.concat(数组1,数组2…) 组合成一个新的数组.every(函数) 返回值是布尔类型,这个函数中有三个参数 一假即假.some(函数) 返回值是布尔类型,这个函数中有三个参数 一真即真.filter(函数) 返回的是数组中每一个符合条件的元素,组成的一个新的数组 (过滤的方法) .pus...
2019-01-07 18:03:38
183
转载 js string()常用方法总结
创建一个String 对象,语法:new String(stringValue),这个调用会将参数转换为字符串,并作为一个String 对象。事实上任何一个字符串常量都是一个String对象,可以将其直接作为对象来使用,这和使用new String()创建对象的区别是:typeof的返回值不同,一个是“stirng",另一个是"object".string.indexOf(searchStrin...
2019-01-03 18:55:47
305
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人