- 博客(40)
- 收藏
- 关注
RSS订阅转载 vue地址栏直接输入路由无效问题
vue 项目只要不是静态页面，一般都会和官方的路由管理器 vue-router 一起使用。最近项目有一个需求，是在地址栏输入路由，跳转到对应路由组件，在开发环境中这样做是可以跳转的，但是项目打包后，通过地址栏跳转会报错。因为 vue 在页面上显示哪个组件是根据 vue-router 进行控制的，在地址栏上直接输入路由名称，并不能触发 vue-router 的规则，所以只能通过监听地址的改变...
2019-04-17 16:58:52
3918
转载 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
214
转载 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
549
转载 webpack由浅入深——（webpack优化配置）
webpack系列文章webpack由浅入深——（webpack基础配置）webpack由浅入深——（webpack优化配置）webpack由浅入深——（tapable）webpack由浅入深——（ast）webpack由浅入深——（webapck简易版）webpack由浅入深——（loader实现）webpack由浅入深——（plugin实现）开发优化开发时的优化主要在于减少w...
2019-04-12 08:52:06
343
原创 localStorage使用总结
一、什么是localStorage、sessionStorage在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。二、localStorage的优势与...
2019-04-10 15:46:27
237
原创 学习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
509
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
119
转载 详解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
250
转载 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
283
原创 知识点-----组件化、模块化
1.1组件化 就是"基础库"或者“基础组件"，意思是把代码重复的部分提炼出一个个组件供给功能使用。 使用：Dialog，各种自定义的UI控件、能在项目或者不同项目重复应用的代码等等。 目的：复用，解耦。 依赖：组件之间低依赖，比较独立。 架构定位：纵向分层（位于架构底层，被其他层所依赖）。1.2模块化 就是"业务框架"或者“业务模块"，也可以理解为“框架”，意...
2019-03-29 22:24:01
222
转载 rem/em/响应式用法总结
Js动态设置rem来实现移动端字体的自适应 实际上讲了这么多，大家可能已经了解了rem的用法，但是还不了解如何利用rem去实现移动端的自适应。说到底，rem实现移动端自适应的原来在于它本身的特性，它可以始终根据根元素的字体大小去改变自己的值。目前各种常见手机的屏幕尺寸大小如下图所示：想实现手机端自适应，就是可以让页面的元素字体、间距、宽高等属性的属性值可以随着手机屏幕尺寸的变化而变化，接...
2019-03-29 08:43:51
145
转载 面试题
1、Doctype 作用? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?（1）、<!DOCTYPE> 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。（2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工...
2019-03-27 22:55:00
82
原创 ScrollPic js——图片左右滚动插件（单一功能）
客观的讲，scrollpic.js的确是一个很好用的图文滚动插件，它不但可以左右控制无缝连续滚动，还可以兼容如此多的浏览器，真的是难能可贵。对于没有太多JS专业功底的网页生产者，这个插件用起来也不是很难，所以当你需要时就不妨大胆的用吧。插件的下载地址：ScrollPic.js使用方法：// 先加载ScrollPic.js插件后再执行以下语句window.onload = function(...
2019-03-25 19:33:35
549
原创 AJAX 基础
AJAX 基础AJAX 指异步 JavaScript 及 XML （Asynchronous JavaScript And XML ）。AJAX 是一种在 2005 年由 Google 推广开来的编程模式。AJAX 不是一种新的编程语言，而是一种使用现有标准的新方法。通过 AJAX ，你可以创建更好、更快以及更友好的 WEB 应用程序。AJAX 基于 JavaScript 和 HTTP ...
2019-03-25 19:29:45
159
转载 响应式布局的实现方法和原理
昨天我在马海祥博客上跟大家详细的介绍过《什么是响应式网页设计？》，我觉的响应式网页设计不仅仅是一种趋势，还更是一个新的设计解决方案！它有助于解决不同的分辨率和设备（台式电脑，笔记本电脑，平板，手机）相关的设计问题。既然是设计的问题，这里就会涉及到很多层面的角色，包括交互设计师，视觉设计师，前端工程师，后台开发工程师。交互设计师，要满足各自不通分辨率和设备的页面布局展现方式。而视觉设计师，则要考虑...
2019-03-25 19:28:28
1503
原创 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
284
原创 c3h5笔记
浏览器前缀 浏览器前缀 浏览器 -webkit- Google Chrome, Safari, Android Browser -moz- Firefox -o- Opera ...
2019-02-28 19:41:01
946
原创 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
115
原创 跨域的问题
/* * 为什么会出现跨域 跨域问题来源于JavaScript的同源策略，即只有 协议+主机名+端口号 (如存在)相同，则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源，不能访问和操作其他域下的资源。跨域问题是针对JS和ajax的，html本身没有跨域问题，比如a标签、script标签、甚至form标签（可以直接跨域发送数据并接收数据）等...
2019-02-25 18:28:27
341
原创 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
745
原创 封装的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
84
原创 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
136
原创 jquery弹幕
<!doctype html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> html, body {
2019-02-19 19:29:22
340
原创 jquery第一天总结
/** js和jquery的关系:jq是js的一个库** 为什么要学习jq？ --》简单粗暴，没有兼容性问题* 版本 区别** 入口函数 (function())全写:(function(){}) 全写:(function())全写:(document).ready(function{})* js与jq对象的区别* 1.方法不能互相调用* 2.可以转化 js–&g...
2019-02-18 17:27:56
75
原创 HTML DOM selectedIndex 属性
定义和用法selectedIndex 属性可设置或返回下拉列表中被选选项的索引号。注释：若允许多重选择，则仅会返回第一个被选选项的索引号。语法selectObject.selectedIndex=number例子<html><head><script type="text/javascript">function getIndex() {...
2019-01-23 19:12:20
177
原创 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
286
原创 淘宝购物车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
4377
转载 js实现购物车类似功能
ShoppingCart 购物车这个前端Deom中的很多功能是使用js脚本实现的。 具体效果有：1.可以全选，全不选商品。2.选中的商品，点击下面“删除所选”按钮可以批量删除3.每个商品，可以在该商品信息栏最后的“删除”按钮删除该商品4.每个商品，可以在该商品信息栏增加或减少商品的数量，改变后该商品的小计价格及最后的商品总价自动发生变化。阅读提示：html是网上练习的模...
2019-01-20 21:56:12
433
原创 随机产生小方块
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #map{ width: 8
2019-01-17 18:37:35
560
原创 封装的函数
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
97
原创 封装变速函数
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
205
原创 封装的动画函数
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
255
原创 js注册表单
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <script> function showTips(id, info) { documen
2019-01-13 17:25:12
1167
原创 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
66
转载 使用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
243
转载 高亮显示输入的文本框
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
657
原创 四种对象
Array.isArray(对象) 判断这个对象是否是数组对象.concat(数组1，数组2…) 组合成一个新的数组.every(函数) 返回值是布尔类型，这个函数中有三个参数 一假即假.some(函数) 返回值是布尔类型，这个函数中有三个参数 一真即真.filter(函数) 返回的是数组中每一个符合条件的元素，组成的一个新的数组 （过滤的方法） .pus...
2019-01-07 18:03:38
172
转载 js string()常用方法总结
创建一个String 对象，语法：new String(stringValue),这个调用会将参数转换为字符串，并作为一个String 对象。事实上任何一个字符串常量都是一个Ｓtring对象，可以将其直接作为对象来使用，这和使用new String()创建对象的区别是：typeof的返回值不同，一个是“stirng",另一个是"object".string.indexOf(searchStrin...
2019-01-03 18:55:47
292
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人