javascript

最新文章

用bootstrap代码做棋牌游戏网站

思路用bootstrap做棋牌游戏网站首先要引进文件<script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script><link href="css/bootstrap.min.css" rel="styl

nodejs写入json文件--引入fs,是实体写入的

book.json:[{"name":"book1","category":"1","quantity":"27","allowlend":"1"},{"name":"book2","category":"2","quantity":"27","allowlend":"1"},{"name":"book3","category":"3","quantity":"27","allowlend":"1

地方

阿斯顿发放

JavaScript Async/Await和Promise的对比

从Node 8 LTS开始,Node完全支持Async/Await。这里通过示例的方式对比Async/Await和Promise。简单介绍下Async/Await:Async/Await是一种新的编写异步代码的方式。其他方式是回调或者Promise。Async/Await实质是构建在Promise之上,它不能用于纯的回调或者Node.js的回调中。和Promise一样,Async/Await是非阻

JavaScript转换boolean值为数字的几种方法

方法一:三元运算var i = result ? 1 : 0;方法二:+号操作符+ true; // 1+ false; // 0方法三:Number构造函数Number(true)//1Number(false)//0方法四:或运算result | 0;其中,方法一和方法四是相对另两种方法要快。

动态加载JS文件,避免Error : xxx is undefined

我们可以在页面动态添加<script>标签来动态加载js文件:function loadScript(url){ var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.type = 'text/javascript'

浏览器页面间通信新接口BroadcastChannel的用法

Broadcast Channel API允许同源(同一站点)的浏览器上下文(包括窗口,标签,框架或iframe)之间的简单通信。通信的方式如图: 用法构建channelvar bc = new BroadcastChannel('test_channel');test_channel参数用来指定channel的名称,连接到相同名称的BroadcastChannel,可

ES6简化版的JavaScript中间件模式的实现

JavaScript中间件模式的目的是分解前端业务逻辑,通过next方法层层传递给下一个业务。比较经典的是express和koa。这是使用ES6实现的一个简版的中间件模式:class Middleware { use(fn) { this.go = (stack => next => stack(fn.bind(this, next.bind(this))))(this.go)

JavaScript检测Chrome浏览器是否在隐身窗口

浏览器在隐身模式下,它的FileSystem API是禁用的,可以通过检测FileSystem API来判断浏览器是否在隐身窗口。function isIncognito() {  var fs = window.RequestFileSystem || window.webkitRequestFileSystem;

JavaScript停止setInterval的执行

setInterval()是会返回一个interval id,可以调用clearInterval()来停止setInterval()的执行:var refreshIntervalId = setInterval(fname, 10000); /* 在不需要执行Interval */ clearInterval(refreshI

JavaScript获取Object类名的几种方法

有以下几种方法可以用来获取Object的类名:typeofinstanceofobj.constructorfunc.prototype, proto.isPrototypeOffunc.name(ES6)使用示例:function Foo() {} var foo = new Foo(); typeof Foo; 

Laravel使用laracasts/utilities转换PHP变量为JavaScript变量

laracasts/utilities是开源的项目,项目地址:https://github.com/laracasts/PHP-Vars-To-Js-Transformer。它提供了将PHP变量转换为JavaScript变量的工具。安装使用composer安装:composer require laracasts/utilities Laravel 4: 安

JavaScript计算点到线的最短距离

点到线的最短距离实际上就是点到线的垂直距离。点坐标为(x,y),取线上的两点(x1,y1)和(x2,y2)来计算它们的距离。/** * 点到线的最短距离实际上就是点到线的垂直距离。 * (x,y)为点的坐标 * (x1,y1)为线段上点的坐标 * (x2,y2)为线段另外一点的坐标 */ function distanceOfPoint2Line(x, y, x1, y1,

IndexDB快速入门

IndexDB是适用于浏览器的文档数据库,它有以下特点:兼容所有现代的浏览器支持事务以及版本控制支持无限数量的数据。很多浏览器会限定localStorage或者sessionStorage的存储空间为2M到10MIndexDB是异步的API,它不会阻塞浏览器UI的渲染下面介绍下它的使用。安装依赖包idb需要把idb的js库添加到依赖。有几种方式添加idb到依赖。yarnyarn add&

JavaScript 图片与Base64数据互相转换脚本

图片转换为Base64数据方法一:非Html 5使用FileReader使用XMLHttpRequest将图像加载为blob,接着使用FileReader API将其转换为dataURL。function toDataURL(url, callback) {   var xhr = new 

React Router 4 表单提交后重定向示例

表单设置fireRedirect为发起从定向的标记,当表单提交后,更新它的值为fireRedirect=true。当fireRedirect为true时,重定向到原来的页面。import React, { Component } from 'react' import { Redirect } from 'react-router' export default class MyForm

html给文本输入框添加自定义的清除按钮

使用HTML 5,如果对清除按钮的样式不介意的话,可以使用search类型的输入框,它会提供一个默认的清除按钮<input type="search" placeholder="搜索" /> 如果想自定义清除按钮,则需要自己实现,这里使用jquery给出一个实现的方案:<!DOCTYPE h

JavaScript(ES6/ES6之前)对函数参数设置默认值

ES6对函数参数设置默认值使用=号对参数设置默认值function myfunc(message, flag = false) {   // Code } myfunc("hello"); 当flag没有传递值时,默认为false也可以使用解构赋值:function myfunc({&n

FastClick用法

为什么要使用FastClick移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击。为了能够立即响应用户的点击事件,才有了FastClick。项目地址:https://github.com/ftlabs/fastclickFastClick的使用安装fastclick安装fastclick可以使用npm,Component和Bower。另外也提供

纯JavaScript检测页面是否加载完成(理解JavaScript页面加载事件)

JavaScript与页面加载相关的事件先介绍JavaScript与页面加载相关的几个事件:document.readystatechangereadystatechage事件会监控document.readyState。readyState有三个值:loading:文档正在加载interactive:文档已加载完成且已被解析,但子资源(如image,css,iframe等)仍在加载。comple

JavaScript版身份证验证

这是用于验证身份证的工具函数,支持15位或18位省份证。/** * 身份证号码结构: * * 根据〖中华人民共和国国家标准GB11643-1999〗中有关公民身份号码的规定,公民身份号码是特征组合码,由十七位数字本体码和一位数字校验码组成。 * 排列顺序从左至右依次为:6位数字地址码,8位数字出生日期码,3位数字顺序码和1位数字校验码。 * * 地址码(前6位):表示对

Javascript检测开发者工具Devtools是否打开(Chrome/Firefox/IE)

首先要确定一点:是没有统一标准的方法来检测各个浏览器的devtools是否打开。所以只能针对不同的浏览器使用不同的方案,当然随着浏览器能的升级,有可能目前的方案也是会不适用的。这里列出目前各个浏览器可用的方案。方案一console.log隐式调用元素的idfunction isDevToolsOpened() {  var opened = fal

ES6 函数使用解构赋值(Destructuring )的几点好处

解构赋值(Destructuring )是ES6新增的特性。使用解构赋值有以下几点好处:命名参数设置默认参数多个返回值命名参数在传统的函数定义如下:function findUsersByRole (   role,    withContactInfo,    includeInactive )&

JavaScript里null与undefined的区别与相似点

初次看,null和undefined看似是一样的,但远非如此。 本文将探讨JavaScript中null和undefined的区别和相似之处。null是什么?有两个你应该理解的null特性:null是空的或不存在的值。null必须显式赋值。将null的值赋给a示例:let a = null; console.log(a); // 输出null un

JavaScript ES6扩展运算符(...)用例

ES6新增了扩展运算符,它的语法很简单,使用三个点号表示“...”。它的作用是把数组展开为类似用逗号隔开的参数列表。这里介绍几种用例来理解扩展运算符的使用。用例1:插入数组如果我们要在一个数组插入另外一个数组的元素,可以结合splice和apply使用,如:a1 = [1,2,5,6,7]; a2 = [3,4]; a1.splice.apply(a1,&n

PC端禁止页面缩放(原生JavaScript)

在PC端缩放浏览器的页面主要有三种方式:Ctrl + (+/-)组合Ctrl + 鼠标轮滑浏览器菜单我们是禁止不了用户通过浏览器缩放页面,只能通过对有键盘或鼠标事件的快捷方式做监控,从而实现禁止缩放的快捷方式。禁止Ctrl + (+/-)组合document.addEventListener('keydown', functio

JavaScript删除数组里重复的元素

JavaScript里有多种方法可以用来对数组元素去重。ES6 SetES6提供了一个Set对象,用它可以很简单便可以对数组元素去重。function uniq(arr) {    return Array.from(new Set(arr)); } filter另外也可以通过filter来对数组元素去重。functi

JavaScript检查Date对象是否为Invalid Date

使用Date()构造日期对象,如果传入非日期格式的字符串,仍然能构造出Date对象。在chrome控制台>var date = new Date("hello"); >date Invalid Date >typeof date “object” >date instanceof&nb

JavaScript使用Date.parse()或new Date()解析字符串日期的格式要求

在JavaScript里,Date.parse()会接收一个字符串作为参数,根据字符串格式返回:如果字符串符合日期格式,返回自1970-01-01 00:00:00 UTC时间起的毫秒数。如果字符串不符合格式,返回NaN。new Date(str),构造函数也可以接收一个字符串作为参数,把字符串转换为表示的日期。构造的日期对象为:如果字符串符合日期格式,返回自1970