![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
文章平均质量分 93
xy8199
这个作者很懒,什么都没留下…
展开
-
input中禁止输入特殊字符
当我们在文本框中输入一些特殊符号时,有些特殊字符传入到后台是会产生错误的,所以我们应该从根本上解决问题。例图:当文本框中输入的文本含有特殊符号,就回弹出警示框源码:html>html>head lang="en"> meta charset="UTF-8"> title>title> script type="text/javascript"原创 2017-10-13 08:55:58 · 7784 阅读 · 2 评论 -
AngularJS实现对用户信息的增删改查
本篇是对表单进行增删改查的操作,用到的是AngularJS实现的,有需要的可以看一下。实现效果:实现要求:1. 搭建页面2. 显示所有用户信息3. 根据用户名实现用户查询显示4. 根据年龄范围下拉菜单实现用户显示5. 根据用户年龄实现用户显示6. 实现批量删除功能:选中左侧多选框,点击批量删除,删除选中项,没选中提示用户,点击最上方的多选框,实现全选。原创 2017-10-21 10:03:16 · 3783 阅读 · 0 评论 -
angularjs实现购物车
案例: 实现购物车功能要求:技术要求(html+css+angularjs)1. 完成页面布局,如图1.1(button按钮可以用普通按钮)(页面布局合理、代码无误)2.Ø声明数据对象,初始化商品信息,数据自拟且不低于四条3. 用ng-repaet指令将对象遍历并渲染到页面中4.Ø点击”+”按钮输入框中的数量加1,同时可以计算出商品小计和购物原创 2017-10-22 18:40:37 · 1098 阅读 · 0 评论 -
angular设置一个定时器
1. AngularJS某一时间段后,出现另一种情况,这里需要用到定时器timeout2. 源码:html>html>head> meta charset="UTF-8"> script type="text/javascript" src="angular-1.3.0.js">script> title>title>head>body ng-app="原创 2017-10-13 19:02:09 · 3406 阅读 · 0 评论 -
AngularJs——$http请求数据
$http请求数据主要会有以下三种方式1.get请求2.post请求3.jsonp下面将为大家演示用get请求获取数据,仅供参考。源码:html>html lang="en">head> meta charset="UTF-8"> script type="text/javascript" src="https://code.原创 2017-10-13 19:07:12 · 415 阅读 · 0 评论 -
angular解析json数据
这篇文章主要介绍了AngularJS获取json数据的方法,给大家分享一个简单的Demo。源码:html>html>head> meta charset="UTF-8"> script type="text/javascript" src="angular-1.3.0.js">script> title>title> script type="tex原创 2017-10-13 19:11:52 · 5288 阅读 · 0 评论 -
angular——内置服务获取本机的信息
之前我们用angular设置了一个定时器,今天我们就根据定时器进行一些练习。使用内置服务获取以下信息:1.获取屏幕高度2.获取屏幕宽度3.获取页面title4.获取URL协议5.获取URL主机6.获取端口号7.获取URL的hash部分8.获取访问地址,即URL地址其他要求:1.高度和宽度打开页面2秒后显示出来2.title,协议,主机在打开页面3原创 2017-10-14 08:23:09 · 1126 阅读 · 1 评论 -
AngularJs实现密码框的内容校验
用AngularJs实现下图效果。要求:实现密码框的内容校验,并实现下拉列表的所列的展示形式。具体看下图效果1.页面初始效果2.两次密码不一致时的效果3.当显示方式修改为显示错误提示时,详细的内容错误提示4.当显示方式为提交时才显示的效果点击按钮后源码:html>html ng-app="myApp"原创 2017-10-24 11:04:47 · 1248 阅读 · 0 评论 -
jquery实现注册表单验证
要求:技术要求(html+css+jquery)图标题后有1. 完成页面布局(页面布局合理、样式和图片一致、代码无误各)2. 用jquery验证Email地址是否有效,要求Email地址中必须包含@符号,如果Email地址有效则显示”正确”的图标,并在图标后面提示用户可用,否则在Email注册框后面显示”错误”的图标,图标后面提示用户Email错误。3. 在设置昵称框中要求用户输入的原创 2017-10-15 20:26:53 · 6180 阅读 · 0 评论 -
AngularJS表单的查询与增加
例子:添加球员的功能无指定技术要求,添加球员的页面也无具体样式要求。1.实现上图页面所有元素,页面布局规整加,跟上图效果一致2.实现文案显示,按效果显示3.实现查询,实现查询敏感词过滤,实现查询后列表变化4.实现倒序,实现正序,下拉列表排序效果都实现5.按钮背景一致,按钮样式6.实现添加球员页面,添加球员页面样式,添加球员功能,添加球员必填项判断,添加完球员原创 2017-10-23 18:35:53 · 376 阅读 · 0 评论 -
angularJS路由
AngularJS 路由本章节我们将为大家介绍 AngularJS 路由。AngularJS 路由允许我们通过不同的 URL 访问不同的内容。通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA)。通常我们的URL形式为 http://runoob.com/first/page,但在单页Web应用中原创 2017-10-16 18:45:21 · 185 阅读 · 0 评论 -
html锚点
锚点是网页制作中超级链接的一种,又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接,运用相当普遍。英文名:anchor使用命名锚记可以在文档中设置标记,这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接,这些链接可快速将访问者带到指定位置。创建到命名锚记的链接的过程分为两步。首先,创建命名锚记,然后创建到该命名锚记的链接。例图:原创 2017-10-16 18:53:13 · 198 阅读 · 0 评论 -
AngularJs实现增加订单、批量发货
实现效果:实现要求:1、 完成页面2、 点击“新增订单”,弹出上框,新增订单状态都是“待发货”3、 实现排序4、 提交订单时,检查表单,提示错误内容,并且将文本框颜色变红色(错误提示)5、 选择状态查询:待发货、已发货、已收货6、 点击“发货”按钮,将“待发货”状态改成“已发货”7、 通过Checkbox全选和全不选8、 点击“批量删除”按钮,删原创 2017-10-25 18:29:13 · 2511 阅读 · 0 评论 -
jquery实现掷筛子小游戏
本篇给大家分享一个很好玩的掷筛子游戏,当点击“开始”按钮时张三和李四两人同时掷出筛子,在各自的文本框中会显示出各自掷出筛子的大小,并且会在第三个文本框中比较出两人点数的大小,并显示出获胜方,若两人点数一样,会显示平局。当点击“不玩了”按钮时,会清空所有文本框中的数据,回归初始。效果图:源码:HTML>html>head> meta charset="utf-8"原创 2017-10-12 09:03:22 · 1598 阅读 · 1 评论 -
ionic静态购物车实现
前几篇对ionic进行了初步的了解,接下来我们要在实战中进行操作,对所学知识进行拼凑,达到真正的灵活运用。接下来我们做一个小demo,一个静态的购物车。例图效果:源码:index.htmlhtml>html ng-app="BShop">head> meta charset="UTF-8"> meta name="viewport" co原创 2017-10-19 19:29:06 · 1441 阅读 · 0 评论 -
JavaScript的基础应用之复选框
本篇要学的知识就比较简单了,是对JavaScript中复选框的应用。掌握复选框的全选和反选。单选框和复选框比较类似一般是一组为单位使用 使用的时候,name属性 一组是一样的。全选、反选示例图:源码:html>html>head lang="en"> meta charset="UTF-8"> title>复选框tit原创 2017-10-09 19:54:45 · 293 阅读 · 0 评论 -
JavaScript基础之计算
1.js的执行原理2.js的历史3.变量 js是弱类型语言。 java 8中, js string 字符型 相当于 Java里 的char string number 数字型 int float double.... object 复杂类型 undefined 未定义类型 使用: var a原创 2017-10-09 20:17:11 · 290 阅读 · 0 评论 -
CSS动画
CSS3 动画通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes 规则。@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。浏览器支持Chro原创 2017-10-08 13:28:19 · 313 阅读 · 0 评论 -
H5 3D动画实现
H5 3D动画示例图代码:html>html lang="en">head> meta charset="UTF-8"> meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> title原创 2017-10-08 13:15:37 · 3987 阅读 · 0 评论 -
JavaScript的基础应用之BOM对象
JavaScript 是世界上最流行的编程语言。这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。JavaScript 是脚本语言JavaScript 是一种轻量级的编程语言。JavaScript 是可插入 HTML 页面的编程代码。JavaScript 插入 HTML 页面后,可由原创 2017-10-09 19:30:50 · 313 阅读 · 0 评论 -
ionic实现轮播
H5混合式移动开发框架ionic,是使用angularJS的语法,加上大名鼎鼎的移动应用开发框架cordova的核心。它的特点是跨平台、入门简单、可以减少开发周期。实质上,ionic就是用制作网页的技术来开发移动app。下面使用ionic中ion-slide-box实现移动app轮播特效。一、基本结构其基本结构就是用ion-slide-box标签包含若干个标签:原创 2017-10-18 18:47:49 · 1461 阅读 · 1 评论 -
ionic路由
一、路由:AngularJS和Ionic的异同 路由的作用,简单的概括就是基于View和Url的对应关系,处理跳转页面。 在AngularJS中,我们使用的路由功能是由模块ng-route提供的,ngRoute的思路就是最简单的路由思想,我们只需要指定每一个url对应的视图就可以了。因为ng-route现在成为一个独立的模块了,所以我们想要使用它的时候,还得去自己安装,并且在原创 2017-10-18 19:02:06 · 475 阅读 · 0 评论 -
ionic列表
ionic 列表列表是一个应用广泛的界面元素,在所有移动app中几乎都会使用到。列表可以是基本文字、按钮,开关,图标和缩略图等。列表项可以是任何的HTML元素。容器元素需要list类,每个列表项需要使用item类。ionList和ionItem可以很容易的支持各种交互方式,比如,滑动编辑,拖动排序,以及删除项。基本用法: class="list">原创 2017-10-18 19:51:58 · 242 阅读 · 0 评论 -
js和jquery实现图片轮播
给大家分享的是使用JS和JQ两种方法分别实现相同的图片轮播特效示例图实现思路1.首先是个外围部分(其实也就是最外边的整体wrapper)2.接着就是你设置图片轮播的地方(也就是一个banner吧)3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式)4.然后是图片两端的左箭头和右箭头5.然后是一个透明背景层,放在图片底部原创 2017-10-10 09:51:22 · 509 阅读 · 0 评论 -
javascript实现图片左右移动动画
图片的左右移动,具备像荡秋千一样的动画效果,图片自己可重新定义,移动速度和距离也可在代码内设定,挺简单的Js生成动画的特效代码,仅供参考。html>html>head lang="en"> meta charset="UTF-8"> title>自定义动画title> script type="text/javascript" src="jquery.1.12.原创 2017-10-10 19:46:42 · 10746 阅读 · 0 评论 -
jQuery 折叠菜单
本文实例讲述了jQuery实现的简单折叠菜单(折叠面板)效果代码,主要介绍了jQuery实现的简单折叠菜单(折叠面板)效果代码,涉及jQuery中slideToggle与toggleClass方法的灵活使用技巧。效果图:源码:html>html>head lang="en"> meta charset="UTF-8"> title>jQuery原创 2017-10-11 08:56:22 · 5619 阅读 · 0 评论 -
ionic购物车框架模板
html>html ng-app="myApp">head> meta charset="UTF-8"> meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> link href="https://cdn.bootcss原创 2017-10-20 18:32:19 · 1082 阅读 · 0 评论 -
JS实现路由跳转
之前我们用AngularJS实现路由跳转,这一篇我们将用JS实现路由跳转。示例图:源码:html>html lang="en">head> meta charset="utf-8"> title>路由title> script type="text/javascript" src="http://code.jquery.com/jquery-la原创 2017-10-17 10:57:24 · 5170 阅读 · 0 评论