本文实例讲述了原生js添加一个或多个类名的方法。分享给大家供大家参考,具体如下: 好吧今天写个js,不知道怎么添加类名了 <!DOCTYPE html> <html lang="en"><head><meta charset="utf-8"><title></title><style type="text/css" media="screen">#box {width: 200px;height: 200px;margin: 0 auto;background: pink;border-radius: 20px;}@keyframes move{0%{width: 500px; background-color: red;}10%{width: 100px; background-...
前言 本文主要介绍如何使用原生js,通过面向对象的方式实现一个文件上传预览的组件,该组件利用FileReader来实现文件在前端的解析,预览,读取进度等功能,并对外暴露相应api来实现用户自定义的需求,比如文件上传,进度监听,自定义样式,读取成功回调等。组件设计架构如下:涉及的核心知识点如下: 闭包:减少变量污染,缩短变量查找范围自执行函数file API:对文件进行读取,解析,监控文件事件DocumentFragment API:主要用来优...
这个小游戏可以设置为抽奖小游戏,也可以设置为随机点名器,这个软件实现可以多次获取同一个元素的1、HTML结构代码如下: <div class="wrapper"><ul class="box"></ul><button class="start">开始点名</button><button class="stop">停止</button><div class="choose"><span class="niu">幸运的的你</span><img src="~/Content/img1/1.gif" /> <span class="name"></span></div> </div>2、css样式设置页面代码如下:css代码不...
jquery里面有个each方法,将循环操作简化、便捷。 随后es出了个forEach方法,两个虽然用法相近,但是不能处理对象类型。且无法通过return true达到continue效果。 此外还有个every方法,该方法虽然可以实现continue效果,但是在处理类数组与对象类型时,完全无用。 在不使用 jquery 的 each 方法时,该如何处理;或者说用原生如何来实现? 前些前写了个类库: jTool , 其中就实现了该方法。 简单实现: // 通过字面量方式实现的函数e...
前言 在开发中经常会在DOM上存储一些自定义数据,我们可以通过setAttribute方法来实现。但是当数据为引用类型时,存储后的数据却无效。这里将用原生的JS对data方法进行实现。使用setAttribute:<div id="test-data"></div> <p class="test-data-list"></p> <p class="test-data-list"></p> <p class="test-data-list"></p> <p class="test-data-list"></p> var testData = document.querySeletor(#test-data); testData.setAttribut...
1.分析 当消息被触发的时候,会有一个自上而下的淡入过程。 在持续了一段时间后会自动的消失,或者是需要用户来手动的点击关闭按钮。 在消息消失的时候,会有一个自下而上的淡出过程。 消息是可以叠加弹出的,最新的消息会排在消息列表的最后面。 当前面的消息消失后,后面的消息会有一个向上滑动效果。 然后消息本身是有三部分组成 消息图标,用来区分不同类型的消息。 消息文本。 关闭按钮,并不是所有消息都需要关闭按钮。2. 实...
这是一个简易的js无限循环轮播图,只用了一行js代码就实现了无限循环,记录一下三目运算符的伟大! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } ul,li{ list-style: none; } .container { width: 600px; heig...
一、实现的功能 1、基于oop思想构建,支持坐标点、线条(由坐标点组成,包含方向)、多边形(由多个坐标点组成)、圆形(包含圆心坐标点和半径)等实体 2、原生JavaScript实现,不依赖任何第三方js库和插件 3、多图形绘制(支持画笔、线条、箭头、三角形、矩形、平行四边形、梯形以及多边形和圆形绘制) 4、拖拽式绘制(鼠标移动过程中不断进行canvas重绘) 5、图片绘制(作为背景图片时重绘会发生闪烁现象,暂时有点问题,后面继续...
前言 事件绑定成功之后,事件的执行函数就如同待字闺中的小姑娘。除了由坐在电脑前的大叔们用键盘、鼠标等硬件行为触发外,需要在代码中直接调用又该如何实现?首先需要将事件绑定至指定DOM节点上// 在一个节点上绑定一个事件 let test = document.createElement(div); test.id = test; test.innerHTML = 测试事件; document.body.appendChild(test); test.addEventListener(mousedown, function(){console.log(hello jTool); }, f...
效果展示 (鼠标移入,滚动停止;鼠标移出,滚动继续)实现原理1. html结构:核心是ul > li,ul外层包裹着div。因为想要内容循环滚动无缝衔接,所以在原有ul后面还要有一个一样内容的ul。如下图: (红色边框为可视区域div,此处为了方便查看效果去除overflow:hidden;)2. 样式方面:由于要滚动,所以必须2个ul的高度 > 外层可视div高度,且div必须设置overflow:hidden; 代码实现 HTML:<div id="review_box"><ul id="comment1...
今天我们来聊一下怎么使用原生javascript编写一个简单的框选功能。需求描述 鼠标左键按下不放,移动鼠标出现矩形选框;鼠标左键松开,根据上边出现的矩形选框统计选框范围内的DOM元素;嗯...上边的功能描述看着是挺简单的,但实现起来也还是会有些地方需要斟酌思考的。比如,如果我们的框选范围不是document.body,而是某一个div里边进行框选呢?而现实开发过程中,我们会遇上的应该就是第二种情况。点击查看完整的源码 怎么实现二...
1. 添加新元素 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态添加新元素</title> </head> <body><ul class="example"><li class="child">Coffee</li><li class="child">Tea</li><li class="child">Coffee</li><li class="child">Tea</li> </ul><script> var child = document.getElementsByClassName("child")[0];var newChild = document.createElement("li");var newText = document.createTextNode("wine"...
核心思想 ?随机产生规定范围内的整数,然后再产生相同范围内的整数,两者相同时,则暂停。 所用知识 ?Math.random() * num: 产生从0到num的随机数 ?Math.floor(): 向下取整 ?简单的DOM操作等 技术扩展 ?扩展人数 ?添加停止键等 效果代码如下 ?html:<div class="container"><section class="demo"><ul><li></li><li></li><li></li></ul></section><section class="students"><ul></ul></section><section class="buttonList"><ul><l...
在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况。我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片。所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再加载更多的图片。这种加载图片的方式叫做图片懒加载,又叫做按需加载或图片的延时加载。这样做的好处是:1.可以加快页面首屏渲染的速度;2.节约用户的流量。 一.实现思路 1.图片img标签自定义一个属性data-src来存放...
都知道浏览器和服务端是通过 HTTP 协议进行数据传输的,而 HTTP 协议又是纯文本协议,那么浏览器在得到服务端传输过来的 HTML 字符串,是如何解析成真实的 DOM 元素的呢,也就是我们常说的生成 DOM Tree,最近了解到状态机这样一个概念,于是就萌生一个想法,实现一个 innerHTML 功能的函数,也算是小小的实践一下。 函数原型 我们实现一个如下的函数,参数是 DOM 元素和 HTML 字符串,将 HTML 字符串转换成真实的 DOM 元素且 appe...