【一个关于原生 js 开发一款插件的前端教程】的更多相关文章

一个关于原生 js 开发一款插件的前端教程

教程链接: http://www.codeasily.net/course/plugin_course/ 写的不是很好,前面比较松后面比较急,请大家见谅,本人也没多少年前端经验,拿以前写过的教程网站,加上自己有个开源项目,可以拿出来讲一讲.也算是圆了一直以来想写关于原生 js 开发的教程的小目标…

一个基于原生JavaScript开发的、轻量的验证码生成插件

Vcode.js 一个基于原生JavaScript开发的.轻量的验证码生成插件 V: 1.0.0 DEMO:https://jofunliang.github.io/Vcode.js/example.html 安装 <script src="Vcode.min.js"></script> OR // ES6 Modules or TypeScript import vcode from 'Vcode' // CommonJS const vcode = requ…

原生js开发，无依赖、轻量级的现代浏览器图片懒加载插件，适合在移动端开发使用

优势 1.原生js开发,不依赖任何框架或库 2.支持将各种宽高不一致的图片,自动剪切成默认图片的宽高 比如说你的默认图片是一张正方形的图片,则各种宽度高度不一样的图片,自动剪切成正方形. 完美解决移动端开发中,用户上传图片宽高不一致而导致的图片变形的问题 3.简洁的API,让你分分钟入门!!! 代码如下[默认模式,不对图片进行剪切]:<!DOCTYPE html><html lang="en"> <head> <meta charset=&qu…

原生js封装十字参考线插件(一)

需求来源: 拓扑图之机房平面图,显示机房长宽比例尺,房间内标注各种设备间距不易实现,特在机房平面图上层加一个十字参考线 横竖两条线垂直,在鼠标指针处交叉,显示鼠标指针坐标(相对机房平面图的坐标,不是相对于浏览器) 在需要时开启,用完关闭 项目用的是vue,并未引入jQuery,所以直接原生js封装的,部分代码用到ES6语法 效果如图: 关闭状态 开启状态 封装后,开放三个参数功能: 开关按钮:开启参考线 父级div: 参考线颜色:color:"#ff0000",默认红色 调用方法 参数…

你是否有一个梦想？用JavaScript[vue.js、react.js......]开发一款自定义配置视频播放器

前言沉寂了一周了,打算把这几天的结果呈现给大家.这几天抽空就一直在搞一个自定义视频播放器,为什么会有如此想法?是因为之前看一些学习视频网站时,看到它们做的视频播放器非常Nice!于是,就打算抽空开发一款属于自己的视频播放器.话不多说,一起来实战吧!项目展示在这里插入图片描述(这只是一张图片哦~)这张图就是我们的成品,还等什么?赶紧来实战吧!实战我会把完整源码放在github上,欢迎来star,地址在文末.首先,我们会使用最原生的JavaScript来实现,老大哥肯定要打头阵啊!一.JavaScr…

Wavesurfer.js音频播放器插件的使用教程

Wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件,本文主要记录它及其视觉效果插件Regions插件的使用方法. 1.创建实例 引入插件 import WaveSurfer from "wavesurfer.js"; 创建实例对象 this.wavesurfer = WaveSurfer.create(options); options 参数 默认值 说明 audioRate 1 音频的播放速度,数值越小越慢 barWidth none 如…

如何用原生js开发一个Chrome扩展程序

原文地址:How to Build a Simple Chrome Extension in Vanilla JavaScript 开发一个Chrome扩展程序非常简单,只需要使用原生的js就可以完成,在本文中,我将在几分钟内引导你完成一个简单的扩展程序 关于Chrome扩展程序 Chrome 扩展程序本质上只是一组可以自定义 Google Chrome 浏览器体验的文件.Chrome 扩展程序有几种不同的类型:有些在满足某个特定条件时激活,例如当你来到商店的结账页面时:有些只在你点击图标时弹出…

前端每日实战：116# 视频演示如何用 CSS 和原生 JS 开发一个监控网络连接状态的页面

效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oPjWvw 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, safari, edge 打开观看. https://scrimba.com/p/pEgDAM/ceNm8CW 源代码下载 每日前端实战系列的全部源代码请从 github 下载: https://github.com/comehope/f…

原生JS实现图片放大镜插件

  前  言 我们大家经常逛各种电商类的网站,商品的细节就需要用到放大镜,这个大家一定不陌生,今天我们就做一个图片放大镜的插件,来看看图片是如何被放大的…… 先看一下我们要是实现的最终效果是怎么样的    ↓ 看完效果,大家有思路了吗,没有的话,我们一起来看一下是如何实现的~ 1实现思路 ① 要实现指上后放大的效果,需要做三个div,一个用来放原图,另一个用来放放大效果的div,最后一个是鼠标指上后需要放大部分的div(这个div我们用p标签来代替). ② 确定放大比例,最重要的一点,鼠标指上的…

分享一个使用 vue.js 开发的网站

点我 惠淘党 照着文档和google开发,只花了一个多星期.依赖包如下 { "name": "vue-htd", "version": "1.0.0", "description": "Vue.js Project", "author": "", "private": true, "scripts": { &…