原生JavaScript案例
关注
分享
扫一扫
文章平均质量分 54
lybinWeb
这个作者很懒，什么都没留下…
展开
-
【JavaScript 工具类函数】日期格式化：类似于将20220901转换为2022-9-1
【代码】【JavaScript 工具类函数】日期格式化：类似于将20220901转换为2022-9-1。原创 2022-09-02 14:48:33 · 1520 阅读 · 0 评论 -
【原生JavaScript案例】原生JS模块化开发京东主页二级侧拉效果（用户鼠标行为预测行为）
案例源码仿京东主页二级菜单侧拉效果原创 2022-06-17 18:44:13 · 211 阅读 · 0 评论 -
【原生JavaScript案例】原生JS模块化开发手机信息展示列表
源码地址案例地址原创 2022-06-16 12:47:56 · 329 阅读 · 0 评论 -
【原生Javascript案例】原生JS案例之京东搜索框
JS模块化开发京东搜索框案例源码源码地址原创 2022-06-15 21:44:18 · 279 阅读 · 0 评论 -
【原生Javascript案例】原生JS之TodoList面向对象化开发
【原生Javascript案例】原生JS之TodoList面向对象化开发原创 2022-06-14 13:14:42 · 252 阅读 · 0 评论 -
【原生JavaScript案例】原生JS封装拖拽与双击事件分离右键自定义菜单函数
【原生JavaScript案例】原生JS封装拖拽与双击事件分离右键自定义菜单函数原创 2022-06-13 21:52:47 · 373 阅读 · 0 评论 -
【原生Javascript案例】原生JS之TodoList模块化开发
项目源码地址原生JS模块化开发todoList原创 2022-06-12 17:19:05 · 230 阅读 · 0 评论 -
【原生Javascript案例】封装小说阅读器插件
原生JS开发小说阅读器插件原创 2022-06-11 17:45:08 · 893 阅读 · 0 评论 -
【原生Javascript案例】圆形进度条
案例效果代码编写<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原创 2022-03-21 14:58:01 · 1426 阅读 · 0 评论 -
【原生JavaScript案例】数组中对象的去重
注意：如下代码里的 `orgcode`是数据源中的key/* 数组中对象的去重 */ export const removeEqual = (arr) => { let res = [] let obj = {} for(let i = 0; i < arr.length; i++) { if(!obj[arr[i].orgcode]) { res.push(arr[i]) obj[arr[i].orgcode] = true } }原创 2022-02-18 09:45:53 · 313 阅读 · 0 评论 -
【原生JavaScript案例】最简单的方式实现3d轮播图
文章目录案例效果案例分析结构布局样式处理逻辑处理案例效果案例分析将该案例效果分为三层，最上面的图片是一层，最下边的图片(最小的图片)是一层，中间两张一样大小的图片是一层。使用JS动态改变类名就好了。结构布局<div class="container"> <div class="slider-3d"> <div class="slider-item first"> <a href=""> <img src="./img/1.原创 2022-01-05 10:41:17 · 1113 阅读 · 0 评论 -
【原生JavaScript案例】原生JS实现进度条
案例效果案例逻辑前提：我们需要一个根节点，用来将进度条插入到该节点里根节点：<div id='app'></div>主逻辑：let oApp = document.querySelector('#app'), // 根节点 fragment = document.createDocumentFragment(), // 创建空白的文档片段 oProgressBar = document.createElement('div'); // 进度条节点原创 2021-12-29 10:51:53 · 1118 阅读 · 0 评论 -
【原生JavaScript案例】拖拽回弹吸附 猜成语小游戏
文章目录案例效果视图布局处理字体大小HTML结构CSS逻辑案例效果视图布局处理字体大小16px = 1.6rem<script type="text/javascript"> document.documentElement.style.fontSize = document.documentElement.clientWidth / 37.5 + 'px';</script>HTML结构<div class="blank-cell-group"&原创 2021-12-24 11:02:01 · 3011 阅读 · 0 评论 -
【原生JavaScript案例】移动端全屏滑动
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <script type="text/javascript"> document.documentElement.style.f原创 2021-12-17 17:12:47 · 892 阅读 · 0 评论 -
【原生JavaScript案例之模块化开发技巧】腾讯课堂课程分类功能（模板渲染+ES5+jQuery实现）
原生JavaScript案例原创 2021-12-09 17:28:56 · 729 阅读 · 0 评论 -
【原生JavaScript案例之模块化开发技巧】选项卡（ES6模块化版本）
文章目录ES6模块化版本项目结构项目模块代码项目根节点 index.html项目入口 app.js选项卡模块 Tab.js项目数据 city.js项目组件 tab项目工具 tools.jsES6模块化版本项目使用webpack配置项目结构项目模块代码项目根节点 index.html<div id="app"></div>项目入口 app.jsimport Tab from '../modules/Tab';((doc) => { const oAp原创 2021-12-08 10:48:32 · 430 阅读 · 0 评论 -
【原生JavaScript案例之模块化开发技巧】选项卡之模块化版本与JS动态渲染视图版本（面向对象思想）
文章目录ES5模块化版本主入口`index.html``index.css``index.js`工具函数`tools.js`JS动态渲染视图版本`index.html``index.js``tools.js`ES5模块化版本选项卡DEMO主入口index.html<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="widt原创 2021-12-07 17:01:33 · 181 阅读 · 0 评论 -
【原生JavaScript案例】简易计算器（*使用ES5高度封装函数实现计算器功能并且使用webpack+ES6以类的方式重构代码）
文章目录JavaScript Demo简易计算器（ES5版本）index.htmlindex.jstools.js简易计算器（webpack + ES6 版本）一、webpack 配置First step:Second step:Third step:Forth step:fifth step:`webpack.config.js`二、安装依赖启动项目开启`webpack server`三、模块化开发项目结构装饰器配置1、`index.html` | `index.js`2、src/modules/`Cal原创 2021-12-07 13:46:23 · 783 阅读 · 0 评论 -
【WebSocket 聊天室实现】核心业务代码（原生Javascrip、Vue2、Vue3分别实现）
文章目录前言原生JavaScript实现前端entry.htmlentry.jsindex.htmlindex.js后端Vue2实现Vue3实现config/index.jshooks/index.jshooks/websocket.jsrouter/index.jshome.vuelogin.vue完整项目gitee地址使用 ws 库来实现后台逻辑前端使用 vite 来进行项目管理前言websocket基本知识储备如下：## websocket 1. open 2. close 3.原创 2021-12-01 17:33:43 · 1235 阅读 · 0 评论 -
【原生JavaScript案例】原生实现选项卡（IIFE实现）
准备结构通过div中的data属性下的数据来渲染选项卡。<div id="my-tab" data='[ { "tab":"选项一", "page":"页面一" }, { "tab":"选项二", "page":"页面二" } ]' ></div>逻辑实现模板方法var tpl = (function () { function tab(field) { // body... swi原创 2021-10-25 14:13:22 · 132 阅读 · 0 评论 -
【原生JavaScript案例】点击某个元素，返回对应的下标
文章目录JavaScript 立即执行函数案例需求：效果：代码实现：JavaScript 立即执行函数案例需求：页面上有五个li标签，点击li返回对应的下标。比如点击文本为2的li元素，他对应的下标是1，所以返回1效果：代码实现：<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li>&l原创 2021-08-01 15:14:11 · 406 阅读 · 0 评论