js
终是后来居上
emmm
每周五-周日进行更新~
希望对初学者们能有帮助~
展开
-
JS通过身份证号码获取出生年月日
getBirthdayFromIdCard : function(idCard) { var birthday = ""; if(idCard != null && idCard != ""){ if(idCard.length == 15){ birthday = "19"+idCard.substr(6,6); } else if(idCard.length == 18){ birthday = idCard.substr(6,8); }转载 2020-08-07 10:01:43 · 2269 阅读 · 0 评论 -
js判断输入是否全是空格
使用JavaScript trim() 方法var str = " Runoob ";alert(str.trim()); // Runoob定义和用法trim() 方法用于删除字符串的头尾空格。(这个方法可以判断是否输入全是空格)trim() 方法不会改变原始字符串实例<!DOCTYPE html><html><head><meta charset="utf-8"><title></tit转载 2020-08-05 09:44:27 · 2249 阅读 · 0 评论 -
Js控制div滚动到指定的位置
有时候可能为了简便或者其他原因,我们用某个div放了一长串内容,想要保证内容可以滚动,但是也会有其他情况,比如需要从别的界面进入该div的时候到指定位置,那么可以采用以下方式:<div id="test_div"> 内容内容内容</div>var test_div = document.getElementById("test_div");test_div.scrollLeft = screen.width; //screen.width就是要移动的像素如果要向转载 2020-08-03 21:38:44 · 2113 阅读 · 0 评论 -
vue 自适应屏幕的宽高度
通过定义属性进行双向绑定改变body的高度,watch监测窗口大小变化时触发,改变属性值达到预期效果,代码贴上<template> <div class="bgColor" :style="'height:'+fullHeight+'px;'"> <div class="login-wrap"> <h1 class="login-title">评测管理员</h1> <div class="login-type-wrap".转载 2020-08-03 17:53:30 · 3740 阅读 · 0 评论 -
使用那各VUE的打印功能(print.js)出现多打印一个空白页的问题
最近这段时间,用VUE写东西,有个打印功能。百度了一下,铺天盖地的VUE打印的两种实现方法。很感激这些千篇一律的帖子,虽然不知道他们是否真的用过,还是只是复制粘贴。至少这些帖子告诉我,是有两个可以选择的,并且多看几篇帖子,总算把这两个打印方法,都试了一遍。下面简单总结一下:先说结论:请使用第二种方法,下载print.js到本地,然后放到项目中导入。原因后边说。一、使用vue-print-nb方法具体的使用这里就不详细说明了,因为网上真的太多太多了。千篇一律的。在本地直接npm安装一下就好。按转载 2020-08-03 15:34:40 · 3481 阅读 · 8 评论 -
火狐浏览器滚动条的样式问题
网上查了很多关于修改火狐浏览器样式的资料,发现千篇一律,能解决问题的可以说没有。当然一番搜寻下来也不是没有收获,为了节省广大前端同学不再耗费时间在这上面,特此记录。解决了在火狐浏览器下滚动条的部分样式问题,当然有更好的解决办法欢迎留言~~~基于webkit的浏览器:/* 滚动条样式 */ ::-webkit-scrollbar{ width: 4px; height: 6px; } ::-webkit-scrollbar-thumb{ border-radius:转载 2020-08-03 11:43:14 · 1363 阅读 · 1 评论 -
js实现二维数组去重
数组中包含数组,怎么去重?比如数组:[[{a:1},{a:1,b:2}],[{a:1}],[{a:1},{a:1,b:2}]]let arr = [[{a:1},{a:1,b:2}],[{a:1}],[{a:1},{a:1,b:2}]]function getUnique(array){ let obj = {} return array.filter((item, index) => { // 防止key重复 let newItem = item + JSON.stringif转载 2020-07-30 11:32:15 · 1587 阅读 · 0 评论 -
移动效果(按轨迹移动)
改写过程是需留意之处:1,点击按钮后,需注销掉所有可能存在的冒泡至document上的各类事件(click, mousedown,mouseup)以及 2 个按钮上的mousedown和mouseup事件2,因为需要直接操作dom元素,所以给元素设置了ref,或许应该使用指令来重构此应用。有时间再说吧。app.vue 代码如下:<template> <div id="app"> <input type="button" :value="val1" @clic转载 2020-07-24 10:36:20 · 505 阅读 · 0 评论 -
js 正则表达式判断正整数
<input type="number" id="places" name="places" max="10000">//js只能输入正整数(不包括负整数和0)var places = $("#places").val();if(!(/(^[1-9]\d*$)/.test(places))){ alert("名额应为正整数"); return}转载 2020-07-23 18:12:31 · 19576 阅读 · 0 评论 -
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
只能慢速拖动的代码:<!DOCTYPE html><html><head> <title>vue结合原生js实现拖动</title><script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script></head><body><div id="app"><div class="ctn ctn1"&g转载 2020-07-16 16:07:51 · 3758 阅读 · 1 评论 -
JS如何判断一个对象是否为空、是否有某个属性
一、js判断一个对象是否为空方法一:let obj1 = {}let obj2 = {a:1}function empty(obj){ for (let key in obj){ return false; //非空} return true; //为空}console.log(empty(obj1)) //true为空console.log(empty(obj2)) //false非空方法二:let obj1 = {}if(JSON.stringi转载 2020-07-16 16:02:12 · 910 阅读 · 0 评论 -
JS实现根据出生年月计算年龄
<script language=javascript> function ages(str) { var r = str.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/); if(r==null)return false; var d= new Date(r[1], r[3]-1, r[4]); .转载 2020-07-15 08:54:39 · 2785 阅读 · 0 评论 -
获取当前日期 前一天 后一天
const unit = { getNowFormatDate:()=>{//获取当前日期 const date = new Date(); const year = date.getFullYear(); const month = date.getMonth() + 1; const day = date.getDate(); return [year, month, day].map(formatNumber).join('-');原创 2020-06-30 16:05:17 · 1195 阅读 · 0 评论 -
js获取当天、前一天的日期
js获取前一天的日期:var time=(new Date).getTime()-24*60*60*1000;var yesterday=new Date(time);var month=yesterday.getMonth();var day=yesterday.getDate();yesterday=yesterday.getFullYear() + "-" + (yesterday.getMonth()> 9 ? (yesterday.getMonth() + 1) : "0" + (转载 2020-06-30 15:56:09 · 6746 阅读 · 0 评论 -
js获取当前时间的前一天/后一天
Date curDate = new Date();当前时间Date curDate = new Date(date);指定时间var preDate = new Date(curDate.getTime() - 24*60*60*1000); //前一天var nextDate = new Date(curDate.getTime() + 24*60*60*1000); //后一天转载 2020-06-30 15:55:17 · 351 阅读 · 0 评论 -
JS根据日期得出星期几
function getweekday(date){var weekArray = new Array(“日”, “一”, “二”, “三”, “四”, “五”, “六”);var week = weekArray[new Date(date).getDay()];//注意此处必须是先new一个Datereturn week;}例如:1、获取系统时间并得出星期var week = weekArray[new Date().getDay()];2、根据给定例如var da = ‘2017-转载 2020-06-30 15:18:44 · 4171 阅读 · 0 评论 -
js获取当前时间,日期格式为年月日
//获取当前时间var date = new Date();var year = date.getFullYear();var month = date.getMonth() + 1;var day = date.getDate();if (month < 10) {month = “0” + month;}if (day < 10) {day = “0” + day;}var nowDate = year + “-” + month + “-” + day;这样控制台输转载 2020-06-30 15:16:14 · 3532 阅读 · 0 评论 -
js 向上取整、向下取整、四舍五入
// 1.只保留整数部分(丢弃小数部分)parseInt(5.1234);// 5// 2.向下取整(<= 该数值的最大整数)和parseInt()一样Math.floor(5.1234);// 5 // 3.向上取整(有小数,整数就+1)Math.ceil(5.1234);// 4.四舍五入(小数部分)Math.round(5.1234);// 5Math.round(5.6789);// 6// 5.绝对值Math.abs(-1);// 1// 6.返回两者中的较大值转载 2020-06-11 18:31:08 · 297 阅读 · 0 评论 -
JavaScript创建二维数组或多维数组
第一种方法:通过数组表达式来创建二维数组var ArrayObj = [ [ 1,2 ], [ 1,2] ];评注:这种方法只适用于已知数值,并且数量极少的情况下使用。第二种方法:通过构造函数来创建二维数组//第一种方式:传递两个Array构造函数到参数中var ArrayObj = new Array(new Array(),new Array()); //第二种方式:传递两个Array表达式到参数中var ArrayObj = new Array([],[]); //第三种转载 2020-06-05 10:55:24 · 1587 阅读 · 0 评论 -
vue实现鼠标移入移出事件
<div class="index_tableTitle clearfix" v-for="(item,index) in table_tit"> <div class="indexItem"> <span :title="item.name">{{item.name}}</span> <span class="mypor"> <i...转载 2020-05-18 12:20:38 · 8498 阅读 · 0 评论 -
关于enter及ctrl_enter换行及发送切换问题
<textarea v-if="submitCommond === 'ctrl'" id="messgae_input" v-model="currentMessage" class="border-none" type="textarea" autofocus rows="7" :readonly="loading" placeholder="请输入内容...转载 2020-01-16 13:09:51 · 1742 阅读 · 0 评论 -
js日常记录
太久没写日常记录function aa(){ var fnode=document.body.lastChild; //document.querySelector('#myDiv') //创建元素节点 var br = document.createElement("br"); //把创建的节点添加到指定节点中 fnode.appendChild(br);//添加一个...原创 2020-01-15 15:27:01 · 131 阅读 · 0 评论 -
js-cookie插件
js-cookie一、安装npm install js-cookie --save二、引用import Cookies from 'js-cookie'三、一般使用存到Cookie去// Create a cookie, valid across the entire site:Cookies.set('name', 'value');// Create a cookie ...转载 2020-01-04 14:19:57 · 154 阅读 · 0 评论 -
Js 删除换行符
mymsg=mymsg.replace(/<\/?.+?>/g,"");//html2txt 去掉html标记 mymsg=mymsg.replace(/\n|\r/g,""); //去掉换行转载 2020-01-04 11:47:52 · 2090 阅读 · 0 评论 -
前端js实现粘贴图片到可编辑的div(其他标签也可)中
输入框中要实现粘贴图片功能,不能用input、textarea等输入框作为父容器,因为input、textarea中只能接受字符串,对于html标签不进行转义以及渲染。所以用contenteditable='true’属性来使div(其他容器也可)实现可编辑,来模拟输入框,实现粘贴图片至输入框中的效果,提交数据给后端的时候可以用form提交,也可用异步提交,form提交的时候将div中的数据全...转载 2020-01-03 11:00:51 · 1243 阅读 · 0 评论 -
Ctrl+v 粘贴图片
我们平常使用QQ或者微信聊天的时候都会用到Ctrl+V来粘贴文字或者图片,显得很理所当然。然而自己写的一个文本框或者文本域却只能粘贴文本,不能粘贴图片,这是为什么呢?因为那个文本框并不是我们平常使用的input标签或者textarea标签,而是一个div。首先我们创建一个div,这个时候div还不可以当做文本框这个时候在div加入contenteditable这个属性,设置为true,那这个...转载 2019-12-31 16:59:33 · 649 阅读 · 1 评论 -
Javascript和jquery事件--鼠标移动事件mousemove
mousemove,一个监听元素上鼠标移动的事件,如果鼠标在元素上移动,大概每16毫秒触发一次。我觉得挺有趣的一个元素,不过有替代还是不太推荐,从这个事件的触发频率就可以看出它会拖慢响应速度,消耗资源。在js中可以使用onmousemove和addEventListener(‘mousemove’,fn)来设置在jq中可以直接绑定mousemove的监听器,也可以使用封装好的函数mousemo...转载 2019-12-28 10:28:44 · 1214 阅读 · 0 评论 -
查看 FormData 中已存在的值
var formData = new FormData(); formData.append('name','bob'); formData.append('sex','male'); formData.append('age','12'); console.log(formData.get('sex')); // obj.get('')转载 2019-12-26 16:55:37 · 1586 阅读 · 0 评论 -
vue ctrl+enter 实现换行
模仿微信enter发送 ctrl+enter 换行template 核心是@keyup.enter.exact 和 @keyup.ctrl.enter<textarea v-if="message.contentType === 1" @keyup.enter.exact="sendMessage" @keyup.ctrl.enter="lineFeed()" class="te...转载 2019-12-23 17:12:31 · 3130 阅读 · 0 评论 -
vue ctrl+enter键盘事件
@keydown="qqq()"qqq(ev){ let oEvent=ev||event; if(oEvent.ctrlKey && oEvent.keyCode){ xxxxxx }},原创 2019-12-23 16:50:01 · 1778 阅读 · 1 评论 -
用JS添加和删除class类名
添加:节点.classList.add(“类名”);删除:节点.classList.remove(“类名”);以tab切换为例:在写tab切换的时候,通常我们会给选中的tab设置不同的样式,常用的方法是给被选中的tab新增一个class名,然后改这个class名的样式。比如 起一个class名叫“active”设置样式.active{ color: #FFD113 !impor...转载 2019-12-05 13:42:46 · 310 阅读 · 0 评论 -
单击页面出现不同颜色小爱心
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script type="text/javascript">//鼠标点击出现...转载 2019-11-29 10:06:42 · 216 阅读 · 0 评论 -
在H5页面中禁止微信分享转发按钮-mugeda
在H5页面中禁止微信分享转发按钮(mugeda)在页面脚本中插入以下代码方法一: 加一段js代码document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() { WeixinJSBridge.call('hideOptionMenu');});方法二:设置微信jssdkwx.config({...转载 2019-11-22 14:50:42 · 1089 阅读 · 1 评论 -
vue h5移动端禁止缩放
安卓在index.html里面写<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">ios在APP.vue里面写<script>window.onload = function() { docume...转载 2019-11-21 15:14:01 · 523 阅读 · 0 评论 -
Vue项目中,防止页面被缩放和放大
现在vue的脚手架生成项目之后我们会发现index.html页面中。在head标签中,我们会看到meta标签中有一条显示是<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">但是我们发现这条语句中只是让user-scalable=0,这是不让用户进行缩放。可以...转载 2019-11-21 15:12:31 · 3881 阅读 · 0 评论 -
js全屏操作之判断全屏
判断浏览器是否支持requestFullscreen首先是一段判断浏览器是否支持h5全屏api(requestFullscreen)的代码,如下 /** * [isFullscreenEnabled 判断全屏模式是否是可用] * @return [支持则返回true,不支持返回false] */ functio...转载 2019-11-14 16:30:40 · 1790 阅读 · 0 评论 -
requestFullScreen元素全屏显示
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #box{ width: 200px; height:200px; background: red...原创 2019-11-14 16:21:25 · 1060 阅读 · 1 评论 -
window的location对象详解
window.location 对象不仅可以获得当前页面的地址 (URL),还能够将浏览器重定向到新的页面。在谷歌中搜索关键词"google",打开chrome的调试工具,在Console一栏中输入window.location,出现如下图所示(包含location的多个属性):接下来以http://www.myurl.com:8866/test?id=123&username=x...转载 2019-11-12 13:17:19 · 495 阅读 · 0 评论 -
JS节点操作和节点属性操作
节点操作1.节点查找document.getElementById,document.getElementByTagName,document.getElementByName ,document.getElementByClassNamedocument.querySelector() 参数为选择器document.forms 选取页面中的所有表单元素2.增加节点增加节点前必须先使用...原创 2019-10-23 09:59:44 · 275 阅读 · 0 评论 -
(a== 1 && a ==2 && a==3)可能为true吗?
(a== 1 && a 2 && a3)有可能返回true吗?答案是可以的valueOf和toString这个问题的一个关键点就是在于利用双等号工作原理,和=有什么区别呢?最主要的就是用的时候会涉及到类型转换,如果双等号两边数据类型不同会尝试将他们转化为同一类型。基础数据类型之间的转换是比较简单的,这里来说一下对象类型在使用==时产生的隐形转换。valueOf...转载 2019-10-22 15:04:53 · 241 阅读 · 0 评论