本文实例讲述了原生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...