cvmachine.com - 申博开户网

查找: 您的方位主页 > 网络频道 > 阅览资讯:前端学习笔记(带实例)

前端学习笔记(带实例)

2019-03-31 11:00:11 来历:www.cvmachine.com 【

前端学习笔记

实例:图片主动轮换

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
1. 承认工作: 文档加载完结的工作 onload
2. 工作要触发 : init()
3. 函数里边要做一些工作:(一般会去操作元素,供给交互)
  1. 敞开定时器: 履行切换图片的函数 changeImg()
4. changeImg()
  1. 取得要切换图片的那个元素
-->
<script>
var index = 0;

function changeImg(){

//1. 取得要切换图片的那个元素
var img = document.getElementById("img1");

//计算出当时要切换到第几张图片
var curIndex = index%3 + 1; //0,1,2 
img.src="../img/"+curIndex+".jpg"; //1,2,3
//每切换完,索引加1
index = index + 1;
}

function init(){

setInterval("changeImg()",1000);
}

</script>
</head>
<body onload="init()">
<img src="../img/1.jpg" width="100%" id="img1"/>
</body>
</html>

document.getElementById("****") 取得字段值

实例:表单查看

前端学习笔记(带实例)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
引进外部的js文件
-->
<script type="text/javascript" src="../js/regutils.js" ></script>
<script>
/*
1. 承认工作 : onfocus
2. 工作要驱动函数
3. 函数要干一些工作: 修正span的内容
*/
function showTips(spanID,msg){
//首先要取得要操作元素 span
var span = document.getElementById(spanID);
span.innerHTML = msg;
}
/*
校验用户名:
1.工作: onblur 失掉焦点
2.函数: checkUsername()
3.函数去显现校验成果
*/
function checkUsername(){
//获取用户输入的内容
var uValue = document.getElementById("username").value;
//对输入的内容进行校验
//取得要显现成果的span
var span = document.getElementById("span_username");
if(uValue.length < 6){
//显现校验成果
span.innerHTML = "<font color='red' size='2'>对不住,太短</font>";
return false;
}else{
span.innerHTML = "<font color='red' size='2'>祝贺您,可用</font>";
return true;
}
}

/*
 暗码校验
 */
function checkPassword(){
//获取暗码输入
var uPass = document.getElementById("password").value;

var span = document.getElementById("span_password");

//对暗码输入进行校验
if(uPass.length < 6){
span.innerHTML = "<font color='red' size='2'>对不住,太短</font>";
return false;
}else{
span.innerHTML = "<font color='red' size='2'>祝贺您,够用</font>";
return true;
}
}

/*
 承认暗码校验
 * */
function checkRePassword(){
//获取暗码输入
var uPass = document.getElementById("password").value;

//获取承认暗码输入
var uRePass = document.getElementById("repassword").value;


var span = document.getElementById("span_repassword");

//对暗码输入进行校验
if(uPass != uRePass){
span.innerHTML = "<font color='red' size='2'>对不住,两次暗码不共同</font>";
return false;
}else{
span.innerHTML = "";
return true;
}
}

/*
 校验邮箱
 * */
function checkMail(){
var umail = document.getElementById("email").value;

var flag = checkEmail(umail);

var span = document.getElementById("span_email");
//对邮箱输入进行校验
if(flag){
span.innerHTML = "<font color='red' size='2'>祝贺您,可用</font>";
return true;
}else{
span.innerHTML = "<font color='red' size='2'>对不住,邮箱格局形似有问题</font>";
return false;
}
}

function checkForm(){
var flag = checkUsername() && checkPassword() && checkRePassword() && checkMail();
return flag;
}

</script>
</head>
<body>
<form action="../01-主动轮播图片/图片主动轮播.html" onsubmit="return checkForm()" >
用户名:<input type="text" id="username" onfocus="showTips('span_username','用户名长度不能小于6')" onblur="checkUsername()" onkeyup="checkUsername()" /><span id="span_username"></span><br />
暗码:<input type="password" id="password" onfocus="showTips('span_password','暗码长度不能小于6')" onblur="checkPassword()" onkeyup="checkPassword()"/><span id="span_password"></span><br />
承认暗码:<input type="password" id="repassword" onfocus="showTips('span_repassword','两次暗码有必要共同')" onblur="checkRePassword()" onkeyup="checkRePassword()" /><span id="span_repassword"></span><br />
邮箱:<input type="text" id="email" onfocus="showTips('span_email','邮箱格局有必要正确')" onblur="checkMail()" /><span id="span_email"></span><br />
手机号:<input type="text" id="text" /><br />

<input type="submit" value="提交" />
</form>
</body>
</html>
 
 

本文地址:http://www.cvmachine.com/a/question/100146.html
Tags: 学习 笔记 前端
修改:申博开户网
关于咱们 | 联络咱们 | 友情链接 | 网站地图 | Sitemap | App | 回来顶部