- 博客(56)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 nodejs连接mysql数据库并作为模块使用
nodejs连接mysql数据库并作为模块使用使用nodejs做api接口来作为vue项目的后端逻辑处理需要连接mysql数据库,并作为组件可以复用.首先新建一个db.js模块,然后引入mysql模块 (如果没有则需要安装 cnpm install mysql -g)const mysql = require('mysql');...
2019-03-10 16:23:12
4305
原创 解决页面刷新后vuex数据丢失
解决页面刷新后vuex数据丢失在vue项目中使用vuex来记录一些状态时发现按F5刷新页面后vuex里面的数据会丢失.因为js运行的代码都是存储在内存中.刷新页面内存会被释放,所以这些数据都会丢失,只能用h5提供的api:localStorage或者sessionStorage来记录页面刷新前的vuex状态.两者大致区别是:l...
2019-03-10 16:10:20
800
原创 element-ui踩坑记录之el-pagination分页
element-ui踩坑记录之el-pagination分页使用el-pagination为表格分页显示时,出现一个bug.每页设置显示7条明明数据有多于21但是分页后只有3页.如下图:查了一圈才发现原来是 分页控件没设置 每页显示的数量: :page-size设置后即可正常显示出数据.这里再记录一个:当跳转到第二页后再次查询...
2019-03-10 15:59:27
17843
2
原创 jquery实现导航栏以及表格表头滚动时固定功能
jquery实现导航栏以及表格表头滚动时固定功能 今天来实现一个经常会用到的功能,导航栏或者表格的表头在当有滚动条向下滚动时,依然可以看到这样可以更清晰的对应数据是什么数据.本来可以设置导航栏为position:fixed就可以实现向下滚动时也显示,但是设计人员要求导航栏占位置所以这里不能设置position. 效果图:初始状态: ...
2019-01-10 14:21:44
1052
原创 网页实现文件打包下载
网页实现文件打包下载前段时间收到需要批量下载文件的需求。一开始是做一个把所有需要下载的文件复制到粘贴板这样就可以去迅雷或者其他下载软件批量下载，但是这样还是不能满足用户的需求。用户希望一点击就把所有需要下载的文件压缩成一个包后只需下载一次即可。这样整个功能就需要重新更改了。于是思路改成用户在选择需要下载的文件之后由...
2018-12-31 22:16:08
3299
原创 使用layer插件模拟excel批注效果
使用layer插件模拟excel批注效果 最近收到需要在网页上显示类似excel批注效果的需求.鼠标移上文字获取点击文字时就显示出提示信息效果图:鼠标移上标注说明时就显示出提醒信息.具体实现:利用layer插件,弹出msg信息,并且获取当前需要提醒的文字的元素位置后,再设置layer弹出层的位置即可.具体代码实现:...
2018-12-29 11:11:25
540
原创 js弹出新窗口被阻挡的解决方法
js弹出新窗口被阻挡的解决方法在目前asp.net项目中遇到查询结果后弹出新窗口显示,有些浏览器会自动阻止弹窗. 原因是我用ajax发起的异步请求,收到查询结果后再弹出窗口浏览器当成不是用户点击行为就会被阻挡.查了很多资料有说改成form表单提交而不用a超链接打开,结果我试了也不行.最终发现是因为我用ajax异步请求,改为同步即...
2018-12-10 15:58:50
3287
原创 iis通过路径无法访问网站目录下的图片问题
iis通过路径无法访问网站目录下的图片问题今天做一个asp网站需要通过目录来访问网站下面的gif图片.网站配置到iis后访问正常,但是图片文件通过连接的方式死活访问不到,提示404不存在.html文件和asp文件还有txt文件都可以访问.看了看iis报错的信息发现是ISAPI筛选器在搞鬼.果断把筛选器里面的"UrlScan 3.1" 删了就可以了...
2018-10-19 15:46:33
9266
原创 Asp项目总结
Asp项目总结最近在做一个基于asp.net mvc的项目，主要是用来生成衣服的标识吊牌和洗唛。现在总结一下几个技术点。1.可编辑的下拉框 用jquery的插件：jquery-editable-select下载引用jquery...
2018-09-29 03:50:59
1522
原创 Vue之路由
Vue之路由今天来看看vue怎么实现路由功能。我们在vue-cil脚手架搭建好的基础上来实现路由功能。如果搭建完初始化项目时没有路由功能则需在npm安装路由。命令：npm install vue-router然后在main.js中引用路由文件import router from './rou...
2018-09-12 00:58:33
228
原创 Vue之图片轮播
Vue之图片轮播今天来看看vue怎么实现图片轮播，个人实现方式，如果你有更好的实现方式，欢迎来沟通，嘿嘿。效果图：由于没有素材就随便找了123456来代替选中的圆点。实现思路：首先绑定数据源，循环出每个图片，在通过isShow字段来判断是否显示图片。在图片元素写这两个 v-bind:src="...
2018-08-23 01:02:26
5771
原创 Vue之下载所有选中连接
Vue之下载所有选中连接 最近在项目中有需求是要求能下载所有连接，当时是用.net的后台处理和jquery一起实现的。今天来看看怎么用Vue来实现这个。效果图： 点击下载所有链接就会把勾选的记录里面的链接复制到剪切板，在迅雷或者其他下载软件即可一起下载。实现思路：如果有多少需要下载的链接就写对应的隐...
2018-08-21 23:04:18
905
原创 Vue之改变布局
Vue之改变布局我们在购物的网站经常会看物品列表可以切换显示模式。也就是有两种布局可以来回切换，看用户喜欢哪种来选择。今天我们来看看vue怎么实现简单的布局切换。效果图：点击图形就只显示图片，点击图形加文字就多显示出文字。其实实现起来很简单，绑定一个数据集，里面有图片路径和图片文字。用两个div显示...
2018-08-14 23:29:10
6920
原创 Jquery实现把内容粘帖到剪切板兼容所有浏览器
Jquery实现把内容粘帖到剪切板兼容所有浏览器今天来看看jquery怎么实现把内容复制到剪切板。我们都知道ie有window.clipboardData.setData可以把内容复制到剪切板。但是只适合ie不适用其他浏览器。用jquery的zclip插件可以完美解决这个问题。不过需要在服务器环境下运行。直接上代码：<html char...
2018-08-14 00:42:16
2177
原创 Vue之简单的统计功能
Vue之简单的统计功能今天我们来看看vue怎么实现简单的统计价格功能。效果图：最后的价格自动根据选择的项目来计算最终价格。1.首先绑定每个项目绑定class 如果选中则增加样式active，改变背景颜色 :class="{'active':item.active}"2.写计算事件，过滤掉集合中未选中的项...
2018-08-10 00:35:47
4217
原创 Vue之小目标列表实现
Vue之小目标列表实现今天来实现一个简单的小目标列表功能。效果图：功能：可以添加目标添加后自动显示在最下面，如果勾选了就说明是已完成的目标。1.创建一个文本框用于添加目标。并绑定键盘回车事件@keyup.13='addList' 调用添加目标方法。文本框的值则绑定addText data属性。2.实现...
2018-08-07 23:36:38
1367
1
原创 Vue之导航栏
Vue之导航栏今天我们来用vue实现简单的导航栏。效果图：根据点击的tab来展示对应的内容。其实很简单，用到了vue的v-show和绑定class。首先创建一个属性“shouDiv” 用来判断显示哪一个tab页。再为每一个连接注册点击事件：@click="showDiv=1"分别让sho...
2018-08-07 00:47:50
4721
原创 Vue之简单购物车功能
Vue之购物车功能今天来看看vue怎么实现简单的购物车功能。效果图： 我们都知道vue是数据驱动和组件化的模式。意思就是只要绑定的数据改变其他的变化由vue去完成，无须再去操作dom。我们来看看简单的购物车功能怎么实现：1.先完成数据绑定代码：html：<tr v-for=...
2018-08-06 00:57:29
20821
6
原创 Jquery之删除内容效果
Jquery之删除内容效果jquery插件功能强大，今天我们来看看是实现删除内容的效果。效果图：我们点击右上角的x就会实现把这部分内容删掉。实现思路：首先写好页面样式后，引入jquery文件。在为x这个按钮添加点击事件。点击后获取父级元素，再使用jquery的动画事件：animate把整个...
2018-08-05 00:50:22
3315
原创 Javascript之把网页加入收藏夹功能
Javascript之把网页加入收藏夹功能今天我们来看看js怎么实现把加入收藏夹功能。实现代码：<script>function addFav(){ var title = document.title; var URL = document.URL; if(document.all){ ...
2018-08-03 23:54:48
7301
1
原创 Jquery之生成带图片的验证码
Jquery之生成带图片的验证码今天来看看jquery怎么生成图片的验证码，并实现验证功能，无需后台代码即可完成验证。效果图：会在页面加载是生成一个四位数的验证码。先生成四位随机数，在设置通过h5的canvas 来绘制图片。再为看不清按钮注册事情，来重新生成验证码即可。用一个变量来记录生成的验证码code。在登陆时...
2018-08-03 00:50:17
6086
原创 Jquery之cookie操作
Jquery之cookie操作今天来看看jquery是怎么操作cookie的。相比javascript，jquery操作cookie方便很多。在jquery cookie官网下载jquery.cookie.js 再项目中引入即可使用。地址：http://plugins.jquery.com/cookie/1....
2018-08-02 00:27:30
981
原创 Javascript特效之高亮显示选中的文本框
Javascript特效之高亮显示选中的文本框今天我们来看看怎么实现网页文本框选中时高亮显示文本框以提醒当前正在输入的文本框。效果：当我们选中文本框时，文本框背景颜色变为深蓝色。实现思路：用js为文本框注册onfocus获得焦点事件，在获得焦点事件触发时添加写好的高亮样式即可。js代码：var currentl...
2018-08-01 00:17:33
2875
原创 Javascript之js文件延时加载
Javascript之js文件延时加载我们做网页经常需要写很多js代码，如果有些代码库太庞大会影响到我们打开网页的速度。如果不是当前页面加载就需要用到的js代码，我们可以延时加载，这样可以提升网页的打开速度。下面几种延时加载方式都可以：1.我们可以写一个setTimeout函数来延时2秒后再加载js代码。<sc...
2018-07-30 23:54:09
716
原创 Javascript之获取元素距离页面的top、left、right、bottom
Javascript之获取元素距离页面的top、left、right、bottom我们在做网页是有时会需要用到绝对定位这时需要判定元素离页面的距离。今天我们来看看怎么获取元素距离页面的top、left、right、bottom。代码：function getElemDis(el) { var tp = document.documentElement.c...
2018-07-30 01:13:42
11006
原创 Javascript之封装
Javascript之封装今天我们来看看javascript的封装。我们写一个类：testfunction test() { var a = 'aa'; this.b = 'bb';}如果我属性用var定义则是私有属性，相反如果是this则是共有属性。我们可以尝试实例化这个类来看看...
2018-07-29 00:36:53
109
原创 Javascript之继承
Javascript之继承我们知道面向对象编程语言都有继承，javascript也有继承，今天就来看看javascript怎么实现继承的。继承就是调用父属性或者实现父方法。假设有父方法 有属性 name和age 还有一个方法 printfunction a(name,age){ this.name ...
2018-07-28 01:52:09
127
原创 Javascript之用二分法查找数组
Javascript之用二分法查找数组今天我们来看看怎么用二分法输出数值在集合中的下标。集合：var arr = [11, 22, 33, 44, 8118,8900, 9000, 9900];查找的数：9000实现思路：每次一查找都先把集合分成两个集合来查找，判断集合中间数是大于或者小于要查找的值。如果大于说明查找...
2018-07-27 01:01:20
1308
原创 Javascript之冒泡排序法
Javascript之冒泡排序法今天来看看js是怎么实现冒泡排序法的。实现效果：排序前：排序后：实现代码：var arr = [3, 55, 12, 69, 23, 55, 6], temp = 0, flag = false;for (var i = 0; i < ar...
2018-07-26 00:07:08
393
原创 Vue之发起ajax请求
Vue之发起ajax请求今天来看看前端框架Vue怎么发起ajax请求。我们都知道在jquery框架发起ajax请求很简单，只需要$.ajax即可发起http请求。其实vue也很简单，不过需要用到插件axios。官方有提供安装，可以通过npm安装（npm install axios -S ）axios是一个基于Promise的HTTP请求客户端。格式：methods:{ send(...
2018-07-10 00:54:26
1295
2
原创 Javascript特效之控制文本框输入
Javascript特效之控制文本框输入今天我们来看看怎么实现限制文本框只能输入中文或者只能输入英文。效果图：实现思路：在input控制绑定onkeyup事件，再用正则表达式判断是中文或者英文，如果不是对应的则替换掉输入的内容。html:请输入汉字：<br><input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" ...
2018-07-09 01:23:49
266
原创 Javascript特效之模拟抽奖程序
Javascript特效之模拟抽奖程序我们经常会看到一些抽奖程序，应该很多都是H5做的，今天我们来看看js怎么实现类似抽奖的程序。效果图：点击开始时，会一直跳动文本框的值直到我们点击停止。就类似抽奖的效果。不过这个几率没法设置。实现思路：我们先预设好参与抽奖的内容。再写一个setInterval重复执行函数，让文本框一直随机显示我们预设的内容。点击停止时则清除setInterval即可。js代码：...
2018-07-05 23:33:41
1305
原创 Javascript特效之控制输入字数和进度条显示
Javascript特效之控制输入字数和进度条显示我们经常会遇到一些网页的输入框会限制输入的字数，并且会显示出当前输入了多少个字符，今天来看看怎么实现。效果图：可以看到，我们每输入一个字符下面的进度条会跟着变。实现思路：首先设置好总字数，再为文本框注册键盘按下事件。没按下按键或者删除字符都要进行处理，如果超过总字符数则截取掉。颜色则是通过rgb来控制越来越红。js代码：function textC...
2018-07-05 00:32:17
715
原创 Css效果之好看的边框颜色大全
Css效果之好看的边框颜色大全今天分享一些好看的边框颜色，需要的可以直接拿走使用。效果图：html代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http...
2018-07-03 23:35:47
17206
1
原创 Javascript特效之实现省市级联动
Javascript特效之实现省市级联动我们在网上买东西经常会需要填地址，而在填地址的时候经常在输入省份时就会自动弹出对应省份下面的市，今天我们来看看怎么简单的通过js实现省市联动。效果图：在选择省份后，后面的下拉框会自动赋值为该省份下面的城市。实现思路：首先我们要预设置好每个省份下面有多少个城市，然后在根据省份对应的城市查询出来赋值给后面城市的下拉框。js代码：var where = new A...
2018-07-03 00:17:41
1649
1
原创 Javascript特效之监听键盘按键
Javascript特效之监听键盘按键我们都知道很多软件都有快捷键可以使用，今天我们来看看怎么实现网页的快捷键功能。效果图：当我们按下ctrl和enter时，网页会弹出对话框。实现思路：其实实现起来很简单。只要注册好onkeydown键盘按下事件，再判断按下哪个按键做对应的操作即可。js代码：onkeydown="if(event.ctrlKey&&event.keyCode=='...
2018-07-01 23:00:35
1855
原创 Javascript特效之向左滚动的广告
Javascript特效之向左滚动的广告今天来看看怎么实现从右向左无缝滚动的文字广告效果。效果图：文字会一直向左重复滚动，直到鼠标放上去才停止。实现思路：因为是要向左移动，所以使用scrollLeft方法控制元素向左移动。需要写一个重复执行的代码来控制元素一直向左移动，这里用到setInterval。说到setInterval这里说说setInterval和settimeout的区别。settim...
2018-07-01 01:58:10
664
原创 Javascrpit特效之打字机效果
Javascrpit特效之打字机效果今天来看看怎么实现炫酷的打字机效果。即把一段话一个字一个字的显示出来。效果图：实现思路：首先规定好显示字数的速度即settimeout执行间隔用来控制每个字之间输出速度。再把判断段落的总字数，循环段落总字数来实现一个字一个字的输出。js代码：var theNewsNum; var theAddNum; var totalNum; var CurrentPo...
2018-06-30 02:19:08
2305
8
原创 Javascript特效之评论删除效果
Javascript特效之评论删除效果今天来看看怎么实现类似wordpress的评论删除效果。效果图：点击delete 整个内容会隐藏掉。实现思路：使用jquery动画功能animate先改变元素背景颜色后再把元素的可见度opacity 设置为隐藏。jquery代码：$(".pane:even").addClass("alt"); $(".pane .btn-delete").click(fu...
2018-06-28 23:41:54
779
原创 Javascript特效之随机背景图
Javascript特效之随机背景图今天来看看如何实现网页背景图随机切换。其实实现起来很简单，就是写一个存图片路径的集合，然后再随机获取集合的其中一个元素用来生成网页的背景图。js代码：bg = new Array(5);bg[0] = 'a.jpg'bg[1] = 'b.jpg'bg[2] = 'c.jpg'bg[3] = 'd.jpg'bg[4] = 'e.jpg'index =...
2018-06-28 00:49:35
677
jquery复制到剪切板插件zclip
2018-08-14
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人