原生Jｓ第18页

原生JS 侧边/左右拖拽 demo

Document*{margin:0;padding:0;box-sizing:border-box;}html,body{width:100%;height:100%;overflow:hidden;}.box{height:100%;width:200px;float:right;position:relative;background:lightblue;user-select:none;p

意面秋刀鱼·2023-03-30 03:32

数字滚动原生js的三种方式

数字滚动原生js的三种方式让数字滚动的效果简单用计时器setInterval就能轻易的实现,例如functionnumRunFun(num,maxNum){varnumBox=document.getElementById

jason_renyu·2023-03-30 00:39

懒人封装(懒惰模式)

本文旨在一些特殊的封装上一般会用于处理浏览器兼容性的封装但是看完会对你有一些启发也说不定哦O(∩_∩)O~一段简单的代码我们在封装ajax请求的时候基于原生js的ajax代码,如果考虑到浏览器兼容问题那么我们一定会看到以下几段代码

千锋HTML5大前端·2023-03-29 20:02

React Native 架构原理

现有架构架构模型基本架构模型如下：Native是原生部分，例如：iOS原生或Android原生JS端主要是React语法Bridge用与Native和JS的通信因为Native和JS相对独立

christian-dong·2023-03-29 13:17

原生JS实现轮播图

.banner{width:1002px;height:auto;overflow:hidden;}.bannerimg{width:1002px;height:300px;overflow:hidden;position:absolute;background-repeat:no-repeat;}vartimer=null,index=0,pics=document.getElementsByT

puxiaotaoc·2023-03-29 13:57

【防止原文被删备份】如何定义一个高逼格的原生JS插件【转】

不过，也从侧面说明了原生js在前端中占着多么重要的一面。好了。废话不多说。咱们就来看一下怎么去做一个自己的

XING99·2023-03-29 09:43

1.Vue概念

前端开发发展历程原生js（浏览器兼容性差）Jquery等（浏览器兼容性好，频繁操作dom）前端模板引擎（省去频繁dom操作。

高新园养鸡场·2023-03-29 07:14

原生js实现图片轮播效果

功能：实现图片每隔1秒切换一次；当鼠标停留在整个页面上，图片不进行轮播；鼠标移动到切换页选项上，出现该选项对应的图片，并且切换页选项的背景颜色发生相应的变化；当图片发生轮播切换时，再不滑入选项卡的前提下，相应的选项卡背景颜色也自动发生变化；点击上一张按钮，出现上一张图片，点击下一张按钮，出现下一张图片，同时选项卡的背景颜色也发生变化。以下为实现代码：首先为html代码，创建一个大盒子将选项卡部分和

saiyi绒小花·2023-03-29 01:00

React：jsx语法、数据驱动的设计思想和事件绑定、TodoList练习

jsx语法一、jsx语法中有两种标签：1、普通的html标签：在组件中返回出去渲染的标签内容不需要像原生js那样加引号2、组件标签：例如入口文件index.js中，渲染App组件内容时，写成首字母必须大写二

我的皎月闻越香_·2023-03-28 10:02

原生js实现ajax

functionajax(options){//let{url,success,err,data,dataType,type}=optionsletxhr=newXMLHttpRequest()//XMLHttpRequest对象用于在后台与服务器交换数据//xhr.readyState：0options.data=options.data||{}options.dataType=options.

梦梦_087a·2023-03-27 22:02

移动端H5开发输入框fixed定位失效

如果是在原生JS中直接使用scrollIntoView就好了。

龚达耶·2023-03-27 09:02

开源项目 —— 原生JS实现斗地主游戏 ——代码极少、功能都有、直接粘贴即用

目录效果如下目录结构GameEntity.jsGrawGame.jskonva.min.jsPlayGame.jsveriable.jsindex.html结语：前期回顾卡通形象人物2写代码-睡觉丝滑如德芙_0.活在风浪里的博客-CSDN博客本文实现了包含形象的卡通小人吃、睡、电脑工作的网页动画https://blog.csdn.net/m0_57904695/article/details/12

0.活在风浪里·2023-03-27 00:11

Vue项目实战 —— 后台管理系统( pc端 ) —— Pro最终版本

前期回顾开源项目——原生JS实现斗地主游戏——代码极少、功能都有、直接粘贴即用_js斗地主_0.活在风浪里的博客-CSDN博客JS实现斗地主网页游戏https://blog.csdn.net/m0_57904695

0.活在风浪里·2023-03-26 23:03

react实现拖拽容器边框改变容器宽度

原生js中已经提供了相应的api：onmousedown(鼠标按下事件)、onmousemove(鼠标按下后元素移动事件)、onmouseup(松开鼠标事件)，快忘记的同学正好可以熟悉巩固一波。

我没事_就是有点难受·2023-03-26 16:22

原生js实现音乐列表（隔行换色、全选）

一、实现原理：1、使用%运算符实现各行换色，规律：当%前面的值和后面的值相同时结果为0；2、使用开关思想，实现在同一个元素上反复点击时的条件判断，并且把开关以属性方式绑定在每个元素上；3、使用大总管变量，记录鼠标移入时的下标,用于设置鼠标离开时的颜色4、使用变量记录每选中一行就自增1取消选中就自减1，当变量数值与行的长度相等时说明全选了；二、代码：*{margin:0;padding:0}ul,l

雅士伊人·2023-03-26 07:30

原生js实现歌词滚动以及卡拉OK效果

干货转自网易实践者社区，感谢作者【严跃杰】【歌词滚动效果】滚动歌词比较常见的一种歌词显示方式，今天我们来讨论如何通过原生js来完成一个简单的滚动歌词实现。

zwwill·2023-03-25 15:11

原生js实现滚动歌词

滚动歌词界面思路：1、获得歌词文本后，通过正则将时间和歌词分别放在一个数组里2、根据歌词文本的换行符创建对应数目的li，并将歌词文本放入li中3、触发audio的timeupdate时间，按照播放时间使对应歌词处于中间位置效果：一、html和css*{margin:0;padding:0;}div{width:300px;height:254px;border:1pxsolidblanchedal

qq_42736234·2023-03-25 15:41

html原生js进度条圆形,原生JavaScript实现进度条

JavaScript实现进度条的具体代码，供大家参考，具体内容如下进度条实现介绍使用JavaScript实现进度条功能。原理：通过鼠标移动事件，获取鼠标移动的距离。步骤：(1)html中div布局(2)css样式编写(3)JavaScript特效编写html代码0%css样式/*整体样式，消除默认样式*/body{margin:0;padding:0;}#box{position:relative

skr汉子·2023-03-25 14:00

html原生js进度条圆形,原生 JavaScript 实现进度条

原生JavaScript特效JavaScript实现进度进度条实现介绍使用JavaScript实现进度条功能。原理：通过鼠标移动事件，获取鼠标移动的距离。步骤：(1)html中div布局(2)css样式编写(3)JavaScript特效编写html代码0%css样式/*整体样式，消除默认样式*/body{margin:0;padding:0;}#box{position:relative;widt

西岸先生·2023-03-25 14:00

原生js javascript 实现进度条拖动---移动端

最近的需求有个简单的移动端页面，需要在页面中实现一个进度条的拖动，因为没引入什么框架，所以只能原生JavaScript手写了，效果图：代码：这些代码可以复制到本地一个html文件中，直接双击打开，但是注意：因为是针对移动端的，所以要在浏览器的手机模式下才能用！！！Document百分比：letwrap=document.getElementById("wrap");letbox=document.

一只爱吃糖的小羊·2023-03-25 14:07

原生JS读取本地选择的文件

DocumentfunctiononChange(event){constfile=event.target.files[0];console.log(event,file);constreader=newFileReader();reader.onloadend=(arg)=>{console.log(reader.result);};reader.readAsDataURL(file);}

银魂飞雪·2023-03-25 11:34

面试

1.依赖注入2.原生js的内存释放3.管道4.对比别人的优势5.你了解的设计模式6.原生链跟闭包的理解7.javascript跟angular的区别8.去重9，浏览器的调试工具都有啥1.闭包2.get请求跟

花落未晚·2023-03-25 09:42

原生js封装ajax请求

下面方法只是简单封装，用来理解原生ajax原理调用方法ajax({method:'post',url:'user-center/app/shop/follow',data:{access_token:12312,shop_id:123123},success:function(response){console.log(response);}});封装方法functionajax(opt){opt

追梦_3c87·2023-03-24 04:20

详解前端性能优化之原生JS实现图片懒加载效果(通过IntersectionObserver内置构造函数实现)

这其中有许多方式，其中最常用的无非是按需加载了，今天就带大家重点且详细的讲一下原生JS实现的图片懒加载。

不读诗意·2023-03-24 00:14

jQuery的 one 方法

在给函数绑定事件的时候，可以在事件触发一次的时候，就取消掉事件绑定，这样有两个好处，一是有的需求是只希望完成事件被触发第一次时产生效果，二是事件监听是浪费资源的，这样可以只在需要的时候监听jqueryone使用示例使用原生

cc_a818·2023-03-21 22:50

javascript 滚动条组件 js-scrollbar 原生js 无引用

最近在找js的滚动条组件没找到特别合适的自己造了个轮子有用的上的可以拿走js滚动条组件@xpf0000/js-scrollbar特性原生代码,无引用自定义滚动条样式尽量减少对页面的侵入度,只增加两个横竖div滚动条自动监听尺寸和内容变化,自动响应鼠标无动作,自动隐藏,可开启关闭安装npminstall@xpf0000/js-scrollbar使用import{XScrollBar}from"@xp

非常帅气的昵称吧·2023-03-21 16:58

JQuery知识总结

基础jquery获取元素的方法：$()在jQuery中，只有一个全局变量$,这是jQuery的一大特点，避免了全局变量的污染jquery对象：$()方法获取到的内容叫做jQuery对象jQuery对象中原生

Aaron胖虎·2023-03-21 04:55

jq到原生js转换

Xinxing_Li·2023-03-21 02:10

原生js中setInterval简单小案列

菜鸟教程(runoob.com)#myProgress{width:100%;height:30px;position:relative;background-color:#ddd;}#myBar{background-color:#4CAF50;width:10px;height:30px;position:absolute;}JavaScript进度条点我varelem=document.ge

Miracle_6e4f·2023-03-20 22:51

原生js模仿QQ空间留言版

代码很简单，主要是利用createElement、appendChild、removeChild来创建、添加和删除元素。使用textarea标签作为输入框，button提交。表单提交后还得刷新页面，所以就没有使用。刚学习htmldom可能有些地方写得很蠢，欢迎批评指正。github地址：https://github.com/llycc/learn-js。以下是代码。MessageBoard.con

llycc·2023-03-20 18:06

原生js实现仿京东商品放大镜效果

文章目录一、执行效果二、代码结构1.HTMLCSS2.js三、易错点四、代码五、图片一、执行效果二、代码结构1.HTMLCSSclass="preview"的div里面放小图片、黄色遮罩层和大图片给黄色遮罩层和大图片position:absolute;，并定位至对应位置大图片的div给固定宽高，图片超出部分overflow:hidden;cursor:move;给黄色遮罩层一个鼠标看起来可移动的样

小火娃·2023-03-19 15:35

H5 EPG异常排查兼容处理

由于很多盒子机型比较老，所以大多数情况都是用原生js进行开发，但还是会有很多需要适配和浏览器上不存在的问题。input焦点问题如果页面上不只有一个input输入框，默认会有一个获得焦点。

牛奶是本命___·2023-03-19 11:02

js原生—— 无缝轮播

今天分享前端开发学习中的一个很经典的案例——原生JS实现无缝轮播图。

JennyWeb·2023-03-19 11:55

基于原生JS封装的Modal对话框插件

基于原生JS封装Modal对话框插件原生JS封装Modal对话框插件，个人用来学习原理与思想，只有简单的基本框架的实现，可在此基础上添加更多配置项API配置//基本语法letmodal=ModalPlugin

马涛涛_风·2023-03-18 21:17

H5拖放

一字之差，代表的意义是不一样的，拖拽就是拉着走，拖放就是有拖，有放，我们都知道原生JS拖拽效果的缺点：1.代码相对复杂与冗余2.仅限于在浏览器内的元素间拖放3、不能实现跨页面的拖放所以H5就出现了拖放技术

入戏半分笑·2023-03-18 17:39

淘宝购物车web页面模仿

采用HTML+CSS+原生JS手写，未使用组件开发。

Cristine_LZ·2023-03-18 16:01

原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

一、原生JS事件绑定方法：1、通过ＨＴＭＬ属性进行事件处理函数的绑定如：＜ahref="#"onclick="f()"＞2、通过JavaScript对象属性进行绑定：vara=document.getElementById

af13e05a9b9a·2023-03-17 10:53

Node后台开发

对于前端开发人员，使用原生JS+Node.js即可实现简单的后台开发，上手速度快，也可以锻炼自己成为全干(栈)工程师。

打酱油12138·2023-03-17 04:02

vue + 原生js form表单下载文件

leturl=window.location.origin;//获取页面（'?'前边的URL）链接letparams={//参数Path:path,FileName:name,};//创建formletform=document.createElement('form');form.id='form';form.name='form';document.body.appendChild(form)

who_are_you_·2023-03-17 01:06

原生JS读写文件

我一直以为读写本地文件只有node能实现，但是昨天搞了一个chrome浏览器的拓展应用，不能使用node（可以运行node，但是不能读写文件，那还用毛node），直接用原生js干凿，但是我要实现的功能就是要读写文件

文者字清·2023-03-16 20:17

Vue 初体验

Vue初体验原生JS写项目的问题语法冗长，复杂，操作页面麻烦，效率低JQuery开发的问题提供了简单的api，简化了操作dom的方式但是没有对业务逻辑分层，需要维护数据和dom之间的同步MVVMM:model

程行者·2023-03-16 06:17

前端面试题型汇总（适合社招两-三年水平）

目录原生JSajax，fetch和axios手撕代码题React关于fiber结构ReactHooks原理Re

友人C君~·2023-03-15 14:27

实现一个简单的jQuery

jQuery说到底是一个函数对象，一个通过原生js实现了某些功能的函数，被封装成了一个js对象。

si_月·2023-03-14 18:39

原生js实现双向数据绑定

原理本篇是使用Object.defineProperty()来实现双向绑定该方法提供一个对象的get&set回调，即当对象发生变化时会调取这两个方法，以此来实现修改对应的dom源代码121213varobj={}bindDomWithObject({id:'bv2d',obj:obj,prop:'name',type:'change',updated:function(obj,prop,dom){

LElysion·2023-03-14 14:05

jQuery 常用API

能够写出常用的jQuery选择器能够操作jQuery样式能够写出常用的jQuery动画能够操作jQuery属性能够操作jQuery元素能够操作jQuery元素尺寸、位置jQuery选择器jQuery基础选择器原生

CaptainDrake·2023-03-14 13:18

js常用的循环和判断

最常用的if判断语句：if(/*条件表达式*/){//成立执行语句}else{//否则执行语句}原生js的--for循环：//for循环的表达式之间用的是;号分隔的，千万不要写成,for(初始化;判断;

G_zefeng·2023-03-14 12:54

原生js获取地址栏参数

ps:项目太忙，忘记从哪搬来的了，做个记录收藏一下主要方法代码//核心代码//获取全部地址栏参数functiongetUrlParams(){varvars={}window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,function(m,key,value){vars[key]=value})returnvars}//获取指定地址栏参数fun

前端勾魂师·2023-03-14 05:08

使用websocket搭建一个简单的聊天室

而前端则不采用框架，直接就是原生js加c

咩也都唔识·2023-03-13 19:00

原生JS手写一个可拖拽的进度条

Document#progress{height:20px;width:500px;background-color:#ccc;border-radius:8px;position:relative;}#progress_pill{position:absolute;border-radius:8px00px8px;height:100%;background-color:red;left:0;t

Thesand·2023-03-13 19:45

谷歌浏览器获取本地json文件跨域问题及JSONP的应用

最近需要读取本地json文件，找到了原生js方式和ajax方式，都会报跨域的问题。于是研究了下什么是跨域，为什么会跨域，以及JSONP解决方案的运用。一、我是怎么遇到跨域问题的？

celineWong7·2023-03-13 04:16

推荐频道

原生Jｓ