利用javeScript对象以及方法实现的网页弹球游戏,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <tilie>呼呼哈嘿的网页弹球</title> </head> <body> <canvas id="canvas"width="400"height="400"></canvas> <scr
javascript技巧
javaScript实现网页版的弹球游戏
小程序原生实现左滑抽屉菜单
目录 WXS 响应事件 方案A 页面结构和样式 WXS 事件回调函数 WXS 脚本 遮罩层 方案B 为什么要使用 WXS 结语 & 参考资料 参考资料: 在移动端,侧滑菜单是一个很常用的组件(通常称作 Drawer,抽屉).因为现在手机屏幕太大,点击角落的菜单按钮明显不如在屏幕中间滑动方便. 相比其他平台,小程序的组件库支持明显还不够完善,各个框架也还不太成熟.由于之前使用框架的过程中被各种神秘bug搞的头秃,还是用回了原生环境. 最近研究了一下如何在原生框架中实现滑动抽屉菜单效果,本来以为很麻
JavaScript之事件循环案例讲解
js中的事件循环 因为JavaScript是单线程的,同一事件只能执行一种方法,所以会将程序中的方法加入到执行栈中按照后进先出的顺序依次执行,当遇见异步任务时不会被阻塞,而是将任务放入事件队列中,继续执行执行栈中的同步代码,等当前执行栈中的所有任务都执行完毕则查找事件队列中的任务,并把任务的回调函数放入执行栈中,执行其中的同步代码,如此反复形成的循环被称为事件循环. node.js node.js特点 事件驱动 从上向下执行代码,当遇到需要回调的地方就加入到事件队列中,主线程运行完就去执行事件队
JavaScript实现网页贪吃蛇游戏
本文实例为大家分享了JavaScript实现网页贪吃蛇游戏的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head><title>贪吃蛇</title> </head> <body> <canvas id="canvas" width="400" height="400"></canvas> <s
JS超出精度数字问题的解决方法
精度问题最通俗易懂的解释 比如一个数 1÷3=0.33333333...... 大家都知道3会一直无限循环,数学可以表示,但是计算机要存储,方便下次取出来再使用,但0.333333...... 这个数 无限循环,你让计算机怎么存储?计算机再大的内存它也存不下,对吧! 所以不能存储一个相对于数学来说的值,只能存储一个近似值,所以当计算机存储后再取出来用时就会出现精度问题. JS超出精度数字解决 一.js 最大安全数字是 Math.pow(2,53) - 1,超出这个数字相加会出现精度丢失问题,可通
js实现0ms延时定时器的几种方式
目录 queueMicrotask async/await MessageChannel 最后 附录 这两天看到一篇介绍<如何实现准时的 setTimeout?>的文章,文章起源于一道面试题:有什么办法让setTimeout准时呀?具体文章内容可查看附录[1],看完之后,引起了我对setTimeout这个函数的探究兴趣,因此在MDN上重新查阅了相关文档,其中提到[最小延时 >=4ms]的一点,因此使用setTimeout不能实现0ms延时的定时器,如果要实现的话,提供了一个参考链接[2]
js日期时间格式化的方法实例
js日期时间格式化 将日期时间转换为指定格式,如:YYYY-mm-dd HH:MM表示2019-06-06 19:45 function dateFormat(fmt, date) { let ret; const opt = { "Y+": date.getFullYear().toString(), // 年 "m+": (date.getMonth() + 1).toString(), // 月 "d+": date.getDate().t
JavaScript分页组件使用方法详解
分页组件是web开发中常见的组件,请完成pagination函数,在id为jsPagination的DOM元素中完成分页的显示部分,需求如下 1.最多连续显示5页,居中高亮显示current页(如demo1所示) 2.total为0时,隐藏整个元素(如demo2所示) 3.如果total<=5,则显示全部页数,隐藏"首页"和"末页"元素(如demo3所示) 4.当current居中不足5页,向后(前)补足5页,隐藏"首页"("末页
JavaScript css3实现简单视频弹幕功能
本文尝试写了一个demo模拟了最简单的视频弹幕功能. 思路: 设置一个<div>和所播放的video的大小一致,把这个div标签蒙在video上面用于放置弹幕.在video的右边放一个<ul>列表用于显示弹幕列表. 屏幕上面的弹幕,把内容放在<span>标签里面,一般一行字都是从左边飞到右边, 为了简单起见,这个移动就用了CSS3 的transition 属性.position设置为absolute, 那么就用的transition过度left属性,实现弹幕的移动.当然
微信小程序实现九宫格效果
本文实例为大家分享了微信小程序实现九宫格效果的具体代码,供大家参考,具体内容如下 1.九宫格实现示例图: Tips: 说明: 使用 display: -webkit-flex;对布局做兼容. 保证每排三个图标的两对对齐,采用:justify-content: space-between;属性. 父元素必须设置 flex-wrap: wrap;属性进行换行,否则会在一排展示. 个子元素的宽度width: 33.33333333%;按照其占位大小分配. 使用justify-content:cente
webpack的移动端适配方案小结
目录 rem vw 适配第三方UI框架 结语 在移动端开发的过程中,一个最常见的问题就是适配不同的屏幕宽度.目前比较常见的适配方案有rem和vw,它们都是css中的相对单位. rem W3C对rem的定义是 font-size of the root element,它是一个只相对于浏览器的根元素(HTML元素)的font-size的来确定的单位,也就是说对于不同宽度的机型,我们只需要计算出对应的根元素的字体大小,用同样的css代码可以实现等比适配.考虑最简单的情况: html代码片段 //移动
微信小程序实现拼图游戏
本文实例为大家分享了微信小程序实现拼图游戏的具体代码,供大家参考,具体内容如下 页面展示 项目链接 微信小程序实现拼图游戏 项目设计 首页面 wxml <!--index.wxml--> <view class="container"> <!-- 标题 --> <view class="title">游戏选关</view> <!-- 关卡列表 --> <view class="l
小程序通过小程序云实现微信支付功能实例
目录 一.开通微信支付 1.1 关联商户号 1.2 添加商户号 1.3 管理员授权 二.云函数开发 2.1 新建云函数 2.2 云函数代码 2.3 云函数上传并部署 三.小程序调用 3.1 统一下单 3.2 支付成功回调 一.开通微信支付 1.1 关联商户号 \微信公众号平台\功能\微信支付\商户号管理\关联商户号 1.2 添加商户号 \云开发平台\设置\其他设置\微信支付配置\添加商户号 1.3 管理员授权 1.2那张图上,点击授权.管理员的微信就会跳出提示,点击确定授权即可. 否则使用的时候
js实现axios限制请求队列
目录 背景是: 会造成什么情况呢? 背景是: 在实际开发中,可能会遇到网络问题或者查询量比较大的情况,上一个请求还没有完成,用户就发起了下一个请求. 会造成什么情况呢? 但是同一个请求多次发送到服务器,无疑是对服务器的一种压力,所以需要在已经优化服务器过查询速度后,以及用户网络情况比较差的条件下,在前端进行请求限制. axios 自带的cancelToken可以帮我们实现这个需求,并且提供给了我们一个现成的api axios.CancelToken ,这是一个返回值是带有请求信息的回调函数,我们
微信小程序wxs日期时间处理的实现示例
目录 1.时间戳转日期 2.UTC转北京时间 WXS(WeiXin Script)是小程序的一套脚本语言,wxs 与 javascript 是不同的语言,有自己的语法,并不和 javascript 一致.其中包括了很多日常使用的javascript函数,在wxs中都是不能同样使用的.最近在做一个列表的时候,涉及到时间格式化操作.就遇到了这个问题,以前写好了的格式化工具函数直接拷贝到小程序项目的wxs文件中,函数不能正常执行.其中包括了下面的几个错误 正则表达式在字符串的replace函数中的使用
JavaScript常用数组去重实战源码
数组去重,一般都是在面试的时候才会碰到,一般是要求手写数组去重方法的代码.如果是被提问到,数组去重的方法有哪些?你能答出其中的10种,面试官很有可能对你刮目相看. 在真实的项目中碰到的数组去重,一般都是后台去处理,很少让前端处理数组去重.虽然日常项目用到的概率比较低,但还是需要了解一下,以防面试的时候可能回被问到. 1.利用对象的属性 使用对象属性不重名的特性. var arr = ['qiang','ming','tao','li','liang','you','qiang','tao'];
用微信小程序实现计算器功能
本文是用微信小程序写的一个简单的计算器,有兴趣的小伙伴可以了解一下. 页面部分 <view class='box'> <view class='txt'>{{screenNum}}</view> <view capture-bind:touchstart="compute"> <view> <button data-val='clear' class='boxtn btn1'>AC</button> &
微信小程序计算器实例详解
微信小程序计算器实例,供大家参考,具体内容如下 index.wxml <view class="content"> <view class="num">{{num}}</view> <view class="operotor">{{op}}</view> </view> <view class="entry"> <view> <
js判断移动端横竖屏视口检测实现的几种方法
目录 1.不同视口的获取方法 2.JavaScript检测横竖屏 3.CSS检测横竖屏 4.meta标签属性设置 5.meta标签属性设置设置刘海屏&底部小黑条 1.不同视口的获取方法 // 获取视觉视口大小(包括垂直滚动条) let iw = window.innerWidth, ih = window.innerHeight; console.log(iw, ih); // 获取视觉视口大小(内容区域大小,包括侧边栏.窗口镶边和调整窗口大小的边框) let ow = window.outer
原生Javascript实现继承方式及其优缺点详解
目录 前言 原型继承 优点 构造函数继承 优点 缺点 组合式继承 寄生式组合继承 总结 前言 最近在复习javascript的一些基础知识,为开启新的征程做准备.所以开始记录一些自己学习的内容. 那今天的主题是 js的原生继承方式 废话少说,上代码! 首先是我们的父类代码. 在这里我们创建一个Person的类作为父类,它的构造函数需要2个参数name和age. 然后我们在它的原型上添加一个sayHi的方法. //父类 function Person (name, age) { this.name