分类：JS

2022
05-12

JS实现前端分页效果

本文实例为大家分享了JS实现前端分页效果的具体代码，供大家参考，具体内容如下一、HTML部分<!doctypehtml><html><head><metacharset='utf-8'><scriptsrc="js/jquery.js"></script><styletype="text/css">a{text-decoration:none;}table{border-collapse:collapse;width:100%;font-size:14px;}th{background-color:#ddd;}table,td,th{border:1pxsolid#e7e8ec;}th,tr{height:40px;}td{text-align... 继续阅读 >
2022
05-03

javascript实现自定义滚动条效果

在实际项目中，遇到上下滚动条和左右滚动条不在一个DIV内部，所以某些情况下，右侧滚动条不可见。但是需要咋同一个视口内显示两个滚动条。一个解决思路是：自定义滚动条，隐藏原始滚动条。自定义滚动条scrollbar.jsimportReact,{Component}from'react';importPropTypesfrom'prop-types';import'../css/scrollbar.css';constpropTypes={eventBus:PropTypes.object.isRequired,};classScrollBarextendsComponent... 继续阅读 >
2022
05-03

如何基于JS实现Ajax并发请求的控制详解

目录前言Ajax的串行与并行Ajax的并发请求控制的两大解决方案基于Promise递归实现基于Class实现代码展示总结前言最近看到一个面试题，当然了，就是这篇文章的标题,Ajax的并发请求的控制，感觉挺有意思的，在社区看了下，应该是字节的面试题，也挺多大佬对这个进行了总结，都看了下，于是自己也想试着总结下，代码文末会全部贴出，如有不足，请指出！Ajax的串行与并行串行：一般业务需求是下个接口需要用到上个接口的返回的数据... 继续阅读 >
2022
05-03

js实现表单校验功能

js实现表单校验功能 本文实例为大家分享了js实现表单校验功能的具体代码，供大家参考，具体内容如下1、所用到的三个事件：onfocus（焦点聚焦事件）、onblur（焦点离开事件）、onkeyup（按键抬起的事件）2、利用事件触发函数，函数中执行校验的信息。3、利用checkform判断表单中的内容是否规范，如果规范submit按钮可以提交表单信息。简单效果：   form中的代码：<formaction="demo.html"onsubmit="returncheckForm()"><div>... 继续阅读 >
2022
04-30

js实现购物车计算的方法

本文实例为大家分享了js实现购物车计算的具体代码，供大家参考，具体内容如下以店铺为单位，每个店铺下面有对应的商品选项，可全选，商品单选，店铺单选，商品数量加减，删除代码：<script>exportdefault{data(){return{count:0,//所有商品的数量和shopCarList:[],//所有商品selectList:[]//已选择的商品}},computed:{//... 继续阅读 >
2022
04-30

JS实现简单的todoList(记事本)效果

该记事本程序利用HTML+CSS+JavaScript前端三大框架来实现。实现了记事本的添加，已完成和删除待办事项的基本功能。下面是程序实现的全部代码：1.实现效果展示2.HTML代码<head><metacharset="UTF-8"><title>TodoList</title>//导入css文件<linkrel="stylesheet"href="todoList.css"></head><body><divclass="myhead"><h2>MyToDoList</h2><table><tr><td><inputtype="text"placeholder="请输入待办事... 继续阅读 >
2022
04-20

原生javascript+CSS实现轮播图效果

本文实例为大家分享了javascript+CSS实现轮播图效果的具体代码，供大家参考，具体内容如下1.html<ulid="banner"></ul>2.cssul{list-style:none;position:absolute;padding:0;left:0;right:0;bottom:0;top:0;margin:auto;width:800px;height:200px;}3.js//生成轮播图exportfunctiongenerateBanner(){letsz=newArray();letcur_ul=document.getElementById('banner');... 继续阅读 >
2022
04-20

JavaScript Canvas绘制动态线框效果

本文实例为大家分享了JavaScriptCanvas绘制动态线框效果的具体代码，供大家参考，具体内容如下本周项目，移动端页面开发，要求丰富的动效，主要技术实现Canvas；其中绘制动态线框，走了点弯路，所谓的弯路是逻辑问题，非技术实现方式。一、涉及技术点，具体如下：1.html中引入canvas标签，设置宽高；<canvasid="canvas"width=xxheight=xx>您的浏览器不支持canvas，请更换版本</canvas>2.js中定义ctx–beginPath–moveTo-l... 继续阅读 >
2022
04-20

js观察者模式的介绍及使用

目录一、定义二、使用场景三、举个例子四、Coding一、定义观察者模式定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象(通知者)。这个主题对象观察到被观察者发生变化时，会通知所有的观察者对象，使它们能够自己更新自己这里涉及了几个角色及他们自己功能:观察者对象：可以更新自己主题对象：可以添加观察者，移除观察者，通知观察者被观察者：被主题对象监视，当被观察者发生变化时，主题对象会... 继续阅读 >
2022
04-20

原生js实现简易计算器

本文实例为大家分享了js实现简易计算器的具体代码，供大家参考，具体内容如下最近，博主闲来无聊，就没事用js写了个简易计算器（博主是搞后端的，不是前端>_<）。其实，感觉搞前端的很幸福，自己弄出点东西很有成就感，话不多说，附上源码。<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>计算器</title><style>#b1{text-align:center;backg... 继续阅读 >
2022
04-16

JavaScript中async,await的使用和方法

JS中async函数和await 关键字functionhellworld(){return"您好！美好世界！";}console.log(hellworld());//您好！美好世界！asyncfunctionasyHellworld(){return"您好！美好世界！";}console.log(asyHellworld());//Promise{'您好！美好世界！'}普通函数hellworld将简单地返回字符串您好！美好世界！，而async函数将返回Promise对象。如果需要使用异步函数返回的值，则需要在它后面添加.then... 继续阅读 >