JavaScript的案例（数据校验，js轮播图，页面定时弹窗）

1.数据校验
           步骤
           1.确定事件（onsubmit）并绑定一个函数
           2.书写这个函数，获取数据，并绑定id
           3.对用户输入数据进行判断
           4.数据合法，让表单提交，非法不让表单提交

           如何控制表单提交：onsubmit用于提交的位置，定义函数是给出一个返回值
           οnsubmit=return checkform()

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">function checkForm(){var uValue=document.getElementById("username").value;if(uValue==""){document.getElementById("remind").innerHTML="用户名不能为空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";return false;}var pValue=document.getElementById("password").value;if(pValue==""){alert("密码不能为空");return false;}var eValue=document.getElementById("email".value);if(!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(eValue)){alert("邮箱格式不正确")return false}    }</script></head><body><div align="center"><form action="#" method="get" name="regForm" onsubmit="return checkForm()">用户名：<input type="text" name="username" id="username"/><br /><font id="remind" color="red"></font><br /><br />密&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="password" name="password" id="password"/><br /><br /><br />邮&nbsp;&nbsp;&nbsp;&nbsp;箱：<input type="text" name="email" id="email" /><br /><br /><br /><input type="submit" value="提交"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="重置"/></form></div></body>
</html>

2.js轮播图
           步骤
           1.确定事件（onload）并为其绑定一个函数
           2.书写绑定的这个函数
           3.书写定时任务
           4.书写定时任务里面的函数
           5.通过变量的方式进行循环

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">div{width: 500px;height: 350px;margin: auto;text-align: center;}</style><script type="text/javascript">function init(){setInterval("changeImg()",1000)}var i=0;function changeImg(){document.getElementById("img").src="img/"+(i%5+1)+".jpg";i++;}</script></head><body onload="init()"><div><img src="img/1.jpg" width="500px"  id="img"/></div></body>
</html>

3.页面定时弹窗
           1.确定事件（onload）并为其绑定一个函数
           2.书写绑定函数，并绑定id
           3.隐藏一个广告图片
           4.利用定时器将display显现（block）
           5.清除定时器，书写隐藏图片定时操作

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>定时弹出广告</title><script type="text/javascript">function tim(){a=setTimeout("showAd()",3000);}function showAd(){adEle=document.getElementById("img");adEle.style.display="block"clearTimeout(a);b=setTimeout("hidAd()",3000)}function hidAd(){adEle.style.display="none"}</script></head><body onload="tim()"><img src="img/广告.jpg" style="display: none;" id="img"/></body>
</html>

转载于:https://www.cnblogs.com/littlepage/p/9438825.html

JavaScript的案例（数据校验，js轮播图，页面定时弹窗）相关推荐

php 走马灯轮播,Vue.js轮播图走马灯代码实例（全）
这个是html, 数据中我用了一个数组来放图片的目录, data() { return { superurl: [ { url: '', img: '../../../../static/image/ ...
JS轮播图（网易云轮播图）
JS 轮播图写在前面最聪明的人是最不愿浪费时间的人.--但丁实现功能图片自动切换鼠标移入停止自动播放,显示按钮点击按钮,实现前后翻鼠标移入小圆圈,可以跳转到对应图片点击左右两侧图片部分 ...
JS轮播图（点击切换、自动播放、悬停控制）
JS轮播图轮播图可以说是网页上十分常见的效果,很多朋友在学习JavaScript后都迫不及待的想写一些好看对的效果出来,那么轮播图就是一个很不错的练手实例.下面就是通过JS写的轮播图效果: 功能介绍 ...
html轮播图循环效果,TremulaJS-跨设备多功能的无限循环js轮播图插件
TremulaJS是一款非常酷的跨设备多功能的无限循环js轮播图插件.TremulaJS是一个客户端javascript UI组件,它基于贝兹曲线和物理动量效应制作各种效果,可以制作无限循环的图片流, ...
JS 轮播图图片切换（定时器）
标题JS 轮播图图片切换(定时器) 这次的轮播图与上次的图片切换相比,仅仅是加上了定时器,使其可以自动切换. 上次的图片切换的链接:https://blog.csdn.net/qq_38318589 ...
html5移动端轮播图特效,支持移动端的纯js轮播图插件awesome-slider
awesome-slider是一款支持移动端的纯js轮播图插件.该轮播图插件支持任何HTML标签,可以自定义分页标签和Loading效果,支持在前端框架如react中使用. 使用方法安装: /* y ...
html 图片轮播渐变,js轮播图自动切换和css做页面自动渐变
js轮播图自动切换和css页面自动渐变效果如下: 可以去jq官网学习:http://www.jq22.com/ 部分代码如下: *{margin: 0; padding: 0;} p{text-al ...
html 轮播切图,JS轮播图的实现方法
本文实例为大家分享了JS轮播图的实现代码,供大家参考,具体内容如下需求: 自动轮播,鼠标移入轮播停止.移出继续,小圆点点击切图,左右箭头切图效果图: 思路通过编写过渡动画实现轮播效果,图片的出现 ...
手把手教你原生JavaScript打造丝滑流畅的轮播图，让你的网站瞬间提升用户体验
简介轮播图是网页设计中常见的交互组件之一,用于展示多张图片或内容,让用户能够方便地浏览.切换和选择.本文将介绍如何使用原生 JavaScript 手写一个简单的轮播图,并且通过代码解释实现细节. 目 ...

JavaScript的案例（数据校验，js轮播图，页面定时弹窗）

JavaScript的案例（数据校验，js轮播图，页面定时弹窗）相关推荐

最新文章

热门文章