原生js 第13页

Vue/原生JS实现图片鼠标拖拽，滚轮放大缩小

组件：向左旋转向右旋转关闭import$from'jquery'exportdefault{props:{src:{type:String},width:{default:60},height:{default:60},alt:{default:'图片加载失败'},attach:{type:String,default:'name'}},data(){return{show:false,deg:0

hyupeng1006·2023-08-02 10:02

jQuery排序和动画

jQuery排序eq()方法jQuery中获得的对象，内部包含选择的一组原生JS对象，在jQuery对象中会进行一个大的排序，这个排序与原来的HTML结构没有关系eq()方法在jQuery对象中通过下标获取某个对象

amanohina·2023-08-02 10:50

vue中显示在页面顶部的进度条插件——NProgress

一、功能需求首先，实现这个功能其实不难，说实在点其实就是个动画效果，大家在学习原生js中的时候应该都接触过来控制动画的移动，无非就是让一个小的长方形盒子慢慢的边长，通过js来完全可以实现。

一只爱web的羊驼·2023-08-02 07:16

原生js设置cookie

cookiewindow.onload=function(){//设置functionsetCookie(key,value,day=15){vardate=newDate(),expires='';//设置cookie生存期date.setTime(date.getTime()+(day*24*60*60*1000));expires=date.toUTCString();document.co

3seconds·2023-08-02 00:16

丁鹿学堂：前端学习进阶指南之react入门

值得注意的是，前端做项目很少使用原生js开发，而是使用js库或者框架。在vue，react，angular之前，jquery是被使用最多的js库。几乎70%以上的web网站都使用了jquery技术。

丁鹿学堂·2023-08-01 15:27

菜鸟【原生js】：点击页面空白区域，实现窗口关闭

网上实现这个效果，有使用阻止冒泡或者使用遮罩层的，这里就不细说，但我菜，有时候我看不懂，所以自己写了一个方法，有更好的方法，欢迎指导。首先是html部分，基本上就是导航栏中有一个搜索框，点击搜索框会出现一个推荐窗口推荐歌曲其次是简单样式部分.nav-bar{height:60px;width:100%;background-color:pink;}.search{position:relative

自己瞎琢磨·2023-08-01 14:47

Delphi XE的原生JSONObject如何判断键值是否存在？

【问题现象】DelphiXE的原生JSONObject，取出键值的时候如下：//json是传入的参数，里面包括"food_name"等之类的键值，没有food_type键值procedureXXXXFunciton

Cinway·2023-08-01 14:03

原生js实现数据库数据静态页面渲染表格

功能需求：表格行要求编号、科目、成绩、和删除链接最后计算出总分和平均分先看看效果：JavaScript核心代码：Document//核心数据constdata=[{subject:'语文',score:46},{subject:'数学',score:80},{subject:'英语',score:100},]lettr=''lettotal=0//计算总分for(leti=0;i${i+1}${d

Forever_Hopeful·2023-08-01 12:36

React循环遍历渲染数组对象

1,text:'首页'},{id:2,text:'分类'},{id:3,text:'我的'},],nav:1}react得循环渲染跟vue不一样，vue咱们都是用里面封装好的的方法，而react用的是原生

百事可乐☆·2023-07-31 23:45

Ajax基础

Ajax介绍原生JS实现AjaxJQuery实现Ajaxget方式post方式通用方式JSON的处理JSON介绍JSON转换Ajax介绍Ajax是异步的JavaScript和XML多个技术综合，用于快速创建动态网页可实现局部更新原生

·2023-07-31 19:30

【Ajax】笔记-原生jsonp跨域请求案例

原生jsonp跨域请求输入框：输入后，鼠标移开向服务端发送请求，返回用户不存在(直接返回不存在，不做判断)JS案例用户名://获取input元素constinput=document.querySelector

厦门德仔·2023-07-31 14:17

【前端案例】原生js实现一个开关按钮，并记住用户选择

目标是创建一个开关按钮，并且能够记住用户的选择。主要步骤如下：使用CSS创建开关按钮的样式，包括按钮本身和滑块的样式。在HTML中创建一个开关按钮，包括一个隐藏的输入框和一个滑块。使用JavaScript获取之前的开关状态（如果存在），并设置开关的状态。当开关被点击时，使用JavaScript切换状态并保存到本地存储。

且陶陶º·2023-07-31 13:22

JavaScript 流程控制

https://github.com/anotherso1a/37Hero/blob/master/chain.js使用原生JS实现一个英雄类Hero,可以按照以下方式调用（考察点：JavaScript

卓三阳·2023-07-31 01:18

原生js实现锚点滚动顶部

简介使用原生jsAPI实现滚动到指定容器的顶部，API是scrollIntoView使用letel=docment.querySelector()获取dom元素el.scrollIntoView()该元素滚动到其父元素的顶部高级用法

白的夜gxw·2023-07-30 15:33

原生js实现完美拖拽

实现拖拽其实很简单1.首先绑定事件，一般应该是鼠标移入事件onmouseover2.然后获取鼠标移入后距离父元素的左，上边距，e.offsetLeft和e.offsetTop3.然后绑定鼠标移动事件onmousemove,计算出鼠标距离浏览器左边，上边的距离e.pageX和e.pageY然后计算出可移动的范围就可以，记得做边界处理、代码如下：varbox=document.getElementBy

微笑向暖hh·2023-07-30 07:50

如何利用原生js动态给一个空对象添加属性以及属性值

访问对象属性一共有两种方法：点获取法和方括号获取法。而我们最常用的就是点获取法了。但是当我们遇到需要给对象动态添加属性和属性值时，点获取法好像就不太好用了，尤其是我们不知道属性名的时候更不好办。这时候，方括号获取法就派上用场了。下面，来看一个例子，就一目了然了。btn.onclick=function(){varcity=input_city.value;varnum=input_num.valu

不醒的兔子·2023-07-30 05:52

原生JS实现整屏滚动（竖屏）

Document*{padding:0;margin:0;}html,body{width:100%;height:100%;overflow:hidden;}.container{width:100%;height:100%;position:absolute;top:0;transition:all.3sease;}.container.section{width:100%;height:10

GJINW·2023-07-30 03:29

用策略模式重构表单校验「原生js加强你的js代码逻辑」。

在一个Web项目中，注册、登录、修改用户信息等功能的实现都离不开提交表单。在将用户输入的数据交给后台之前，常常要做一些客户端力所能及的校验工作，比如注册的时候需要校验是否填写了用户名，密码的长度是否符合规定，等等。这样可以避免因为提交不合法数据而带来的不必要网络开销。主要解决了很多冗余的if-else语句，提高了代码的复用性。第一版：简单版本Document请输入用户名：请输入密码：请输入手机号：

有两把刷子·2023-07-29 22:02

axios封装

前言：在一开始前后台交互过程中，我们一般都是使用传统的ajax进行交互，传统ajax指的是XMLHttpRequest（XHR），隶属原生js中，核心使用XMLHttpRequest对象，多个请求之间如果有先后关系的话

延飞·2023-07-29 20:26

前端面试题总结原生js+react+vue+webpack+node+算法+计算机基础

+小子日常更新！画地为坑先ts类与js中class类似、修饰符有public、private、protected、readonly接口借助interface关键字，对对象进行约束泛型在定义函数、类、接口时不指定什么类型，而是在在使用的时候指定js闭包函数外部对函数内部变量保持引用的函数优点：独立命名空间缺点：内存泄露应用：单例模式、防抖opp（继承、封装、多态）封装：保存状态和方法，为后续使用做准

戒骄戒躁TBE·2023-07-29 11:01

js面包屑，如何制作面包屑，什么是面包屑，又如何去理解面包屑是什么呢，对于不会应该怎么办呢？这篇文章告诉你。

博主：锅盖哒文章核心：带你了解原生js面包屑框架目录大纲1.面包屑的概念与框架地址2.功能框架预览于介绍框架效果预览：页面架构代码预览：HTML页面预览：权限验证介绍3.面包屑的逻辑下面就是面包屑逻辑1

锅盖哒·2023-07-29 11:55

原生js vue react通用的递归函数

博主：锅盖哒文章核心：原生jsvuereact通用的递归函数目录大纲1.递归函数的由来2.代码逻辑1.递归函数的由来递归函数的由来可以追溯到数学中的递归概念和数学归纳法。

锅盖哒·2023-07-29 11:53

原生JS实现轮播图效果

CSS部分代码：*{padding:0;margin:0;}.container{width:1130px;height:286px;position:relative;margin:0auto;overflow:hidden;}.wrapper{position:absolute;}.slide{width:1130px;height:286px;float:left;}.slideimg{wi

千锋小书童·2023-07-28 21:31

AJAX

目录1AJAX快速入门1.1介绍1.2原生JavaScript实现AJAX1.3原生JS实现AJAX详解1.4jQuery的GET方式实现AJAX1.5jQuery的POST方式实现AJAX1.5jQuery

莫了个莫·2023-07-28 20:45

【问题探讨】H5 UI渲染心智模型

本文思路先通过一个示例讲述不同的数据渲染逻辑，然后讲两个延伸DEMO来着重说明CLASS和FUNCTION的特点；示例，实现如下一个时钟，页面加载时开始1s跳动一次实现一，原生JS直接操作DOMindex.htmlReactAppindex.js

tom_wong666·2023-07-28 16:03

原生js方法小记

ps:无框架时,使用js的一些功能完成一些小demo记录方法,方便自己查询原生js方法小记String和Array方法替换所有//追加replaceAll方法String.prototype.replaceAll

月蚀～·2023-07-28 14:23

楼层跳转滚动条缓慢滑动至当前楼层 vue 原生js

vue的项目，其实jq里有一个animate函数可以直接用，但是不想用jq，而且搜了一下animate，但是都是一个元素出入效果，不是我想要的那种从一个起点滑到另一个重点的那种。1.绑定一个函数里面传参点击这个服务大厅要跳转的滚动条的高度服务大厅2.主要函数递归的思想，这个是我在搜的时候，网上资源乱七八糟一大堆，但是都不适用自己项目，忽然有一篇看着还可以其中的递归点亮了我的脑袋methods:{/

噫危乎高哉·2023-07-27 19:41

axios

axios文档特点支持客户端发送Ajax请求支持服务端Node.js发送请求支持Promise相关用法支持请求和响应的拦截器功能自动转换JSON数据axios底层还是原生js实现,内部通过Promise

不想努力的迪迪·2023-07-27 10:41

js给元素添加类的方法

原生js中添加类的方法//1.为元素添加一个类:document.getElementById("div").classList.add("类名");//2.为元素添加多个类:document.getElementById

贤总_·2023-07-27 10:33

【前后端数据交互】原生JS的Fetch请求封装

属于原生JS范畴，技术核心是XMLHttpRequest对象。

MagnumHou·2023-07-26 04:15

qs库的使用

在对一些数据的处理上，使用原生js可能会比较麻烦，但是在qs中已经封装了很多好用的方法。接着往下看吧~让我们在数据处理上，游刃有

学学学无止境·2023-07-25 16:48

insertAfter实现

用原生JS实现在一个dom元素后插入新的节点？在js的domapi中有insertBefore()方法在已知子节点的前面插入新的子节点。

lihuanji·2023-07-25 12:07

原生js 复制功能

functionhandleCopy(){constrange=document.createRange();range.selectNode(document.getElementById('echo_url'));constselection=window.getSelection();if(selection.rangeCount>0)selection.removeAllRanges();

高神龙拒绝做个菜鸟·2023-07-25 08:44

原生js将html页面变成pdf文件（html2canvas+jsPDF ）

一、html2canvas–将dom变成图片：下载或者安装html2canvas：官网1、将文档放在本地，用原生js进行引用和使用。

ᥬ 小月亮·2023-07-25 08:10

原生js和jQuery中鼠标,元素位置的区别

Yovii·2023-07-25 04:48

原生js实现数字滚动效果demo

DocumentvarnumId=document.getElementById("numBox");functionNumAutoPlusAnimation(startNum,endNum){varstep=(endNum-startNum)/20;//颗粒化可以控制速度varcount=startNum;vartimer=setInterval(()=>{count=count+step;if

岁月如歌_·2023-07-24 13:23

原生js封装弹出层

我们平常在项目中，通常需要给用户操作的结果进行提示，但是js默认给出的提示弹窗样式又比较丑，所以我们可以自己封装弹出层，用来给用户做不同的提示，具体效果如下：普通弹窗如下图：普通弹窗询问弹窗如下图：询问弹窗提示弹窗如下图：提示弹窗加载弹窗如下图：加载弹窗封装的代码，使用单例模式进行封装，代码如下：letpopup=Popup=(function(){classPopup{//构造函数中定义公共要使

升龙无涯·2023-07-23 06:59

原生JS实现鼠标拖动dom改变滚动条位置

有时页面内容过多时会同时出现横向和纵向滚动条,鼠标拖动滚动条感觉操作有些繁琐,所以尝试直接拖动dom来实现拖动滚动条同样的效果dom结构如下.father{height:50vh;width:70vw;overflow:auto;border:1pxsolid;}.child{width:500vw;height:500vh;}...那么首先理清思路同时监听父节点的mousedown事件和mous

Kirito_Beater·2023-07-22 20:45

移动端的上拉加载，下拉刷新

我们本次通过原生JS的方式实现一次上拉加载，下拉刷新，有助于我们对该技术点更好的理解与支持。一.实现原理上拉加载开始之前，我们需要了解一下几个概念：clientHeight:元素的像素高度，包含元素的

杜同学。·2023-07-22 19:49

【js】原生js进行post请求

【js】原生js进行post请求leturl='https://xxxupload'letparams={"body":{"id":row.id},"channel":"","token":"","userId

我是Superman丶·2023-07-22 19:03

面试 | Ajax进阶---JQuery中的Ajax

我们都知道在原生js中，需要使用Ajax异步请求，就必须要手写一段获得XMLHttpRequest对象的函数，开始写几次十几次还是能当练练手写代码的能力，然而你每个项目都需要去写得时候你就会觉得很痛苦。

一个敲代码的前端妹子·2023-07-22 16:18

Fetch

fetch不是ajax的进一步封装，而是原生js。Fetch函数就是原生js，没有使用XMLHttpRequest对象。

anna_0707·2023-07-21 17:30

组件吸顶功能实现

吸顶功能实现记录主要用的是scrolltop的距离来控制是否将组件定位改为fix，只需要用原生js即可实现。我们在vue中使用。

阿猪_341c·2023-07-21 10:22

ts：简单实现发布订阅模式

比如原生js中的addEventListener、removeEventListener比如vue中的EventBus（全局事件总线）（$emit、$on）即收集一些事件后，统一处理发布者$emit，订阅者

Unique·Blue·2023-07-21 05:30

ts：Set、Map

观看小满老师课程的随笔~前言与原生js中的原理和方法是相同的，这里只是用了ts中的强类型一、Set天然去重，引用类型除外增删改查：add、has、delete、clear循环：forEach、entries