Javascript（一）

- 日理万妓 2022-03-16 06:10 93阅读 0赞

***表单校验技术要点：***

1.获取元素    document.getElementById("id名称")；

2.获取元素里面的值     document.getElementById(“id名称”).value;  (注：如果id是一个字符串，那么必须加上引号，如果是一个变量则不需要)

3.表单提交事件  onsubmit 这个需要写在form标签

4.javascript的输出

警告框 alert()； 向页面指定位置写入内容：innerHTML(属性)；向页面写入内容：document.write(“”)；

步骤分析：

第一步：确定事件(onsubmit)并为其绑定一个函数

第二步：书写这个函数(获取用户输入的数据<获取数据时需要在指定位置定义一个id>)

第三步：对用户输入的数据进行判断(if else 语句)

第四步：数据合法，提交表单

第五步：数据非法则给出错误提示信息

简单示例代码：检验用户名

function checkForm()\{

var uvalue = document.getElementById("user").value;

if(uvalue=="")\{

alert("用户名不能为空")

return false;

\}  
\}

html部分：<form action="\#" method="get" name="regForm" **οnsubmit="return checkForm()"**>

控制表单的提交时，需要在定义函数时给出一个返回值。如上加深处。(form标签一般用于给html提供表单)

***表单校验加强版***

可以使得在填写用户名时，如果输入非空，而用户此时换行操作则可以在输入用户名的所在行给出红色提示“用户名不能为空”，随后填写完成后该提示消除。这样可以避免界面反复弹出警告框，完善用户体验。

Html 代码： <input type="text" name="user" size="34px" id="user" οnfοcus="showTips('user','用户名必填！')" οnblur="check('user','用户名不能为空！')"/><span id="userspan"></span>  
JS 代码 ：  
function showTips(id,info)\{

***使用js完成首页轮播图技术要点***

第一步：确定事件(onload)并为其绑定一个函数(onload函数定义在body标签内)

第二步：书写绑定的这个函数

第三步：书写定时任务(setInterval)

第四步：书写定时任务里面的函数

第五步：通过变量的方式进行循环

//书写轮图片显示的定时操作  
setInterval("changeImg()",3000);  
\}  
//书写函数  
var i=0  
function changeImg()\{  
i++;  
//获取图片位置并设置src属性值  
document.getElementById("img1").src="../img/small0"+i+".jpg";  
if(i==3)\{  
i=0;  
\}  
\}  
</script>

Html 部分代码：  
<body οnlοad="init()">

***使用js完成页面定时弹出广告***

第一步：在页面指定一个位置隐藏一个广告图片(使用display属性的none值)

第二步：确定事件onload并为其绑定一个函数

第三步 ：书写这个函数(设置一个显示图片的定时操作)

第四步：书写定时器中的函数

第五步：清除显示图片的定时操作

第六步：书写隐藏图片的定时操作

第七步：书写定时器中的函数

第八步：清除隐藏图片的定时操作

function showAd()\{  
//3.获取广告图片的位置  
var adEle = document.getElementById("img2");  
//4.修改广告图片元素里面的属性让其显示  
adEle.style.display = "block";  
//5.清除显示图片的定时操作  
clearInterval(time);  
//6.设置隐藏图片的定时操作  
time = setInterval("hiddenAd()",3000);  
\}  
//7.书写隐藏广告图片的函数  
function hiddenAd()\{  
//8.获取广告图片并设置其style属性的display值为none  
document.getElementById("img2").style.display= "none";  
//9.清除隐藏广告图片的定时操作  
clearInterval(time);  
\}  
</script>

Html 代码： <body οnlοad="init()">  
 <img src="图片位置" width="100%" style="display: none" id="img2"/>

***window对象方法：***

***location对象方法：***

href属性可以完成通过js代码控制页面的跳转

<html>  
<head>  
<meta charset="UTF-8">  
<title>location对象</title>  
<script>  
function tiao()\{  
window.location.href="http://www.baidu.com";  
\}  
</script>  
</head>  
<body>  
<a href="\#" οnclick="tiao()">跳转到百度首页</a>  
</body>  
</html>

***History对象方法***

back() 加载history列表的前一个url

forward() 加载history列表的下一个url

go() 加载history列表中的某个具体页面；go( 参数 )  
参数 ：-1 返回上一个历史记录页面；-2返回上上一个历史记录页面；1进入下一个历史记录页面。