javascript技巧

JavaScript代码实现简单计算器

2020-12-26
本文实例为大家分享了JavaScript代码实现简单计算器的具体代码,供大家参考,具体内容如下 一.实现功能 (1)利用css样式.javascript语言和html语言实现计算器的算法 (2)对计算器的页面进行规划以及对界面进行颜色的填涂 (3)对界面各个边框边距进行适当的调整 二.展示 1.代码展示 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

微信小程序自定义胶囊样式

2020-12-26
本文实例为大家分享了微信小程序自定义左上角胶囊样式的具体代码,供大家参考,具体内容如下 1. 将app.js 中的 window 对象属性navigationStyle 改为自定义 "window": { "navigationStyle": "custom" }, 改完之后的效果: 2.获取 右上角胶囊的定位信息 设置 调用 wx.getMenuButtonBoundingClientRect() 函数得到右上角胶囊定位信息 所需要的 属性有

11个Javascript小技巧帮你提升代码质量(小结)

2020-12-25
本文会不断更新,不足之处欢迎评论区补充. 1. 提炼函数 好处: 避免出现超大函数. 独立出来的函数有助于代码复用. 独立出来的函数更容易被覆写. 独立出来的函数如果拥有一个良好的命名,它本身就起到了注释的作用. 语义化将多段分离的逻辑放在不同的函数中实现,可以使代码逻辑清晰,清楚的看到每一步在做什么. 代码举例: 实现获取数据,然后操作dom显示数据,最后添加事件 函数提炼前 // 逻辑都写在一起,需要将所有逻辑看完才知道这段代码是干嘛的,局部逻辑无法复用 function main() {

JavaScript实现原型封装轮播图

2020-12-25
本文实例为大家分享了JavaScript实现原型封装轮播图的具体代码,供大家参考,具体内容如下 只要用dom元素调用这个方法,传一个数组进去,里面放的是图片的路径. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid

JavaScript实现通讯录功能

2020-12-24
本文实例为大家分享了JavaScript实现通讯录功能的具体代码,供大家参考,具体内容如下 直接贴代码 index.css BODY, HTML { width: 100%; height: 100%; margin: 0px; font-family: "PingFang SC", "微软雅黑", sans-serif; font-weight: 300; color: #333; } .header { width: 100%; padding: 32px; }

JavaScript实现滚动加载更多

2020-12-24
本文实例为大家分享了JavaScript实现滚动加载更多的具体代码,供大家参考,具体内容如下 vscode index: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * {margin:0; padding: 0;} li {list-style

JavaScript实现瀑布流布局的3种方式

2020-12-24
前言 今天逛闲鱼的时候观察到每一行的高度不是相同的,经了解才知道原来这是一种瀑布流布局,感觉挺有意思,于是决定研究一下,在网上也找了一些方案,实现瀑布流大概有3种方式. 一.JS 实现瀑布流 思路分析 1.瀑布流布局的特点是等宽不等高. 2.为了让最后一行的差距最小,从第二行开始,需要将图片放在第一行最矮的图片下面,以此类推. 3.父元素设置为相对定位,图片所在元素设置为绝对定位.然后通过设置 top 值和 left 值定位每个元素. 代码实现 <!DOCTYPE html> <html

JS实现鼠标移动拖尾

2020-12-24
本文实例为大家分享了JS实现鼠标移动拖尾的具体代码,供大家参考,具体内容如下 JS 代码 function getMousePos(event) { var e = event || window.event; var mouseInfo = { mouseX : e.clientX, mouseY : e.clientY } return mouseInfo; } function getMouseArt() { this.artStyle = { position: "fixed"

js制作提示框插件

2020-12-24
JavaScript制作一个简单的提示框插件 下面是制作的提示框插件文件 window.myPlugin = window.myPlugin || {}; window.myPlugin.showMsg = (function () { var mongolia, //蒙层 promptBox, //提示框 closeSpan, //关闭按钮 titleSpan, //提示标题 contextSpan, //提示信息 okBtn, //确定按钮 cancelBtn, //取消按钮 isRegEv

如何在JavaScript中正确处理变量

2020-12-23
变量无处不在.即便我们写一个小函数或一个小工具,也要声明.赋值和读取变量.增强对变量的重视,可以提高代码的可读性和可维护性. 1.建议使用 const,要么使用 let 用 const 或 let 声明自己的 JavaScript 变量.两者之间的主要区别是 const 变量在声明时需要初始化,并且一旦初始化就无法再重新赋值. // const 需要初始化 const pi = 3.14; // const 不能被重新赋值 pi = 4.89; // throws "TypeError: Ass

js实现头像上传并且可预览提交

2020-12-23
在用户注册账号或者修改资料的时候会需要用户在本地选择一张图片作为头像,并同时预览, 常见的思路有两种:一是将图片上传至服务器的临时文件夹中,并返回该图片的url,然后渲染在html页面:另一种思路是,直接在本地内存中预览图片,用户确认提交后再上传至服务器保存. 这两种方法各有利弊,方法一很明显,浪费流量和服务器资源:方法二则加重了浏览器的负担,并且对浏览器的兼容性要求更高. 这里介绍的是直接在本地内存中预览图片,用户确认提交后再上传至服务器保存这种方法 html <div class="r

Javascript 模拟mvc实现点餐程序案例详解

2020-12-22
MVC模式是一个比较成熟的开发模式.M是指业务模型,V是指用户界面,C则是控制器,使用MVC的目的是将M和V的实现代码分离,从而使同一个程序可以使用不同的表现形式.其中,View的定义比较清晰,就是用户界面.今天就来模拟使用MVC模式开发一个点餐程序,当然,只是就此案例来说明MVC在前端的实现参考,并没有完整的实现.程序很简单,与传统的MVC三层架构不谋而合. 首先,先介绍一下场景:顾客进到餐馆,拿着菜单点餐,服务员记录并发到后端厨房,厨师接到订单,按照订单的菜品去制作,制作完毕通知服务员取餐,

js实现随机点名功能

2020-12-22
本文实例为大家分享了js实现随机点名的具体代码,供大家参考,具体内容如下 效果: PS:在原来的效果中很快的,但是不知怎么的录下来就变得这么慢了 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,

ES6字符串的扩展实例

2020-12-20
本节我们来学习 ES6 中字符串类型的扩展,包括一些字符串对象的新增方法的使用等. 字符的 Unicode 表示法 ES6 加强了对 Unicode 的支持,JavaScript 中可以采用 \\uxxx 形式表示一个字符,其中 xxxx 表示字符的码点.例如: console.log("\u0075"); // u 但是这种表示法只限于码点在 \\u0000~\\uFFFF 之间的字符.超出这个范围的字符,必须用两个双字节的形式表示. console.log("\uD842

js实现移动端轮播图滑动切换

2020-12-20
本文实例为大家分享了js实现移动端轮播图滑动切换的具体代码,供大家参考,具体内容如下 移动端手势 轮播图分析 1.自动轮播且无缝 [定时器.过渡动画] 2.分页器要随着图片的轮播而改变 [根据索引切换] 3.滑动效果 [touch事件] 4.图片随着分页器变化 5.滑动结束的时候,如果滑动的距离不超过屏幕的1/3,就恢复回去 [过渡] 6.滑动结束的时候,如果滑动的距离超过屏幕的1/3,就切换 [滑动方向 + 过渡]] html页面结构 <!--轮播图--> <div class=&qu

原生JS实现pc端轮播图效果

2020-12-20
本文实例为大家分享了JS实现pc端轮播图效果的具体代码,供大家参考,具体内容如下 案例:轮播图需求 布局:ul下有很多li标签:浮动在一行: 原理:切换图片的时候,把ul位置修改一下,给ul的父容器,设置一个 overflow:hidden: 功能需求: 序号轮播 左右按钮的轮播 自动轮播 鼠标在轮播图里面的时候,停止自动轮播,离开后继续自动轮播 实现效果: html部分 <div class="box" id="box"> <div class=

ES5和ES6中类的区别总结

2020-12-20
类定义与调用的区别 在 ES5 中主要是通过构造函数方式和原型方式来定义一个类,但是在 ES6 新引入了 class 关键字,使之具有了正式类的能力,类(class)是ECMAScript 中新的基础性语法糖结构.虽然 ES6 类表面上看起来可以支持正式的面向对象编程,但实际上它背后使用的仍然是原型和构造函数的概念. 使用 ES5 定义一个类并调用 function Person(name, age, job) { this.name = "Totora"; this.age = 19

微信小程序实现modal弹出框遮罩层组件(可带文本框)

2020-12-20
modal弹出框遮罩层可实现提示信息.验证码等功能 然而在官方文档已经删除了modal的页面,说要废弃modal 就个人而言modal组件无法被wx.showModal完全替代.大家都知道小程序的wxml的组件可以通过改变js的值实现重新渲染,而接口是无法实现的 有同感的也不止博主一个人 官方18-5-13的建议要实现此类功能也是用modal 属性 说下遮罩层实现,通过改变modal的hidden属性来控制是否显示,通过监听confirm方法来确认提交,通过bindinput来监听modal内表

JavaScript中arguments的使用方法详解

2020-12-19
前言 js这是一门弱语言,不像其他语言如c,java等,有严格的规范, 所以现在也流传着一种说法,js本来就不是一种语言: 说回arguments,它是js中函数内置的一个对象,而执行函数方法的实参中值都存储在arguments中: 要想获取到这些实参,就需要像数组一样,用下标/索引来定位到每个值上面,但是又不能说它是一个数组,因为它里面还有其他的属性,如callee; 并且不能对它使用shift.push.join等方法.而没有传递值的命名参数将会被自动赋予undefined: 如下图: (如

微信小程序自定义modal弹窗组件的方法详解

2020-12-19
微信小程序开发中官方自带的wx.showModal,这个弹窗API有时候并不能满足我们的弹窗效果,所以往往需要自定义modal组件.下面我们进行一个自定义modal弹窗组件的开发,并进行组件的引用,组件可自定义底部是一个还是两个按钮.效果如下. 首先我们可以在跟目录下创建一个components文件夹存放所有的组件.新建一个modal文件夹,下面新建modal.js.modal.json.modal.wxml.modal.wxss四个文件. modal.wxml布局文件: <view class