- 博客(19)
- 资源 (15)
- 收藏
- 关注
RSS订阅原创 整理 js 日期对象的详细功能，使用 js 日期对象获取具体日期、昨天、今天、明天、每月天数、时间戳等，以及常用的日期时间处理方法
在 javascript 中内置了一个 Date 对象，可用于实现一些日期和时间的操作。本文整理 js 日期对象的详细功能，使用 js 日期对象获取具体日期、昨天、今天、明天、每月天数、时间戳等，以及常用的日期时间处理方法。
2022-12-04 18:51:31
2119
原创 vue3和vue2 的区别，vue3和vu2到底哪个好呢？
vue3 正式发布有两年多了，虽然现在还有很多用vue2的项目，甚至有新启动的项目还基于vue2。但vue3作为 vue 的主流开发技术栈，仍然是必然的趋势。
2022-11-23 21:10:55
600
原创 js配合css3开发流畅的web拾色器功能
本实例中的web拾色器功能使用css3实现页面效果，即在页面上显示的元素用css3样式来实现的。再使用js生成拾色器颜色数据，并控制各元素的鼠标事件。当事件作为反应时，获取到对应的数据并显示颜色值。拾色器的html元素分为三个部分，分别是拾色区域、色系区域和颜色显示区域，如图所示：web拾色器三个部分的html元素如下：<div class="color_container"> <div class="main_wrap"> <!--拾色区域--> &
2021-03-15 21:07:04
438
3
原创 原生js日历选择器插件开发实例教程
在web开发过程中经常会碰到需要选择日期的功能，一般的操作都是在文本框点击，然后弹出日历选择框，直接选择日期就可以在文本框显示选择的日期。开发好之后给用户使用是很方便，但如果每一个日历选择器都要临时开发的话，会严重影响项目进度。所以网上有很多日历插件提供下载使用。在实际工作中，日历选择器功能确实都是直接使用已开发好的插件。但作为一个前端工程师，还是需要知道具体实例方法，也应该有能力完成此类功能。本实例教程详细讲解怎么样使用原生js，通过面向对象来开发一个日历选择器插件。一般日历插件使用都非常简单，只需要
2021-03-05 21:30:13
1305
3
原创 javascript开发web计算器实例教程
计算器的主要作用是进行数字运算，开发一个计算器功能的web实例，有助于更好的掌握js基础的数字运算能力。本实例详细分析一个js计算器的开发步骤，学习本教程时最好先具备一些基础的js知识。计算器包括显示数字区域和按键区域两大部分，先把计算器的这两个区域的html元素编写出来，如下所示：<div class="calculator_wrap" id="calculator"><!--计算器外包元素--> <div class="show_num"><!--显示
2021-02-21 14:37:57
1905
1
原创 使用面向对象的方式封装js级联下拉菜单列表的实例教程
本教程讲解的级联下拉菜单是根据已有json数据创建的DOM元素。点击文本框后，显示一级菜单。如果菜单中包含子菜单，菜单右侧会有指示箭头。点击菜单之后，会再显示下一级菜单，以此类推。当菜单下无子菜单时，选择菜单后会在文本框中显示。打开后的级联菜单效果如图所示：使用封装好的插件，只需要有一个input元素，即可通过插件自动生成级联下拉菜单，html代码如下所示： <div style=...
2020-04-21 21:45:02
327
原创 使用js拖拽功能实现滑动条实例教程
拖拽属于前端常见的功能，很多效果都会用到js的拖拽功能。滑动条的核心功能也就是使用js拖拽滑块来修改位置。一个完整的滑动条包括 滑动条、滑动痕迹、滑块、文本 等元素，先把html代码写出来，如下所示： <div class="bar_wrap" id="wrap"><!--外包裹元素--> <div class="bar_container"><...
2020-04-18 15:35:10
2173
1
原创 前端实现js模糊查询关键字显示下拉框功能的实例教程
所谓模糊查询就是通过关键字在数据中匹配到包含关键字的数据，而得出的查询结果。本实例教程讲解在前端文本框输入关键字，显示匹配的数据列表功能。首先得准备一个文本框和显示数据列表的div元素，html代码如下所示： <div class="match_container"> <div class="input_container"> <input ...
2020-04-17 21:44:37
2476
原创 原生js制作简易DOM拾色器实例教程
本实例实现一个简单的拾色器功能。目的是为了帮助初学者更好的掌握DOM和数组相关操作。主要用于学习，不适合实际开发工作中使用
2020-04-16 21:52:22
769
原创 如何使用面向对象的方法实现原生js选项卡实例教程
本教程通过js面向对象的方法来封装一个选项卡的实例，在实例中讲解js的面向对象如何实现功能。一般封装好的选项卡程序，只需要一个div元素即可。其它元素都是通过json数据来生成，所以封装好的选项卡实例，调用非常方便。先创建一个div元素，如下所示： <div class="tab_box" class="tabContainer"></div>选项卡的样式可以到...
2020-04-15 21:37:15
308
原创 js原生代码实现简单的轮播图实例教程
轮播图是前端最基本、最常见的功能，不论web端还是移动端，大平台还是小网站，大多在首页都会放一个轮播图效果。本教程讲解怎么实现一个简单的轮播图效果。学习本教程之前，读者需要具备html和css技能，同时需要有简单的javascript基础。本实例效果如下图所示：根据实例效果，需要的元素有图片、中间圆点按钮、左右箭头按钮等。实际html代码如下所示： <div class="banne...
2020-04-10 21:39:44
1775
原创 js正则表达式基本语法详解，30分钟正则表达式实例学习
正则表达式又叫规则表达式，一般用来检查字符串中是否有与规则相匹配的子串，达到可以对匹配的子串进行提取、删除、替换等操作的目的。先了解有哪些方法可以使用正则来实现这些操作。本文主要是通过实例讲解js正则表达式相关知识。
2020-04-06 11:41:36
871
1
原创 实现简易web安全色的js调色板实例教程
调色板是一种经典的前端功能，简易web安全色的调色板也是非常容易实现的。对于新手来说，自己动手完成一个调色板的开发，有助于加深对数组、字符串和DOM操作的理解。如果自己不会或者觉得步骤不太清楚，可以跟本实例教程一步一步来做。先准备一些html元素，用于存放生成的颜色块和记录选择的颜色，代码如下： <div class="color_wrap" id="colorWrap"> ...
2020-04-03 21:34:21
630
原创 原生javascript表单验证实例教程
表单验证是web前端最常见的功能之一，也属于前端开发的基本功。自己完成一个表单验证的开发，也有助于加深对字符串处理和正则表达式的理解。基础的表单验证包括如字母验证、数字验证、字母和数字验证、汉字验证、密码验证、日期验证、手机验证、邮箱验证，密码验证等。
2020-04-03 20:54:46
381
1
原创 javascript实现下拉框表单美化的详细实例教程
html的表单有很强大的功能，在web早期的时候，表单是页面向服务器发起通信的主要渠道。但有些表单元素的样式没办法通过添加css样式来达到满意的效果，而且不同的浏览器之间设置的样式还存在兼容问题，比如下拉框。本实例通过创建div和li等元素来生成一个模拟下拉框，以达到美化下拉框的效果。学习本教程之前，读者需要具备html和css技能，同时需要有简单的javascript基础。先创建一个sele...
2020-04-01 21:38:31
809
原创 使用javascript制作省市区三级联动实例教程
多级联动下拉菜单是前端常见的效果，省市区三级联动又属于其中最典型的案例。多级联动一般都是与数据相关联的，根据数据来生成和修改联动的下拉菜单。完成一个多级联动效果，有助于增强对数据处理的能力。本实例以省市区三级联动为例，来说明具体是如何使用javascript来关联数据，实现联动下拉菜单。学习本教程之前，读者需要具备html和css技能，同时需要有简单的javascript基础。这里先准备三个s...
2020-03-30 20:43:18
799
原创 原生js开发仿ECharts的canvas柱图实例教程
canvas 画布是HTML5中新增的标签，可以通过使用js操作 canvas 绘图 API在网页中绘制图像。百度开发了一个开源的可视化图表库ECharts，功能非常强大，可以实现折线图、柱状图、散点图、饼图、K线图、地图等多种图表。很多项目都有使用过ECharts开发过图表功能。本实例教程使用原生js教你开发一个仿ECharts的柱状图。学习本教程之前，读者需要具备html和css技能，同时...
2020-03-29 17:32:55
914
原创 如何使用js实现电子时钟功能
电子时钟是网上常见的功能，在学习date对象和定时器功能时，来完成一个电子时钟的制作是不错的选择。学习本教程之前，读者需要具备html和css技能，同时需要有简单的javascript基础。先准备一个html元素，用来放置时钟。新建一个div元素，它的id命名为clock，如下所示：<div id="clock" class="clock_con"></div><...
2020-03-28 16:20:58
6410
原创 前端如何使用js实现选项卡功能
选项卡是前端常见的基本功能，它是用多个标签页来区分不同内容，可以通过选择标签快速切换内容。学习本教程之前，读者需要具备html和css技能，同时需要有简单的javascript基础。先来完成html部分。首先，需要一个元素把整个选项卡包含在内。新建一个div元素，它的id命名为tabBox，如下所示：<div id="tabBox"></div>在tabBox元素里...
2020-03-28 11:09:14
1191
《学习js计算器代码的实例教程，提高加减乘除等js基础计算能力》源码
2020-04-21
《使用面向对象的方式封装js级联下拉菜单列表的实例教程》源码
2020-04-20
《使用js拖拽功能实现滑动条实例教程》源码
2020-04-18
《前端实现js模糊查询关键字显示下拉框功能的实例教程》源码
2020-04-16
《原生js制作简易DOM拾色器实例教程》源码
2020-04-15
《如何使用面向对象的方法实现原生js选项卡实例教程》源码
2020-04-14
《js原生代码实现简单的轮播图实例教程》源码
2020-04-09
《原生javascript表单验证实例教程》源码
2020-04-02
《javascript实现下拉框表单美化的详细实例教程》源码
2020-04-01
《原生js开发仿ECharts的canvas柱图实例教程》源码
2020-03-29
《如何使用js实现电子时钟功能》三个效果完整代码
2020-03-28
primaryTab.rar
2020-03-28
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人