JavaScript / jQuery
关注
分享
扫一扫
前端开发黑子Kuroko
热爱前端开发，不常看消息，有事卫星联系：mnikay
展开
-
前端常用数据处理方法
本文主要介绍的是项目开发过程中使用频率较高的一些数据处理方法，其他一些使用频率不高的方法就不在此处多做介绍了，有兴趣的同学可以自行延伸探索哦~数据类型值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol引用数据类型：对象(Object)、数组(Array)、函数(Function)两者区...原创 2020-02-06 19:24:01 · 4824 阅读 · 0 评论 -
JS操作滚动条置顶+动画效果
一、最实用方法：window.scrollTo({ top: 0, behavior: "smooth" });调用 scrollTo 方法，并设置 behavior 动画效果。等同于自己手动设置元素的 scrollTop = 0window.scrollTo 说明：语法1: window.scrollTo(x-coord,y-coord)x-c...原创 2019-10-14 11:38:11 · 7268 阅读 · 1 评论 -
浏览器全屏效果
直接上代码： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>浏览器全屏设置</title></head><body>&a原创 2016-03-23 16:57:49 · 811 阅读 · 0 评论 -
Js 实现字数限制，超出部分显示为省略号
实现效果图 ↑ 实现代码 ↓ var oldText = magazineBook02Panel01.text; if (oldText.length > 7) { var newText = oldText.substring(0,5)+"..."; magazineBook02Panel01.setText(newText); } ...原创 2016-11-04 17:42:08 · 16208 阅读 · 0 评论 -
如何将 String类型 转换为日期格式 Date类型
有时候后台返回的日期值是这么一串数字："20161101000000000"这时如果要format日期格式（"2016-11-01"）的话，我们首先需要将它转换为日期格式，具体实现方法可以写一个通用函数，代码如下： <span style="font-size:18px;">Ext.ux.formatDate = function(dateString){ v...原创 2016-11-07 15:15:02 · 10477 阅读 · 0 评论 -
【笔记】js运算符
比较运算符：== 等于=== 全等于（值和类型）!= 不等于> 大于< 小于>= 大于或等于<= 小于或等于 逻辑运算符：&& 且and|| 或or! 非not 参考：JavaScript 比较和逻辑...原创 2016-12-02 16:02:11 · 635 阅读 · 0 评论 -
js弹窗的3种方式：alert、confirm、prompt
先上代码： <!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&..转载 2016-12-02 16:12:40 · 14258 阅读 · 0 评论 -
JS 键盘监听事件 enter 13
var ie;if (document.all) ie = true; else ie = false; //判断是否IEdocument.onkeydown = KeyPress; //设置键盘事件函数function KeyPress(){ var key; if (ie) key = event.keyCode; //ie获取键盘值 else key = KeyPre...原创 2017-03-21 16:18:22 · 1760 阅读 · 0 评论 -
javascript 中的nextSibling和previousSibling使用注意事项
firstChild,lastChild,nextSibling,previousSibling都会将空格或者换行当做节点处理，但是有代替属性所以为了准确地找到相应的元素，会用firstElementChild,lastElementChild,nextElementSibling,previousElementSibling兼容的写法，这是JavaScript自带的属性。但坏消...转载 2017-03-21 16:22:58 · 1186 阅读 · 0 评论 -
js中 数组的操作 push()，pop()，shift()，unshift() 简介
JS中的数组提供了四个操作，以便让我们实现队列与堆栈！小理论：队列：先进先出堆栈：后进先出实现队列的方法：shift:从集合中把第一个元素删除，并返回这个元素的值。unshift: 在集合开头添加一个或更多元素，并返回新的长度push:在集合中添加元素，并返回新的长度pop:从集合中把最后一个元素删除，并返回这个元素的值。 1， push()和po...转载 2017-03-23 11:22:03 · 13623 阅读 · 1 评论 -
js 兼容性之阻止事件冒泡传递
var btn = document.getElementById("btn");btn.onclick = function(event){ alert('clicked'); event.stopPropagation();}转载 2017-03-23 16:14:16 · 703 阅读 · 0 评论 -
通过JS语句判断WEB网站的访问端是电脑还是手机
<script type="text/javascript"> var system = { win: false, mac: false, x11: false, ipad:false }; var p = navigator.platform; system.win = p.indexOf("Win") == 0; sy...原创 2017-03-23 23:13:03 · 630 阅读 · 0 评论 -
js 监听移动端web触屏事件 滑动响应
直接上例子，以vue应用为例：html: <ul> <li v-for="item in items" :class="{finished:item.isFinished}" @click="toggleFinish(item)" @touchstart="touchstart()" @touchmove="touchmove(item)&quo原创 2017-03-24 16:48:24 · 4714 阅读 · 0 评论 -
js如何获取当前时间 并格式化
先添加格式化的方法：Date.prototype.format = function(fmt) { var o = { "M+" : this.getMonth()+1, //月份 "d+" : this.getDate(), //日 "h+" : t...原创 2016-10-18 16:05:20 · 9407 阅读 · 2 评论 -
js 回车事件兼容多个浏览器
html中： <body onkeydown="keyLogin(event);"> 注意：此处是一个传参函数，参数必须是 event js中： function keyLogin(event) { var browser = navigator.appName; var userAgent = navigator.userAgen...原创 2016-03-24 13:43:43 · 1958 阅读 · 2 评论 -
前端实现json数据格式化展示
1. 故事前景：后端返回给前端一串json字符串，前端需要做格式化处理并将其美观地展示给用户。2. 效果演示：3. 实现代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" conte...原创 2019-05-23 22:26:53 · 20186 阅读 · 6 评论 -
js报错类型（6种错误类型）
js中的控制台的报错信息主要分为两大类，第一类是语法错误，这一类错误在预解析的过程中如果遇到，就会导致整个js文件都无法执行。另一类错误统称为异常，这一类的错误会导致在错误出现的那一行之后的代码无法执行，但在那一行之前的代码不会受到影响。SyntaxError// SyntaxError: 语法错误// 1) 变量名不符合规范var 1 // Uncaught Syntax...原创 2019-03-08 15:31:21 · 7270 阅读 · 2 评论 -
js判断手机端和pc端以及微信浏览器
方法一：if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) { console.log('this is wap');} else { console.log('this is pc');} 方法二：var sUserAgent = navigator.userAgent...原创 2019-01-11 05:27:55 · 2446 阅读 · 0 评论 -
js接收客户端base64图片转换Blob
大致场景就是前端通过jsBridge获取客户端返回的base64图片数据，然后将base64的数据转为Blob图片，然后拿着这个Blob图片文件上传到阿里云去！对，就是这个意思，接下来请欣赏项目中滴代码：// 将以base64的图片url数据转换为BlobconvertBase64UrlToBlob(urlData) { var binary = atob(urlData) ...原创 2018-12-22 15:17:13 · 3119 阅读 · 0 评论 -
Javascript函数节流 —— How To Use Throttle
为限制输入框change事件疯狂发送查询请求，此时我们就需要用一个节流函数来优化一下性能了。大致思路：设置一个定时器，在指定时间间隔内运行代码时重置定时器，直到函数请求停止，函数才会在限定时间之后才会正式执行。实际项目中，将节流函数挂载到vue原型上，方便调用，例 main.js 中：// 写一个节流函数Vue.prototype.$throttle = (method) =>...原创 2018-12-22 14:25:57 · 1025 阅读 · 0 评论 -
控制台实现js发起http请求 —— AJAX 实例解析
此处以一个简单的测试用户登录接口为例。。。如果一个网站的登录模块设计的很简单的话，可以通过不断发起请求去测试一个账号的密码。。。// 第一步：创建 XMLHttpRequest 对象var xmlhttp;if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp =...原创 2018-11-09 11:23:25 · 5572 阅读 · 0 评论 -
2048小游戏——网页版（基础篇）
这是一个用js写的网页版2048游戏，实现2048游戏的基本功能。 比如：绘制网格、随机生成数字、动画移动数字、累计分数、重置游戏等。同时，笔者在自己的理解下，对代码进行了非常详细的注释，相信有一点点基础的开发人员都能迅速看懂，快来试试吧！当然，大神还可以在这个文档的基础上对游戏进行改进，比如添加一些更炫酷的动画效果，自定义数字、文字、图像等。 该项目的所有代码已上传，...原创 2016-03-07 16:26:29 · 12957 阅读 · 4 评论 -
2048小游戏——网页版（提高篇）
出于之前的承诺，还是含着泪来总结一下2048改进版的代码吧！2048小游戏——网页版（提高篇）：主要是想对该游戏进行一个改进，2048的数字换成图片、支持手机端的滑动操作等。 并没有换图片，也没有做滑动设置，感觉那个没什么卵用。所以这次的主要改进：①屏幕适配；②数字换成文字；③界面优化。 同样的，我把该项目的所有代码已上传，欢迎下载：点击打开链接 先对比一下界面：...原创 2016-03-16 17:01:00 · 3984 阅读 · 3 评论 -
JS中如何输出空格
在写JS代码的时候，大家可以会发现这样现象:document.write(" 1 2 3 ");结果: 1 2 3无论在输出的内容中什么位置有多少个空格，显示的结果好像只有一个空格。这是因为浏览器显示机制，对手动敲入的空格，将连续多个空格显示成1个空格。 解决方法:1. 使用输出html标签&nbsp;来解决 d...转载 2016-03-21 14:15:36 · 954 阅读 · 0 评论 -
【解决方案】如何实现在HTML页面加载完毕后运行某个js
前景：今天在开发过程中，发现我js文件里面的方法没有响应，后来发现是js在html中引入的位置不对。我在head中加载了js，导致我js中的document.getElementById方法失效。因为html中是按顺序读取运行的，那么head中的js是无法获取后者body中的元素，导致document.getElementById 找不到相应的id对象，自然没法执行之后的方法（function...原创 2016-03-23 15:04:53 · 21955 阅读 · 1 评论 -
extjs/jquery/js 操作页面滚动条
首先，滚动条操作针对的对象是 element 对象。 假设要对一个 id 为 content 的 ext 对象实现滚动至底部的效果：var content = Ext.getCmp("content");var el = content .body;var dom = content .body.dom;var id = content .body.dom.id; ...原创 2017-04-28 16:48:45 · 1944 阅读 · 0 评论 -
js遍历map对象
直接先看实际案例。当请求得到的数据不是json对象，而是map对象如理方式如下： var map = result.data.map; var infoText = "共有"; var i = 0; ...原创 2017-06-14 17:14:44 · 13342 阅读 · 0 评论 -
js实现全角半角检测的方法
//全角半角校验 function issbccase(strTmp) { for (var i=0; i<strTmp.length; i++) { if (strTmp.charCodeAt(i) > 128){ return true; break; } } return false; }控制台测试： va...转载 2017-07-04 19:37:27 · 6184 阅读 · 0 评论 -
利用js实现禁用浏览器后退
禁用浏览器后退键的神代码：history.pushState(null, null, document.URL)window.addEventListener('popstate', function () { history.pushState(null, null, document.URL)})原文：点击打开链接...转载 2018-05-14 09:11:19 · 695 阅读 · 0 评论 -
js 判断一个 object 对象是否为空
本文仅介绍最好用的两种判断方法：1、JSON.stringify(a) === '{}'2、Object.keys(a).length === 0例子：参考链接：js判断一个object对象是否为空原创 2018-05-30 19:20:58 · 7788 阅读 · 0 评论 -
js隐藏手机号码中间
案例代码如下： // 判断是否为11位的纯数字 if (Number(cellValue) && String(cellValue).length === 11) { var mobile = String(cellValue) var reg = /^(\d{3})\d{4}(\d{4})$/ return...原创 2018-06-12 10:24:31 · 9082 阅读 · 3 评论 -
花式输出！玩转console.log
一、console.log格式化打印console.log格式化这一用法一般都在个人博客或其他官网上有，当F12查看网页元素时，在控制台(console)那里偶尔会发现一些个性化的输出，感觉很奇特很好玩，其实现原理不难看一遍就晓得，具体实现如下 1、%c表示css样式 console.log('%c hello world', 'color: red;font-size...转载 2018-07-13 11:23:06 · 3859 阅读 · 0 评论 -
CSDN博客去广告-谷歌插件
关键代码：document.getElementsByClassName("box-box-large")[0] && document.getElementsByClassName("box-box-large")[0].remove();document.getElementsByClassName("csdn-tracking-statistics mb8 box-s...原创 2018-07-13 11:35:56 · 3038 阅读 · 9 评论 -
【解决方案】js小数运算出现多位小数问题
一、问题描述在一次后台返回数据进行百分率转换过程中，出现部分数据显示异常，比如：二、解决方案1、最快最简便的方法 直接调用 toFixed() 函数进行四舍五入为指定小数位数的数字。2、也可以通过操作字符串来进行计算或拼接，具体自行探索。三、问题原因浮点数值的最高进度是17位小数，但在进行运算的时候其精确度却远远不如整数；整数在进行运算的时候都会转成10进制； 而Jav...原创 2018-08-02 17:50:54 · 2181 阅读 · 0 评论 -
rem的正确使用姿势 -- 完美解决H5页面不同尺寸屏幕的适配问题
实例代码：<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>废土坱行&a原创 2018-10-13 15:46:26 · 10569 阅读 · 1 评论 -
【问题记录】控制台解析preview和response数据不一致→解决JS处理后台返回的Long型数据精度丢失
问题描述：后端返回数据preview和response不一致（翻译成专业术语就是：JS处理后台返回的Long型数据精度丢失）问题分析：JS在处理返回数据类型是Long的时候，精度会丢失一部分！！！问题原因：JS内置有32位整数，而number类型的安全整数是53位。如果超过53位，则精度会丢失。正如现在后台传来一个64位的Long型整数，因此超过了53位，所以后台返回的...原创 2018-08-31 17:53:48 · 6396 阅读 · 0 评论 -
日期相关操作
Date对象：是操作日期和时间的对象。Date对象对日期和时间的操作只能通过方法。时间戳：是指格林威治时间自1970年1月1日（00:00:00 GMT）至当前时间的总秒数。它也被称为Unix时间戳（Unix Timestamp）。通俗的讲，时间戳是一份能够表示一份数据在一个特定时间点已经存在的完整的可验证的数据。构造函数：new Date() 用于获取当前的本地时间。实例方法：get...原创 2018-09-08 17:17:32 · 349 阅读 · 0 评论 -
JS数据类型转换小技巧
X + '' // 等价于 String(X) +X // 等价于 Number(X),也可以写成 x-0 !!X // 等价于 Boolean(X)转载 2018-09-18 09:29:04 · 483 阅读 · 0 评论 -
【解决方案】jison解决JS处理后台返回的Long型数据精度丢失
问题描述：这是一个经典的js连个long类型都搞不定的问题，网上很多暴露该问题的解决方案大都是让后端把该字段改为string类型。比如我之前也是这样做的：【问题记录】控制台解析preview和response数据不一致→解决JS处理后台返回的Long型数据精度丢失没过多久，在网上看到了另一种稀有的处理方式——jison，号称“bison in javascript”，意思是js的一头野...原创 2018-09-20 14:02:27 · 14515 阅读 · 10 评论 -
时间戳转换函数
函数如下：function fmtDate(obj){ obj = (typeof(obj) == "number") ? obj : Number(obj); var date = new Date(obj); var y = 1900+date.getYear(); var m = "0"+(date.getMon...原创 2018-03-09 13:14:06 · 1108 阅读 · 0 评论