javascript技巧

JavaScript实现通过滑块改变网页颜色

2021-08-28
大家好,今天我在看web前端的HTML时,看到input标签的type属性是range时在页面上显示的是一个滑块,我突发奇想能不能通过滑来改变网页的颜色.现在我和大家分享一下通过滑块来改变网页的颜色. 首先要知道怎么样来表示颜色,颜色的表示有四种方式: 1.用颜色的名称来表示颜色:red,green...等 2.用#加16进制数表示:#FF0000/#F00 红色.#00FF00/#0F0 绿色 ...等 3.用rgb值:rgb(0,0,0) 黑色.rgb(255,255,255) 白色....

浅谈axios中取消请求及阻止重复请求的方法

2021-08-28
目录 前言 核心--CancelToken 实际应用和封装 一些小细节 前言 在实际项目中,我们可能需要对请求进行"防抖"处理.这里主要是为了阻止用户在某些情况下短时间内重复点击某个按钮,导致前端向后端重复发送多次请求.这里我列举两种比较常见的实际情况: PC端 - 用户双击搜索按钮,可能会触发两次搜索请求 移动端 - 因移动端没有点击延迟,所以极易造成误操作或多操作,造成请求重发 以上情况有可能在有Loading遮罩时依然发生,所以我们要考虑前端阻止重复请求的方法. 核心--Canc

js项目中双向数据绑定的简单实现方法

2021-08-28
目录 前言 发布订阅者模式 结果 调用 总结 前言 双向数据绑定 指的是当对象的属性发生变化时能够同时改变对应的UI,反之亦然.换句话说,如果我们有一个user对象,这个对象有一个name属性,无论何时你对user.name设置了一个新值,UI也会展示这个新的值.同样的,如果UI包含一个用于数据用户名字的输入框,输入一个新值也会导致user对象的name属性发生相应的改变. 许多流行的javascript框架,像Ember.js,Angular.js或者KnockoutJS都会把双向数据绑定作为

微信小程序开发实现首页弹框活动引导功能

2021-08-27
目录 1.需求 2.数据库设计 3.Java后台配置实现 4.微信小程序前端实现 总结 1.需求 后台可以配置活动时间,在活动期间,自动在小程序首页,以弹框形式显示活动图片.用户可以关闭活动图片的显示. 1.管理后台可以新增活动时间段,是否弹框显示,弹框图片和活动是否开启配置 2.进入小程序时,请求一下后台是否有弹框活动,如果有,就弹框显示活动图片 2.数据库设计 由于小程序弹框活动是系统配置中的一项,直接使用公共的系统配置来存储弹框活动配置. 公共系统配置表结构如下: CREATE TABLE

JavaScript CollectGarbage函数案例详解

2021-08-27
首先看一个内存释放的实例: <SCRIPT LANGUAGE="JavaScript"> <!-- strTest = "1"; for ( var i = 0; i < 25; i ++ ) { strTest += strTest; } alert(strTest); delete strTest; CollectGarbage(); //--> </SCRIPT> CollectGarbage,是IE的一个特有属性,用

js利用reduce方法让你的代码更加优雅

2021-08-26
前言 在实际项目中,最常见可能是在计算.循环逻辑方面的处理,可以使用数组中reduce方法也可以解决很多的问题,使得你的代码风格更加优雅! reduce语法 arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue]) 参数说明 reducer函数需要接收4个参数分别是 callback Accumulator 累计器累计回调的返回值; 它是上一次调用回调时返回的累积值,或initialValu

利用JS判断数据类型的四种方法

2021-08-26
目录 前言 1.typeof 2.instanceof 3.constructor 细节问题: 4.toString 总结 前言 Javascript 中的数据类型判断其实是一个JavaScript非常基础问题,但不论是日常实际编程过程中和还是面试时,这都是一个非常常见的问题. 在 ECMAScript 规范中,共定义了 7 种数据类型,分为 基本类型 和 引用类型 两大类,如下所示: 基本类型:String.Number.Boolean.Symbol.Undefined.Null 引用类型:O

JS中数据类型的正确判断方法实例

2021-08-26
目录 前言 typeof是否能正确判断类型? instanceof是否能正确判断类型? Object.prototype.toString.call() constructor Array.isArray() 正则判断 总结 前言 Javascript是一门动态类型的语言,一个变量从声明到最后使用,可能经过了很多个函数,而数据类型也会发生改变,那么,对一个变量的数据类型判断就显得尤为重要. typeof是否能正确判断类型? typeof 是一个操作符,其右侧跟一个一元表达式,并返回这个表达式的数

JavaScript实现限时秒杀功能

2021-08-26
本文实例为大家分享了JavaScript实现限时秒杀功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div class="box"> <div id="d"><

微信小程序实现根据日期和时间排序功能

2021-08-25
最近接手了一个小程序的项目,有这样一个需求要对列表进行日期和时间的排序,于是小试牛刀,操作了一番,终于搞出来,在这里给大家总结分享一下经验,希望对大家有一定的帮助. 需求分析(这是已完成的效果) 这里有具体的日期时间和具体的小时时间,后端数据给我传来的是这样式的 startDate: "2021-08-27" //日期年月日 startTime: "10:15" //开始时间 endTime: "20:00" //结束时间 实现代码 // 根据日

JavaScript--在Vue中使用插槽:slot

2021-08-25
目录 在Vue中使用插槽:slot 作用域插槽:使用template标签包裹 总结 在Vue中使用插槽:slot 1.在子组件的template里可以直接使用slot标签<slot></slot>,它可以显示父组件向子组件插入的内容. 2.slot标签里面可以写一些默认值,当父组件没有插入内容的时候它就会显示默认值,插入内容时就只显示插入的内容. 3.当使用多个slot标签时,直接插入多个内容时,每个slot标签内都会包括所有插入的内容. 可以通过slot属性给插入的不同内容设置指

Echarts Bar横向柱状图实例代码

2021-08-25
目录 横向柱状图 动态更新数据和样式 解决 echarts 宽高自适应问题 纵向柱状图 纵向柱状图实现 坐标指示器背景渐变色 柱体设置不同颜色 柱状图上方显示数值 tooltip 提示框自定义 总体实现 总结 接上一篇# Echart Bar柱状图样式详解续写,可以先看看上一篇,不看的话,影响也不是特别大. 横向柱状图 动态更新数据和样式 实现数据按月统计和按日统计的动态切换.按月统计时,每个月数据都会展示,x 轴显示 12 个标签:按日统计时,x 轴不完全显示所有标签,间隔显示,而且柱状体的宽

echars 3D地图为区域自定义颜色的解决方法

2021-08-24
目录 问题 延伸 解决问题 总结 问题 根据项目需求,我们要将下面省级地图中的个别市进行高亮(不同颜色)展示 延伸 首先跟大家介绍这个地图的展示方式: 采用的是Vue框架中运用echarts 地图采用的是geo3D和scatter3D 当然他的实现很简单 首先我们要初始化echarts let echartsMap = this.$echarts.init(this.$refs.echartsMap); 注册地图 this.$echarts.registerMap('河南', dataGeoLo

JavaScript setTimeout与setTimeinterval使用案例详解

2021-08-24
这两个方法都可以用来在固定的时间段后去执行一段javascirpt代码,不过两者各有各的应用场景. 实际上,setTimeout和setInterval的语法相同.它们都有两个参数,一个是将要执行的代码字符串,还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将执行那段代码. 不过这两个函数还是有区别的,setInterval在执行完一次代码之后,经过了那个固定的时间间隔,它还会自动重复执行代码,而setTimeout只执行一次那段代码. 虽然表面上看来setTimeout只能应用在on-

HTML+CSS+JavaScript做女朋友版的刮刮乐(一看就会)

2021-08-24
刮刮乐想必大家都玩过,小时候兜里一有钱,就喊上小伙伴兴冲冲的跑去家旁边的小卖部,用那稚嫩地小手递给老板那被捏的皱巴巴的五毛钱,满眼期待的刮着买来的刮刮乐,心里早已想好中了100块钱大钞要去买好多好多辣条.卡片.陀螺.奥迪双钻的悠悠球- 认认真真看完本文,你就可以用你女朋友的美照实现一个独属于你的刮刮乐哦!(当然如果你没有女朋友的话,也可以用你珍藏多年的美女图片哦!) ⛳️使用HTML.CSS和JavaS实现刮刮卡/刮刮乐 ♥️别着急,先看演示

用JavaScript实现轮播图效果

2021-08-24
本文实例为大家分享了JavaScript实现轮播图效果的具体代码,供大家参考,具体内容如下 实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } ul { list-style: non

JavaScript定时器实现限时秒杀功能

2021-08-24
本文实例为大家分享了JavaScript实现限时秒杀功能的具体代码,供大家参考,具体内容如下 文件index.html 代码: <!DOCTYPE html> <html> <head> <meta charset="GBK" /> <title>show</title> <link rel="stylesheet" href="css/index.css" type=

你可能不知道的typescript实用小技巧

2021-08-24
目录 前言 函数重载 映射类型 Partial, Readonly, Nullable, Required Pick, Record Exclude, Omit ReturnType 类型断言 枚举 元组 范型 infer 总结 前言 用了很久的 typescript,用了但感觉又没完全用.因为很多 typescript 的特性没有被使用,查看之前写的代码满屏的 any,这样就容易导致很多 bug,也没有发挥出 typescript 真正的"类型"威力.本文总结了一些使用 typesc

自定义swiper组件详解

2021-08-24
目录 效果展示 组件设置 步骤1 步骤2 步骤3 使用组件 步骤1 步骤2 步骤3 总结 效果展示 组件设置 步骤1 在pages目录下,新建文件夹components 步骤2 在components下建立新文件夹swiper 在swiper目录下,新建4个文件,分别为 swiper. jsswiper. jsonswiper.wxml swiper.wxss 各文件位置示意图如下: 注:此时编译会报错 错误显示在json那里 先不用管 后面把代码复制粘贴上去再编译就好了 步骤3 分别把下面代码

JavaScript实现年历效果

2021-08-23
本文实例为大家分享了JavaScript实现年历效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>制作年历</title> <style> body{text-align:center;} .box{margin:0 auto;width:880px;} .title{background: