分类：JS

2021
05-28

js实现简单购物车模块

js实现简单购物车模块 本文实例为大家分享了js实现简单购物车模块的具体代码，供大家参考，具体内容如下主要功能输入框正则判断，两位数小数，开头可以为0如果商品名字相同，自动数量+1，如果名字相同，价格不同，以最新价格为准（有bug，多个商品无法操作。程序混乱，随后在改）选住商品，或添加减少数量，都会自动更新右下角的价格和数量结算过的商品自动消失源码：1.html<body><divid="head"align="center"><for... 继续阅读 >
2021
05-25

JavaScript中sharedWorker 实现多页面通信的实例详解

JavaScript中sharedWorker 实现多页面通信的实例详解 是这样的，今天玩github，先是在没有登录浏览了一些页面，然后在某一页面进行了登录。这时再切换的其他页面时就看到了下面的提示：那么这是怎么做到的呢？我们可以想到，一种办法是localStorage，在某一个页面登录时，修改localStorage状态，其他页面在显示的时候，读取最新的状态，然后显示提示：//登录的页面localStorage.setItem('login',true)；//其他页面document.addEventListener("visibilitychange",function(){if... 继续阅读 >
2021
05-25

js前端解决跨域的八种实现方案

由于同源策略的限制，满足同源的脚本才可以获取资源。虽然这样有助于保障网络安全，但另一方面也限制了资源的使用。那么如何实现跨域呢，以下是实现跨域的一些方法。一、jsonp跨域原理：script标签引入js文件不受跨域影响。不仅如此，带src属性的标签都不受同源策略的影响。正是基于这个特性，我们通过script标签的src属性加载资源，数据放在src属性指向的服务器上，使用json格式。由于我们无法判断script的src的加载状态，并不知... 继续阅读 >
2021
05-23

如何用JS实现网页瀑布流布局

前言：瀑布流又称瀑布流式布局，是比较流行的一种网站页面布局方式。即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。什么是瀑布流布局：先看效果：图片多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。为了方便理解，在此先给上html、css代码不完... 继续阅读 >
2021
05-23

用js控制电灯开关

用js控制电灯开关 利用js控制电灯开关，供大家参考，具体内容如下题目：通过js来控制电灯的开关分析：获取电灯泡元素，给它绑定点击事件，通过鼠标点击来实现电灯泡的开关实现方法：方法一：获取图片元素，通过给按钮绑定点击事件来控制电灯开关<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1... 继续阅读 >
2021
05-23

原生JS实现点击数字小游戏

原生JS实现点击数字小游戏 原生JS实现点击数字小游戏，供大家参考，具体内容如下最近公司在季度测试中出了一道很有趣的测试题，要求使用我们自己的黑科技?IVX来实现,感兴趣的朋友可以去了解哦，是真的黑科技，在这里我还是用原生JS来实现吧，题目是这样的：实现一个点击数字的小游戏：依次点击容器中随机生成的数字元素，生成的数字元素会在5S后消失，你将凭借记忆点击按照数字升序依次点击生成的数字方可通过该关卡游戏。话不多说直接看运行效果图：上代码... 继续阅读 >
2021
05-20

js+Html实现表格可编辑操作

js+Html实现表格可编辑操作 本文实例为大家分享了js+Html实现表格可编辑操作的具体代码，供大家参考，具体内容如下功能描述：单击页面使单元格td变成可编辑状态，输入内容后，当单元格失去焦点时，保存输入的内容。点击增加行，在table的末尾增加一行；点击删除行，删除table中最末尾的一行。     <html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/><title>编辑表格数据</title... 继续阅读 >
2021
05-09

JS 实现10进制转换36进制的示例代码

前言我们在平时写代码的时候偶尔会碰到进制转换的问题，常见的有2进制，8进制，10进制，16进制之间的转换，但是36进制却很少听过，这里就让我们用JS来简单尝试一下36进制的实现吧思考36进制数的构成在开始前，我们需要先理清楚36进制的数字组成，这样我们才能对36进制数有一个清晰的认识以及后续对数字的转化。我们都知道，16进制数是由0-9以及a-f之间的字符所构成，那么36进制呢？，将a-f继续后推20位，显而易见，它的字母部... 继续阅读 >
2021
04-27

如何利用JS检查元素是否在视口内

前言分享两个监测元素是否在视口内的方法1.位置计算使用Element.getBoundingClientRect()方法返回元素相对于视口的位置constisElementVisible=(el)=>{constrect=el.getBoundingClientRect();};获取浏览器窗口的宽高constisElementVisible=(el)=>{constrect=el.getBoundingClientRect();constvWidth=window.innerWidth||document.documentElement.clientWidth;constvHeight=window.innerHeight||... 继续阅读 >
2021
04-27

JavaScript异步编程之Promise的初步使用详解

1.概述Promise对象是ES6提出的的异步编程的规范。说到异步编程，就不得不说说同步和异步这两个概念。从字面意思理解同步编程的话，似乎指的是两个任务同步运行，如果这样理解就错了（至少笔者再没有接触到这个概念的时候有这种误解）。同步和异步指的是代码指定执行的顺序（结构化编程范式的执行顺序总是由上至下，由前往后的），如果执行的顺序与代码的相同，就是同步；如果不同，就是异步。最初，操作系统都是基于命令行的，所... 继续阅读 >
2021
04-27

浅谈js二维码扫码登录是什么原理

浅谈js二维码扫码登录是什么原理 前几天看了极客时间一个二维码的视频，写的不错，这里总结下在日常生活中，二维码出现在很多场景，比如超市支付、系统登录、应用下载等等。了解二维码的原理，可以为技术人员在技术选型时提供新的思路。对于非技术人员呢，除了解惑，还可以引导他更好地辨别生活中遇到的各种二维码，防止上当受骗。二维码，大家再熟悉不过了购物扫个码，吃饭扫个码，坐公交也扫个码 在扫码的过程中，大家可能会有疑问：这二维码安全吗？会不会... 继续阅读 >
2021
04-27

JavaScript实现颜色查看器

JavaScript实现颜色查看器 本文实例为大家分享了JavaScript实现颜色查看器的具体代码，供大家参考，具体内容如下实现效果方框中初始为白色输入框中输入颜色代码，点击查看颜色，在上方即可出现对应颜色点击复原，复原到初始的白色，同时清空输入框的内容实现代码<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"/><title>颜色查看器</title><style>#color{width:150... 继续阅读 >
2021
04-27

用javascript制作qq注册动态页面

用javascript制作qq注册动态页面 一.前言我们来看如何用html写一个注册页面并使用js加载用户输入响应。先上图，没图都是耍流氓，附上本次案例链接Fdog注册案例。1.基础布局首先分析布局，图中的布局分为左右两大板块，右边的板块又包括三大板块：我们先来一个水平布局，并设置左边的宽为25%，右边的宽为75%<divclass="fdogback"></div><divclass="fdogtext"></div>.fdogback{background-color:aqua;float:left;width:25%;}.fdogtext{background-color... 继续阅读 >
2021
04-27

JS实现判断对象是否为空对象的5种方法

1.将json对象转化为json字符串，再判断该字符串是否为"{}"vardata={};varb=(JSON.stringify(data)=="{}");alert(b);//true2.forin循环判断varobj={};varb=function(){for(varkeyinobj){returnfalse;}returntrue;}alert(b());//true3.jquery的isEmptyObject方法此方法是jquery将2方法(forin)进行封装，使用时需要依赖jqueryvardata={};varb=$.isEmptyObject(data);alert(b);//tr... 继续阅读 >