前端开发
关注
分享
扫一扫
nuc_八道门
这个作者很懒，什么都没留下…
展开
-
解决setInterval计时器不准的问题
解决解决setInterval计时器不准的问题在js中如果打算使用setInterval进行倒数,计时等功能,往往是不准确的,因为setInterval的回调函数并不是到时后立即执行,而是等系统计算资源空闲下来后才会执行.而下一次触发时间则是在setInterval回调函数执行完毕之后才开始计时,所以如果setInterval内执行的计算过于耗时,或者有其他耗时任务在执行,setInterval的计时会越来越不准,延迟很厉害.下面的代码可以说明这个问题var startTime = new Date(原创 2021-08-09 15:34:55 · 4824 阅读 · 0 评论 -
优化 input 的type=number,阻止输入E,e, -, +,2020-11-03
<input value="" onkeydown="checkInput(event)" type="number" name="amount" placeholder="请输入数字">/** * 优化 input 的type=number,阻止输入E,e, -, +, */function checkInput(e){ let prohibitInput= ["-", "e", "+", "E"]; if(prohibitInput.includes(e.key).原创 2020-11-03 10:04:04 · 369 阅读 · 0 评论 -
关于json条件与字符串&链接的条件进行互转
例如：{age:10,name:’zhangsan’} 转成 age=10&name=zhangsanvar params = Object.keys({age:10,name:’zhangsan’}).map(function (key) { return encodeURIComponent(key) + "=" + encodeURIComponent(searchCondition[key]); }).join("&原创 2020-10-25 11:38:43 · 406 阅读 · 0 评论 -
车牌号正则校验、手机号正则校验
/*** 车牌号校验*/function isVehicleNumber(vehicleNumber) { var result = false; if (vehicleNumber.length == 7){ var express = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/; result = express.test(vehi.原创 2020-06-14 18:11:28 · 297 阅读 · 0 评论 -
vue起步6之vuex状态管理
vuex状态管理参考资料：https://baijiahao.baidu.com/s?id=1618794879569468435&wfr=spider&for=pc在vue中我们可以使用vuex来保存我们需要管理的状态值，值一旦被修改，所有引用该值的地方就会自动更新1.安装npm install vuex –save2. 在项目的src目录下新建一个目录store，在该目录下新建一个index.js文件，我们用来创建vuex实例，然后在该文件中引入vue和vuex.原创 2020-06-01 23:15:07 · 156 阅读 · 0 评论 -
vue起步5之axios的使用封装和拦截器
文档地址http://www.axios-js.com/zh-cn/docs/安装npm install axios传统调用缺点：后期项目接口变化，维护困难所以说要采用下面的方式进行封装接口调用拦截器 src/util/request.js接口src/api/login.js页面组件中使用...原创 2020-05-30 23:29:35 · 196 阅读 · 0 评论 -
vue起步4之轮播图插件安装和使用
轮播图插件安装和使用轮播图插件 swiper.js安装npm install swiper vue-awesome-swiper –save1）在vue中引入a)main.js中import VueAwesomeSwiper from 'vue-awesome-swiper';import 'swiper/css/swiper.css';import './styles/common.css';Vue.use(VueAwesomeSwiper);b)页面组件中...原创 2020-05-23 19:20:34 · 282 阅读 · 0 评论 -
vue起步3之vue-router的基本使用
vue-router的基本使用vue是单页面应用，一个页面是由多个组件构成，所以说做页面跳转的时候并不适合用传统的href,于是vue-router就诞生了。vue-router是官方的路由管理器安装npm install vue-router在项目根目录下执行以上命令即可使用在 src目录下的router/index.js定义router, 就是定义 路径到 组件的 映射。主页面组件App.vue主入口main.js场景1 进入项目后直接跳转到指定页原创 2020-05-22 14:49:09 · 601 阅读 · 0 评论 -
vue起步2之src目录介绍
src目录详解：src目录是存放初首页以外的所有源代码assets目录是存放代码以外的资源componets目录是存放除了主组件（App.vue）以外的所有组件App.vue 主组件，入口组件main.js 程序的入口文件，项目的核心文件。接下来看一下入口文件，main.js作用：1.实例化Vue。2.放置项目中经常会用到的插件和CSS样式。例如： 网络请求插件:axios和vue-resource、图片懒加载插件：vue-lazyload3.存储全局变量。例原创 2020-05-21 16:22:56 · 1511 阅读 · 0 评论 -
vue起步
最近有点空闲，听说vue火的一塌糊涂，本着技多不压身的想法，就开始了以下的学习之旅。自学，有兴趣的同学可以一起学习,群号：1083724915，暂时没啥人哦1.使用HbuilderX创建一个vue项目，点击创建，等待创建完成即可（大概1分钟）。2.创建完成后的项目目录大概解释一下项目的原始目录，由于我也是初次接触，只想通过这种方式记录一下学习历程，勿喷。node_modules目录：依赖包目录，其中包括很多基础依赖，自己也可以根据需要安装其他依赖。安装方法为打开cmd，进入项目目原创 2020-05-20 22:25:30 · 184 阅读 · 0 评论 -
css省略号
多行overflow:hidden;text-overflow:ellipsis; text-overflow: -o-ellipsis-lastline;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;单行word-break:keep-all;/* 不换行 */whit...原创 2019-10-18 15:26:39 · 387 阅读 · 0 评论 -
h5图片上传，获取本地图片地址
说明：此处图片还未上传到服务器，点击提交才会上传到服务器效果：前端代码：html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>商品评论</title> <meta name="viewport" co...原创 2019-10-11 15:44:25 · 1461 阅读 · 0 评论 -
关于电子考试填空题的一个想法
直接贴源码：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>index</title> <script src="./jquery.min.js"></script></head>&l...原创 2019-06-23 19:53:40 · 219 阅读 · 0 评论 -
常用的前端还款计算器（包括按月等额本息、按四月等额本息、到期还本付息、到期还本按月付息四种还款方式）
四种还款方式的计算公式自行百度即可按月等额本息还款法见：https://baike.baidu.com/item/%E7%AD%89%E9%A2%9D%E6%9C%AC%E6%81%AF/3227456到期还本付息法见：https://baike.baidu.com/item/%E4%B8%80%E6%AC%A1%E8%BF%98%E6%9C%AC%E4%BB%98%E6%81...原创 2018-12-25 09:14:27 · 7448 阅读 · 0 评论 -
jquery获得被选中的多选框的值
var str = $("input:checkbox[name='ids']:checked").map(function(index,elem) { return $(elem).val(); }).get().join(','); 结果格式：10,21,20,21 ...转载 2018-11-09 15:29:43 · 1371 阅读 · 0 评论 -
热点地图的使用
alt ：表示如果图片加载失败时，要显示的内容title：表示鼠标放到图片上时，要显示的内容usemap: 表示应用热点地图，它的值：map标签的idmap:表示地图area：表示热点区域 shape属性：值circle 圆形 coords="x,y,r" 表示 圆心 和 半径 值re原创 2017-03-05 21:09:48 · 631 阅读 · 0 评论 -
利用jquery获得下拉菜单的值
直接上例子： index 背景 背景2 广州 上海 $('#city').change(function(){ val=$("#city").find("option:selected").val(); });原创 2017-03-27 17:45:09 · 807 阅读 · 0 评论 -
关于做响应式页面开发
何为响应式？针对不同的分辨率，实现页面的自动适应使用何种技术？媒体查询技术@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。语法结构？@media screen and (max-width:1150px){原创 2017-06-09 17:00:40 · 264 阅读 · 0 评论 -
使用js判断，客户端是手机还是PC
以下是一段简单的js实现功能：判断客户端是手机还是pc,从而实现跳转到不同的网站if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) { window.location.href = "https://www.baidu.com/";} else { window.location转载 2017-07-18 19:38:03 · 355 阅读 · 0 评论 -
原生js中的事件委托(为新添加的DOM元素添加事件)
原生js中的事件委托(为新添加的DOM元素添加事件)作用：事件委托可以为新添加的DOM元素动态的添加事件js中的addEventListener方法语法:document.addEventListener('click',function(event){ var target = event.target; //通过console.log(event)查看有tar原创 2017-07-25 15:41:28 · 4424 阅读 · 0 评论 -
uploadify多文件上传插件的使用帮助
uploadify使用帮助：官网下载uploadify插件http://www.uploadify.com/download插件要求环境:1)jQuery 1.4.x 以上2)Flash Player 9.0.24 以上(新版Chrome不支持)解压后文件列表1)jquery.uploadify.min.js2)uploadify.php原创 2017-08-03 15:57:54 · 622 阅读 · 0 评论 -
html里的几个小窍门分享一下
1.取消右键鼠标菜单 001 0022.取消选取防止复制 001 0023.防止复制 fsadjlfasjl fsadjlfasjl fsadjlfasjl4.防止粘贴5.3秒后刷新到一个新地址原创 2017-08-12 16:54:35 · 313 阅读 · 0 评论 -
php万年历原型
<?php //计算当月天数$days=date('t',strtotime('2017-11-1'));$w=date('w',strtotime('2017-11-1'));$firstday=1-$w; ?><!DOCTYPE html><html lang="en"><head> <meta charset="...原创 2017-11-20 08:23:36 · 247 阅读 · 0 评论 -
从微信端跳到外部浏览器进行apk文件下载
需求：从微信公众号里的栏目跳到外部浏览器进行apk文件下载原因：在微信内不允许直接下载apk这里有一个解决方案，直接上关键代码<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta content="initial-scale=1.0,原创 2018-03-29 10:08:08 · 11826 阅读 · 3 评论 -
jquery如何阻止子元素继承父元素的事件（又称事件冒泡）
非常简单，子元素上添加如下代码即可 $("#div1").mousedown(function(event){ event.stopPropagation(); });关键代码：event.stopPropagation()原创 2018-06-28 11:38:14 · 4361 阅读 · 1 评论 -
css超出添加省略号
overflow: hidden; //把超出的内容进行隐藏white-space: nowrap;//设置内容不换行text-overflow: ellipsis;//设置超出内容为省略号原创 2018-07-04 13:57:29 · 321 阅读 · 0 评论 -
Ajax跨域访问解决方案
No 'Access-Control-Allow-Origin' header is present on the requested resource.' Ajax跨域访问解决方案什么是跨域？跨域是指一个域下的文档或脚本试图去请求另一个域下的资源例如：1.资源跳转： A链接、重定向、表单提交2.资源嵌入，如：link,script等3.脚本请求： js发起的ajax请求、...原创 2018-09-05 14:34:05 · 166 阅读 · 0 评论 -
回到顶部实现
scorllBy(x,y)方法，属于window对象，x代表文档水平滚动的像素，y代表文档垂直滚动的像素用法：window.scorllBy(0,100)表示水平滚动0，垂直向下滚动100 window.scorllBy(0,-100)表示水平滚动0，垂直向上滚动100获得当前所在的高度：1）document.documentElement.scrollTop （fir原创 2017-03-08 18:52:04 · 194 阅读 · 0 评论