随笔分类 -  javascript实例教程

使用原生js开发各种前端工作中实用的案例，尽可能详细的解释实现的具体步骤和每一句代码的功能。
整理 js 日期对象的详细功能，使用 js 日期对象获取具体日期、昨天、今天、明天、每月天数、时间戳等，以及常用的日期时间处理方法
摘要：在 javascript 中内置了一个 Date 对象，可用于实现一些日期和时间的操作。 本文整理 js 日期对象的详细功能，使用 js 日期对象获取具体日期、昨天、今天、明天、每月天数、时间戳等，以及常用的日期时间处理方法。 阅读全文
posted @ 2022-12-04 18:50 蒋伟平 阅读(4635) 评论(2) 推荐(1)
使用css3和javascript开发web拾色器实例
摘要：本实例中的web拾色器功能使用css3实现页面效果，即在页面上显示的元素用css3样式来实现的。再使用js生成拾色器颜色数据，并控制各元素的鼠标事件。当事件作为反应时，获取到对应的数据并显示颜色值。 拾色器的html元素分为三个部分，分别是拾色区域、色系区域和颜色显示区域，如图所示： web拾色器三 阅读全文
posted @ 2021-03-11 22:44 蒋伟平 阅读(1084) 评论(1) 推荐(1)
原生js日历选择器，学习js面向对象开发日历插件
摘要：在web开发过程中经常会碰到需要选择日期的功能，一般的操作都是在文本框点击，然后弹出日历选择框，直接选择日期就可以在文本框显示选择的日期。开发好之后给用户使用是很方便，但如果每一个日历选择器都要临时开发的话，会严重影响项目进度。所以网上有很多日历插件提供下载使用。在实际工作中，日历选择器功能确实都是直接使用已开发好的插件。但作为一个前端工程师，还是需要知道具体实例方法，也应该有能力完成此类功能。本实例教程详细讲解怎么样使用原生js，通过面向对象来开发一个日历选择器插件。 阅读全文
posted @ 2021-03-04 22:20 蒋伟平 阅读(1340) 评论(6) 推荐(1)
原生javascript开发计算器实例
摘要：计算器的主要作用是进行数字运算，开发一个计算器功能的web实例，有助于更好的掌握js基础的数字运算能力。本实例旨在帮助js计算能力有待提高的读者，通过自己一步一步开发完成计算器功能，熟悉js数字处理方法。 阅读全文
posted @ 2021-02-21 12:28 蒋伟平 阅读(1219) 评论(0) 推荐(2)
通过js正则表达式实例学习正则表达式基本语法
摘要：正则表达式对于初学者来说是一个比较难理解的知识点，本文主要以实例来讲解正则表达式应该怎么样使用，希望对读者有所帮助 阅读全文
posted @ 2021-02-10 20:44 蒋伟平 阅读(496) 评论(0) 推荐(0)
js面向对象封装级联下拉菜单列表
摘要：本实例开发的级联下拉菜单是根据已有json数据创建的DOM元素。点击文本框后，显示一级菜单。如果菜单中包含子菜单，菜单右侧会有指示箭头。点击菜单之后，会再显示下一级菜单，以此类推。当菜单下无子菜单时，选择菜单后会在文本框中显示。 阅读全文
posted @ 2021-02-07 20:24 蒋伟平 阅读(1157) 评论(1) 推荐(0)
原生js拖拽功能制作滑动条实例教程
摘要：拖拽属于前端常见的功能，很多效果都会用到js的拖拽功能。滑动条的核心功能也就是使用js拖拽滑块来修改位置。一个完整的滑动条包括 滑动条、滑动痕迹、滑块、文本 等元素 阅读全文
posted @ 2021-02-04 21:00 蒋伟平 阅读(2279) 评论(0) 推荐(2)
通过模拟数据，使用js在前端实现模糊查询下拉框功能实例教程
摘要：所谓模糊查询就是通过关键字在数据中匹配到包含关键字的数据，而得出的查询结果。在实际工作中，大部分情况的模糊查询功能都是把关键字交给后台从数据库中检索再把结果返回给前端。本实例教程讲解的是在前端文本框输入关键字，显示匹配的数据列表功能。 阅读全文
posted @ 2021-02-02 21:09 蒋伟平 阅读(1183) 评论(0) 推荐(0)
原生js使用面向对象的方法开发选项卡实例教程
摘要：本教程通过js面向对象的方法来封装一个选项卡的实例，在实例中讲解js的面向对象如何实现功能。 一般封装好的选项卡程序，只需要一个div元素即可。其它元素都是通过json数据来生成，所以封装好的选项卡实例，调用非常方便。先创建一个div元素，如下所示： <div class="tab_box" cla 阅读全文
posted @ 2021-01-29 20:30 蒋伟平 阅读(487) 评论(0) 推荐(1)
前端基础功能，原生js实现轮播图实例教程
摘要：轮播图是前端最基本、最常见的功能，不论web端还是移动端，大平台还是小网站，大多在首页都会放一个轮播图效果。本教程讲解怎么实现一个简单的轮播图效果。学习本教程之前，读者需要具备html和css技能，同时需要有简单的javascript基础。 本实例效果如下图所示： 根据实例效果，需要的元素有图片、中 阅读全文
posted @ 2021-01-21 20:53 蒋伟平 阅读(1909) 评论(0) 推荐(0)
原生js制作表单验证，基本的表单验证方法
摘要：表单验证是web前端最常见的功能之一，也属于前端开发的基本功。自己完成一个表单验证的开发，也有助于加深对字符串处理和正则表达式的理解。 基本的表单验证包括如：字母验证、数字验证、字母和数字验证、汉字验证、密码验证、日期验证、手机验证、邮箱验证，密码验证等。 现在就来完成这些验证代码的编写，先来看字母 阅读全文
posted @ 2021-01-20 21:09 蒋伟平 阅读(3335) 评论(0) 推荐(1)
纯原生javascript下拉框表单美化实例教程
摘要：html的表单有很强大的功能，在web早期的时候，表单是页面向服务器发起通信的主要渠道。但有些表单元素的样式没办法通过添加css样式来达到满意的效果，而且不同的浏览器之间设置的样式还存在兼容问题，比如下拉框。 本实例通过创建div和li等元素来生成一个模拟下拉框，以达到美化下拉框的效果。学习本教程之 阅读全文
posted @ 2021-01-18 21:24 蒋伟平 阅读(7294) 评论(0) 推荐(1)
原生javascript制作省市区三级联动详细教程
摘要：多级联动下拉菜单是前端常见的效果，省市区三级联动又属于其中最典型的案例。多级联动一般都是与数据相关联的，根据数据来生成和修改联动的下拉菜单。完成一个多级联动效果，有助于增强对数据处理的能力。 本实例以省市区三级联动为例，来说明具体是如何使用javascript来关联数据，实现联动下拉菜单。学习本教程 阅读全文
posted @ 2021-01-17 20:10 蒋伟平 阅读(3654) 评论(2) 推荐(2)
javascript实例教程使用canvas技术模仿echarts柱状图
摘要：开源的可视化图表库ECharts，功能非常强大，可以实现折线图、柱状图、散点图、饼图、K线图、地图等多种图表。本实例教程使用原生js通过canvas技术开发一个简单仿ECharts的柱状图。每一行代码都有完整的注释，学习本教程可以对学习canvas有一定的帮助。 阅读全文
posted @ 2020-04-23 20:59 蒋伟平 阅读(891) 评论(0) 推荐(0)
纯js时钟特效详细代码分析实例教程
摘要：电子时钟是web常见效果，在学习js的过程中，自己制作一个电子时间，有利于加深对date对象和定时器的理解。本教程共写有三种时钟效果，一是纯文字的时钟；二是图片背景的时钟，效果比纯文字时钟好看很多；三是时间改变时，数字图片会产生滚动效果的时间。由简入深详细讲解js时钟的制作步骤。 阅读全文
posted @ 2020-04-21 21:18 蒋伟平 阅读(2971) 评论(1) 推荐(2)
使用原生js实现选项卡功能实例教程
摘要：选项卡是前端常见的基本功能，它是用多个标签页来区分不同内容，通过选择标签快速切换内容。学习本教程之前，读者需要具备html和css技能，同时需要有简单的javascript基础。 先来完成html部分。首先，需要一个元素把整个选项卡包含在内。新建一个div元素，它的id命名为tabBox，如下所示： 阅读全文
posted @ 2020-04-19 21:28 蒋伟平 阅读(1579) 评论(0) 推荐(3)