javascript技巧

使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)

2020-06-03
效果图展示,感觉不错可以参考实例代码. 具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document

微信小程序多列表渲染数据开关互不影响的实现

2020-06-03
最近在学习小程序,正好发现一个问题,微信小程序多列表渲染数据开关怎么互不影响,记录一下,分享给大家 <!--pages/list/list.wxml--> <wxs src="../../utils/filter.wxs" module="filter" /> <view class="list"> <view wx:for="{{list}}" wx:key="{{inde

JS删除数组指定值常用方法详解

2020-06-03
一. 删除数组中所有指定值 先看一种危险的方式: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script type="text/javascript"> window.onload = function() { var arr = [

JavaScript监听键盘事件代码实现

2020-06-03
在写网页的时候,常常需要监听键盘事件,让我们来看看如何实现吧. 监听方式 键盘事件往往是全局监听,设监听的函数为keyboard(). keyup事件类型.该类型触发条件为按键按下去并松开. //长按并松开只触发一次 document.addEventListener('keyup', keyboard); document.onkeyup = keyboard; //记得不要加括号! keydown事件类型.该类型触发条件为按键按下去. //长按可以触发多次 document.addEvent

JS+canvas五子棋人机对战实现步骤详解

2020-06-02
1. 创建实例 function Gobang () { this.over = false; // 是否结束 this.player = true; // true:我 false:电脑 this.allChesses = []; // 所有棋子 this.existChesses = [] // 已经落下的棋子 this.winsCount = 0; // 赢法总数 this.wins = []; // 所有赢法统计 this.myWins = []; //我的赢法统计 this.compu

JavaScript字符和ASCII实现互相转换

2020-06-02
在处理字符时,有时需要和ASCII码相互转换,博主便简单整理了一篇. 字符转ASCII 需要用变量的方法(js自带函数). 单个字符转ASCII let x = 'a'; x.charCodeAt(); //会输出'a'的ASCII码,即97 字符串转ASCII let x = 'abc'; //x必须严格为char类型 //若x = 1,会报错,而不会转换成'1' x.charCodeAt(1); //会输出x[1],即'b'的ASCII码,即98 x.charCodeAt(0,1); //只

js实现无刷新监听URL的变化示例代码详解

2020-06-02
无刷新改变路由的两种方法通过hash改变路由 代码 window.location.hash='edit' 效果 http://xxxx/#edit 通过history改变路由 history.back(): 返回浏览器会话历史中的上一页,跟浏览器的回退按钮功能相同 history.forward():指向浏览器会话历史中的下一页,跟浏览器的前进按钮相同 history.go(): 可以跳转到浏览器会话历史中的指定的某一个记录页 history.pushState()可以将给定的数据压入到浏览器

Paypal支付不完全指北

2020-06-01
啥都不说,先吐槽 Paypal 真心坑爹,跟国内支付完全没法比,能不接入就不接入吧!!! 准备工作 重要事情 Paypal下单支付后,需要主动跟paypal确认收款(capture),否则该笔订单并不是完成状态!!! 账号 自己前往Paypal develop注册一个吧,注意区分沙箱(sandbox)和正式(live)账号即可. 用沙盒账号开发,还可以创建多个沙盒的paypal账号,可以用于沙盒测试支付. 下单方式 跟国内的支付宝和微信有区别,paypal可以直接在客户端下单. 支持客服端.服务

bootstrap-table后端分页功能完整实例

2020-06-01
本文实例讲述了bootstrap-table后端分页功能.分享给大家供大家参考,具体如下: 使用bootstrap-table实现后台分页 插件资源点击此处本站下载. 引用以下css <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css" rel="external nofollow" > <link rel="styleshee

JS如何寻找数组中心索引过程解析

2020-05-31
给定一个整数类型的数组 nums,请编写一个能够返回数组"中心索引"的方法. 我们是这样定义数组中心索引的:数组中心索引的左侧所有元素相加的和等于右侧所有元素相加的和. 如果数组不存在中心索引,那么我们应该返回 -1.如果数组有多个中心索引,那么我们应该返回最靠近左边的那一个. 示例 1: 输入: nums = [1, 7, 3, 6, 5, 6] 输出: 3 解释: 索引3 (nums[3] = 6) 的左侧数之和(1 + 7 + 3 = 11),与右侧数之和(5 + 6 = 11)

Bootstrap table 服务器端分页功能实现方法示例

2020-05-31
本文实例讲述了Bootstrap table 服务器端分页功能实现方法.分享给大家供大家参考,具体如下: bootstrap版本 为 3.X bootstrap-table.min.css bootstrap-table-zh-CN.min.js bootstrap-table.min.js 前端bootstrap+jQuery,服务端使用spring MVC实现restful风格服务 前端代码块 <table id="test-table" class="col-xs

微信小程序开发(一):服务器获取数据列表渲染操作示例

2020-05-31
本文实例讲述了微信小程序服务器获取数据列表渲染操作.分享给大家供大家参考,具体如下: 在实际项目开发中,有很多时候,前台页面的数据需要后台服务器传递过来.而前台需要循环铺值,类似如下页面: 请求后台数据: wx.request({ url: getApp().globalData.httpUrl + '/sys/group/selectGroupProList', //请求后台地址 data: { //请求后台的分页数据 pageNum: that.data.page, pageSize: th

使用原生JS实现滚轮翻页效果的示例代码

2020-05-31
一.滚轮事件 当用户通过鼠标滚轮与页面交互.在垂直方向上滚动页面时,就会触发mousewheel事件,这个事件就是实现全屏切换效果需要用到的.在IE6, IE7, IE8, Opera 10+, Safari 5+中,都提供了 "mousewheel" 事件,而 Firefox 3.5+ 中提供了一个等同的事件:"DOMMouseScroll".与mousewheel事件对应的event对象中我们还会用到另一个特殊属性-wheelDelta属性. 1."m

详解Typescript 内置的模块导入兼容方式

2020-05-30
一.前言 前端的模块化规范包括 commonJS.AMD.CMD 和 ES6.其中 AMD 和 CMD 可以说是过渡期的产物,目前较为常见的是commonJS 和 ES6.在 TS 中这两种模块化方案的混用,往往会出现一些意想不到的问题. 二.import * as 考虑到兼容性,我们一般会将代码编译为 es5 标准,于是 tsconfig.json 会有以下配置: { "compilerOptions": { "module": "commonjs&qu

微信小程序调用wx.getImageInfo遇到的坑解决

2020-05-30
这几天做到微信小程序详情页分享的功能,需要把原页面的一些参数带到分享页,然后在分享页需要获取图片的宽高等基本信息. 1.先说分享传参的方式: 在onShareAppMessage方法里面返回的path里面可以带参数传过去,具体传参的方式有两种,一种是可以传对象(需要把JSON对象stringiny),另外一种是通过一般的参数拼接的方式一个个拼. 代码: onShareAppMessage: function (res) { let data = this.data; let shareParam

JS实现前端动态分页码代码实例

2020-05-30
思路分析:有3种情况 第一种情况,当前页面curPage < 4 第二种情况,当前页面curPage == 4 第三种情况,当前页面curPage>4 此外,还要考虑,当前页码 curPage < pageTotal(总页码)-2,才显示 ... 首先,先是前端的布局样式 <body> /*首先,在body中添加div id="pagination" */ <div id="pagination"> <!-- 后面会在

JavaScript forEach中return失效问题解决方案

2020-05-30
在最近学习并使用ES6过程中,在一次循环数组并且作判断时返回值无效,return拿到的结果是undefined 我们分别使用for循环和forEach方法来验证: 结果:for循环里的可以return终止遍历,forEach里的return不能终止遍历 以上是return终止for循环的遍历和forEach循环的遍历测试. -------------------------------------------------------------- 分 割 线 ------------------

JavaScript类的继承多种实现方法

2020-05-30
类的继承 1 子承父业 extends(继承父类的普通函数)(方法) class Father { constructor() { } money() { console.log(100); } } class Son extends Father { } class sunzi extends Son { } var yxf = new Father; var lbw = new Son; var bb = new sunzi; console.log(yxf.money()); consol

原生JS封装拖动验证滑块的实现代码示例

2020-05-29
前言 星期六闲着没事,就想着写写原生js玩玩,在网上看了几个效果后决定做这个效果,并且使用了prototype和eventEmitter封装成了库. 最终效果 分析 看到这个效果我们首先应该想到和拖动有关的api: onmousedown, onmousemove, onmouseup 其次要支持用户传入放置这个组件的dom元素和完成的回调事件. 最终如何使用? 我们先来看下使用方式,再来决定我们怎么编写这个库 具体使用就是这样的,我们还想用户能通过import等方式使用,所以我们就要支持esM

react结合bootstrap实现评论功能

2020-05-29
本文实例为大家分享了react结合bootstrap实现评论功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://unpkg.com/react@15.3.2/dist/react.j