- 博客(54)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 WebStorm 使用方法
1.下载安装官方网站:https://www.jetbrains.com/webstorm/ps: 这个需要翻墙下载,如果无法翻墙请自行选择其他方式下载这里提供一个我的百度网盘分享地址链接：https://pan.baidu.com/s/1sbWZtCgjJa1E9o-KmJjNfA提取码：xpjl2.安装成功后只要双击安装包后一个个点击 Next 就好了3.获...
2019-04-28 14:41:22
1059
原创 如果在本地访问 vue 打包好的 dist 文件
众所周知我们是无法直接通过打开 vue 打包好的 dist 目录下的 index.html ,需要我们在本地开启一个服务器进行访问,这里分享一个node 开启本地服务器的方法, 首先我们需要在dist 外层目录新建一个 server.js 文件var connectHistoryApiFallback = require('connect-history-api-fallback')var...
2019-04-19 16:04:49
3174
原创 vs code 格式化代码配置
最近公司项目加入了 ESlint检查，然后各种飘红！！！现在用的插件：ESlint： javascript代码检查工具vutur： 一个非常强大的插件，但是也有不足之处，在格式化 vue 文件时，会自动给你加上双引号、分号等，这就需要额外的配置来解决与ESlint的冲突解决配置：记得以前只需要在 vscode 编辑器中 依次点击 文件 --- 首选项 --- 设置 就能自...
2019-03-02 17:23:06
9463
原创 原生js实现移动端滑动反弹效果
原生js实现移动端滑动反弹效果纵向滑动效果演示横向滑动效果演示请在谷歌浏览器移动端模拟下查看具体实现思路触摸事件（touch event）可响应用户手指（或触控笔）对屏幕或者触控板操作，给基于触控的用户界面提供了可靠支持。触摸事件接口是较为底层的 API，可为特定程序提供多点触控交互（比如双指手势）的支持。多点触控交互开始于一个手指（或触控笔）开始接触设备平面的时刻。随后其他手指也...
2019-01-24 17:30:17
2095
原创 算法的重要性------一道小小编程题
在QQ前端交流群遇到一道小小的编程练习题，很有意思就随便练练手，仔细思考偶然发现里面的奥妙无穷！【每日思考】给定一个数组arr,和一个数num,请把小于等于num的数放在数组的左边，大于num的数放在数组的右边。要求:只能在原数组上操作，并且只得循环一遍数组。拿到题目不假思索的给出自己的思路：数组有两个方法一个往前追加元素，一个往后追加元素，先保存当前遍历元素然后删除并与num比较大小后选...
2018-12-20 14:39:52
225
原创 浏览器数据库 IndexedDB 入门演练
1.演练地址https://djz917.github.io/contact/indexDB/index.html2.看一下浏览器兼容性，手机兼容性略差。3.简单建立页面，如下：4.静态HTML代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <titl...
2018-12-13 17:13:01
304
原创 CSS3实现平行四边形间隔的边框
效果如下：其实要实现这个很简单，只需要配合一个CSS3的属性就能简单实现了。transform: skewX()定义沿着 X 轴的 2D 倾斜转换。W3C案例地址用好这个属性就简单许多了<!DOCTYPE html><html> <head> <meta charset="utf-8"> <titl...
2018-12-07 10:16:25
1598
原创 如何在github上预览html文件
1.最简单的方式就是直接在你github地址中的html文件前面加上http://htmlpreview.github.com/?举个栗子：http://htmlpreview.github.io/?https://github.com/djz917/Game/blob/master/2048/index.html2.可以利用gh-pages分支来简化网址 a.如何你github...
2018-11-23 11:15:56
2396
原创 如何将SVG图标转换为字体文件
1.打开网站https://icomoon.io/，进入的时候会有点卡，建议直接进下面的网站。点击右上角的IcoMoon App图标，也可以直接进入https://icomoon.io/app/#/select2.点击import Icoms上传SVG文件，或者直接选择网站内的图标3.点击右下角的Generate Font生成字体文件4.继续点击Download下载文件下载后的...
2018-11-22 10:28:42
8785
原创 JavaScript闭包？看完这几个例子你就完全搞懂了！
理解闭包，首先要知道作用域链是个什么东西。1.什么是作用域链在 JavaScript 的最顶层代码中（也就是不包含在任何函数定义内的代码），作用域链有一个全局对象组成。在不包含嵌套的函数体内，作用域链上有两个对象，第一个是定义函数参数和局部变量的对象，第二个是全局对象。在一个嵌套的函数体内，作用域链上至少有三个对象。当定义一个函数时，它实际上保存一个作用域链。当调用这个函数时，它创...
2018-11-15 14:08:44
192
原创 创建第一个Angular组件！！！
创建英雄列表组件使用 Angular CLI 创建一个名为 heroes 的心组件ng generate component heroesCLI创建了一个新的文件夹 src/app/heroes/, 并生成了三个文件HeroesComponent的类文件如下：import { Component, OnInit } from '@angular/core';@Compon...
2018-11-07 10:49:07
453
原创 Angular起步！！！
先决条件在开始之前，确保自己是否已经安装了Node.js 和 npm 包管理器第一步：安装 Angular CLI（全局安装）npm install -g @angular/cli第二步：创建工作空间和初始应用1. 运行 CLI 命令 ng new ,并提供一个名字 my-app, ng new my-app2.按 Enter 键接受默认配置第三步：启动开发服务器...
2018-11-07 10:11:58
183
原创 学习 vue 一篇demo就足够了
项目githu地址项目介绍与简单讲解1.vue安装与如何引入组件2.vue 实现路由跳转3.vuex实现简单的赠删改功能4.父子组件的相互通信5.问卷调查的路由传值与父子组件通信未完待续。。。项目截图1.1.优惠券主页1.2.优惠券新增与修改页面2.1.问卷管理主页2.2问卷新增与修改页面2.3问卷详情页面...
2018-11-02 16:39:56
368
原创 问卷调查的路由传值与父子组件通信
上一节已经完成了问卷的添加与删除，现在只需要小小的改动就能实现一个修改功能。1.进入修改页面和直接添加用的是同一个组件，但是进去修改页面需要把要修改的位置通过路由传值。this.$router.push({path: '/questionnaire/handle', query: {index: row}});而不要传值的直接进入添加页面则只需要 @click="$router...
2018-11-02 15:37:56
236
原创 父子组件的相互通信
前一节已经讲过vuex如何实现优惠券的赠删改，本章就不再赘述了。如需查看请回到上一节！1.直接利用element-ui表格布局搭建问卷详情页面这里与优惠券页面不同的是：点击问卷名称可以进去详情页面，与删除问卷操作在store.js中进行封装。<template> <div class="wrapper"> <header> ...
2018-11-02 09:47:01
224
原创 vuex实现简单的赠删改功能
上一节已经完成路由跳转，这节就来利用vuex实现简单的赠删改功能1.先利用element-ui组件完成页面的构建1）main.js全局引入element-ui组件import ElementUI from 'element-ui'Vue.use(ElementUI);2）index.html全局引入css<link rel="stylesheet" href="http...
2018-10-31 16:13:53
2427
1
原创 vue 实现路由跳转
1.前一节已经安装了vue-router(npm install vue-router --save),现在就来使用一下1）先在App.vue组件中配置路由出口<template> <div id="app"> <div class="container"> <app-header></app-header&a
2018-10-31 11:50:32
1783
原创 vue安装与如何引入组件
1.第一步安装npm install -g vue-cli (如果安装了可以 vue -V 查看是否已经安装)vue init webpack vue-demo(安装webpack模板)这里我使用的是简易模板vue init webpack-simple vue-democd vue-demonpm installnpm install vue-router vuex...
2018-10-31 11:10:22
3017
原创 如何将页脚固定在页面底部，而不是屏幕底部！
一个经典的 Sticky footers 布局问题话不多说贴代码<div class="main"> <div class="main-box"> <div class="header"> 我是头部 </div> <div class="content">
2018-08-18 11:43:48
2254
2
原创 vue-routes 配置
官方文档给的东西还是不够详细，这里给出自己开发中遇到的实例供大家参考。首先当然是安装这里只给出 npm 方式安装npm install vue-router如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：1.找到文件的入口 js 文件，通常是 src 目录下的 main.js import Vue from 'vue'import V...
2018-08-15 16:11:57
6662
原创 javascript数据结构----关于数组的方法总结
1.检测数组对于一个网页，或者一个全局作用域而言，使用 instanceof 操作符就能到到满意的结果：if (value instanceof Array){//如果是数组就执行某些操作}instanceof 操作符的问题在于，他假定只有一个全局执行环境。如果网页中包含多个框架，那实际上就存在两个以上不同的全局执行环境，从而存在两个以上不同版本的 Array 构造函数 。为了...
2018-08-14 17:21:34
167
原创 javascript数据类型----Number
1.浮点数值浮点数值的坑大多集中在计算方面，例如 0.1 + 0.2 的结果不是 0.3 ，而是 0.30000000000000004 ，造成这样结果的原因有兴趣的可以去查看一下“位运算”的相关内容。因此，永远不要测试每个特定的浮点数值，如果需要验证可以通过保留小数点后几位有效数字的方法进行比较。toDecimal(x){ let f = parse...
2018-08-13 15:42:07
210
原创 Javascript数据类型----Boolean
Boolean类型是js里面使用最多的类型了，该类型只有两个字面值：true 和 false 。虽然简单，但是却时常容易出错！下面就为大家整理一下其它数据类型具体转化为什么布尔值。 数据类型转化为布尔值的表现 数据类型 转化为 true 的值 转化为 false的值 Boolean true ...
2018-08-13 14:26:00
176
原创 Vue---过渡
先看一个典型的例子：HTML：<div id="app"> <button @click="show=!show">切换</button> <transition name="fade"> <p v-if="show">Hello</p> &am
2018-06-15 14:57:21
210
原创 Vue-----Class与Style绑定
1.1绑定HTML Class我们可以传给 v - bind : class 一个对象，以动态地切换 class 。这里 v-bind ： class 可以和普通的 class 共存。<div id="app" class="static" v-bind:class="{'didi-orange': isRipe,'didi-green':isNotRipe}"> </div&g...
2018-06-15 11:34:40
173
原创 阻塞代码与非阻塞代码实例
阻塞代码实例//阻塞代码实例var fs=require('fs');var data=fs.readFileSync('input.txt');console.log(data.toString());console.log("程序执行完毕！");非阻塞代码实例//非阻塞代码实例var fs = require('fs');fs.readFile('input.txt',functi...
2018-06-15 10:30:31
2263
原创 第一个node.js服务器应用
首先我们编写js文件如下var http=require('http');http.createServer(function(request,response){ //发送HTTP头部 //HTTP状态值：300：OK //内容类型： text/plain response.writeHead(200,{'Content-Type':'text/plain'}); //发送响应数据...
2018-06-15 10:02:33
145
原创 如何用命令行工具打开node文件
1. 先检测系统是否安装nodejs,在命令行中输入 node -v,如果显示版本号，则说明已经安装成功了。2. 新建一个用来保存node.js文件的文件夹，并在命令行中打开我的文件夹放在D盘的node.js文件夹中在文件夹中新建一个js文件然后在命令行中打开控制台打印输出 Hello Wrold 说明文件运行成功。...
2018-06-15 09:49:41
7496
原创 Node.js中的交互式运行环境----REPL
在node.js中,为了使开发者方便测试JavaScript代码,提供了一个名为REPL(Read-Eval-Print-Loop)的可交互运行环境.开发者可以在该运行环境中输入任何JavaScript表达式,当用户按下回车键后,REPL运行环境中将显示该表达式的运行结果.1.1 REPL运行环境概述 按下win+r,输入cmd,打开命令工具在命令行中,输入"node"命令并...
2018-06-15 09:30:18
675
原创 Vue--自定义过滤器
1.单个参数HTML<p v-text="message | reverse"></p>自定义过滤器Vue.filter('reverse',function(value){ return value.split('').reverse().join(''); })脚本数据message: 'abc',浏览器显示结果2.多参数<p>{{msg}}的三次...
2018-06-14 17:14:34
220
原创 Vue--过滤器limitBy fiterBy orderBy
1.1字母操作<li> 1.1字母操作 <ul> <li> 1.capitalize(首字母大写) <p>deng：{{'deng' | capitalize}}</p> </li> ...
2018-06-14 17:05:34
2427
1
原创 Vue之表单控件绑定
1.text<p>text输入文本</p> <span>Hello {{name}}</span> <input type="text" v-model="name" placeholder="yous name" name="">2.checkbox <p&
2018-06-14 16:39:30
226
原创 Vue--计算属性（getter/setter）
通常我们会在模板中绑定表达是，模板是用来描述视图结构的。如果模板中的表达式存在过多逻辑，模板就会变得臃肿不堪，难以维护。为了简单逻辑，当某个属性依赖于其他属性的值时，我们可以使用计算属性。什么是计算属性计算属性就是当其依赖属性的值发生变化时，这个属性的值会自动更新，与之相关的DOM部分也会同步更新。<div id="example"> <input type="text" v...
2018-06-14 16:28:38
4065
1
原创 v-指令 v-if v-else v-show v-for v-on
1.v-if/v-elsev-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。v-else必须跟着v-if，充当else功能。<div id="example"> <p v-if="greeting">Hello</p> <p v-else="greeting">Hi</p> &
2018-06-14 16:04:28
355
原创 Vue-指令 v-text v-html v-model v-bind
1.v-text<div id="app"> <span v-text="msg"></span></div>var app=new Vue({ el: "#app", data:{ msg: 'Hello Wrold', } })最后不要忘了前面加上脚步引入<script src=&qu
2018-06-14 15:28:42
936
原创 canvas绘制动态电子表
电子表在线地址:点击打开链接电子时钟截图动态电子表实现思路1.利用数组绘制不规则图形 需要绘制的图形有 0 1 2 3 4 5 6 7 8 9 : 要绘制的图形数组为[0,0,1,1,1,0,0], [0,1,1,0,1,1,0], [1,1,0,0,0,1,1], [1,1,0,...
2018-06-12 22:23:59
518
原创 HTML制作一个简易计算器小应用
先展示UI界面先进行逻辑分析1.界面外层长250px，宽600px用来显示计算器主界面分上下结构 上：用来显示数字 1.显示结果 2.显示输入数字 下：用来显示按钮 ul li button 依次为 AC +/- % / ...
2018-06-12 16:27:40
35727
9
原创 canvas实现动画时钟
实现效果如下：1.创建canvas元素<canvas id="drawing" width="200" height="200">没有金刚钻就不要揽瓷器活</canvas>2.绘制双圆var drawing=document.getElementById("drawing"); if(drawing.getContext){ var context
2018-06-11 14:07:24
382
原创 canvas实现匀速运动
话不多说先贴代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>匀速运动</title> <style type="text/css"> #drawing
2018-06-11 10:22:11
889
原创 phpstorm修改快捷方式
分屏编程 多处同时编写 Alt+鼠标左键就可以选择多个光标位置进行同时编写了 选择相同的内容进行更改 Alt+j 快速选择内容 双击内容 自己更改快捷方式 1.) Ctrl+Alt+s 打开下面界面 也可以 打开这个之后就可以选择你想要修改或者添加的快捷方式了。 你可以自己直接搜索 也可以直接从列表中选择 然后选择 Add Keyboard Shortcut ,直接键盘...
2018-06-08 17:37:30
865
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人