实例详解前端功能开发

摘要： 本教程通过js面向对象的方法来封装一个选项卡的实例，在实例中讲解js的面向对象如何实现功能。 一般封装好的选项卡程序，只需要一个div元素即可。其它元素都是通过json数据来生成，所以封装好的选项卡实例，调用非常方便。先创建一个div元素，如下所示： <div class="tab_box" cla 阅读全文

摘要： 轮播图是前端最基本、最常见的功能，不论web端还是移动端，大平台还是小网站，大多在首页都会放一个轮播图效果。本教程讲解怎么实现一个简单的轮播图效果。学习本教程之前，读者需要具备html和css技能，同时需要有简单的javascript基础。 本实例效果如下图所示： 根据实例效果，需要的元素有图片、中 阅读全文

摘要： 表单验证是web前端最常见的功能之一，也属于前端开发的基本功。自己完成一个表单验证的开发，也有助于加深对字符串处理和正则表达式的理解。 基本的表单验证包括如：字母验证、数字验证、字母和数字验证、汉字验证、密码验证、日期验证、手机验证、邮箱验证，密码验证等。 现在就来完成这些验证代码的编写，先来看字母 阅读全文

摘要： html的表单有很强大的功能，在web早期的时候，表单是页面向服务器发起通信的主要渠道。但有些表单元素的样式没办法通过添加css样式来达到满意的效果，而且不同的浏览器之间设置的样式还存在兼容问题，比如下拉框。 本实例通过创建div和li等元素来生成一个模拟下拉框，以达到美化下拉框的效果。学习本教程之 阅读全文

摘要： 多级联动下拉菜单是前端常见的效果，省市区三级联动又属于其中最典型的案例。多级联动一般都是与数据相关联的，根据数据来生成和修改联动的下拉菜单。完成一个多级联动效果，有助于增强对数据处理的能力。 本实例以省市区三级联动为例，来说明具体是如何使用javascript来关联数据，实现联动下拉菜单。学习本教程 阅读全文

摘要： 开源的可视化图表库ECharts，功能非常强大，可以实现折线图、柱状图、散点图、饼图、K线图、地图等多种图表。本实例教程使用原生js通过canvas技术开发一个简单仿ECharts的柱状图。每一行代码都有完整的注释，学习本教程可以对学习canvas有一定的帮助。 阅读全文

摘要： 电子时钟是web常见效果，在学习js的过程中，自己制作一个电子时间，有利于加深对date对象和定时器的理解。本教程共写有三种时钟效果，一是纯文字的时钟；二是图片背景的时钟，效果比纯文字时钟好看很多；三是时间改变时，数字图片会产生滚动效果的时间。由简入深详细讲解js时钟的制作步骤。 阅读全文

摘要： 选项卡是前端常见的基本功能，它是用多个标签页来区分不同内容，通过选择标签快速切换内容。学习本教程之前，读者需要具备html和css技能，同时需要有简单的javascript基础。 先来完成html部分。首先，需要一个元素把整个选项卡包含在内。新建一个div元素，它的id命名为tabBox，如下所示： 阅读全文