javascript交互式网页设计——javascript函数和事件

最新推荐文章于 2024-04-15 12:32:31 发布

#⇔*求知

最新推荐文章于 2024-04-15 12:32:31 发布

阅读量770

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_47274301/article/details/110501372

版权

定义函数的4个规则：

语法

function 函数名（形式参数1，形式参数2，……，形式参数n）{
       语句
}

1.使用function关键字，function后是函数名，与其他语言不一样，JavaScript中的函数不必说明返回值类型
注意：
1、函数可以先调用再定义，但是函数必须在调用后面定义。
2、在js中没有方法的重载，直接调用最后一个同名的方法。
3、调用方法时，可以不管定义中有无形参，随便给或不给。
4、js中提供argument对象来对参数进行管理，以数组的形式。
5、JavaScript中的参数声明可以不需要关键字var，但参数的命名与变量命名规则相同
6、length是argument对象属性，表示函数被实际调用传递的参数个数。

返回值：

return 返回值；

匿名函数：

语法一：

（function（形式参数列表）{
语句
}）（实际参数列表）
//第一个小括号是定义函数，第二个小括号是调用函数

语法二：

var 变量名=（function（形式参数列表）{
语句
}）
//调用
变量名 （实际参数列表）；

语句三：

var变量名=（形式参数列表）=>{
语句
return 返回值；
}
//使用
document.write(变量名（实际参数列表）)

系统函数：

parselnt()函数：
作用：将字符串转换为整数
转换实例：

parselnt(string)
字符串	结果
“150cats”	150
“cats”	NaN
“6”	6
“-6”	-6
“6.56”	6

parseFloat()函数：
作用：将字符串转换为浮点型
转换实例：

parsefloat(string)
字符串	结果
“cats66.5”	NaN
“8.5doges”	8.5
“6”	6
“.6”	0.7
“6.56”	6.56

isNaN()函数：
作用：用于判断参数是否是NaN（不是数字）是返回true，不是返回false
转换实例：

字符串	结果
“123”	false
“2a34”	true
“2.34”	false
". "(空格)	false
“wh”	true

eval()函数:
作用：用来将类似于表达式的字符串，当成表达式计算并返回结果。
事件
onclick事件：鼠标单击页面元素时触发的事件；
onmouseover事件：鼠标移入页面元素时触发的事件；
onmouseout事件：鼠标移出页面元素时触发的事件；
onmousemove事件：鼠标指针移动时发生的事件；
onload事件：在页面加载完成后立即发生事件；
onblur事件：指光标后者焦点离开元素后触发事件；
onchange事件：通常指输入框的值发生了变化或者改变下下拉列表框的选择项时会触发的事件；
表单事件：单击表单元素“提交按钮”会触发标签的onsubmit事件，浏览器对这个事件的默认值处理方式是提交数据给action属性指定的页面进行处理。
注意：通常情况下，浏览器执行完成事件处理程序后，还会去执行该事件的默认动作。

实际案例：

html代码

<!DOCTYPE html><html lang="en">
<head>    
<meta charset="UTF-8">    
<meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>
<!-- 
      1.页面加载完成的时候将所有的input标签变成圆角边
      2.手机输入框进行实时验证，手机号码只能是11位且为数字，在input标签后加一个span标签显示提示信息 
      3.注册按钮，鼠标移上去的时候加阴影，变颜色，鼠标移开复原
      4.所有的input输入框在鼠标离开的时候进行非空验证，以弹窗形式提醒    
      5.最终提交的时候验证所有信息是否为空 -->
</head>
<body>    
<fieldset style="width: 500px;height: 400px;margin: 0 auto;">        <legend>用户注册</legend>        
     <form action="2-4.html" onsubmit="return checkAll()">
          <table style="margin: auto;">                                    
             <tr>                   
                <td>用户名：</td>                    
                <td>                        <
                   <input onblur="checkNull(this,'用户名')" type="text" id="name">                     
                </td>                
             </tr>                
             <tr>                    
                <td>密码：</td>                    
                <td>                        
                    <input type="text" id="mima">                   
                </td>                
             </tr>               
             <tr>                    
                <td>邮箱：</td>                    
                <td>                        
                    <input type="email" id="mail">                    
                </td>                
             </tr>                
             <tr>                    
                <td>电话：</td>                    
                <td>                        
                   <input type="text" id="phone" oninput="chanGe()">
                   <span id="tix" style="color: red;"></span>                                              
                </td>                
              </tr>                
              <tr>                    
                 <td colspan="2">                        
                 <input type="submit" value="注册" id="tijiao" onmouseover="over()" onmouseout="out()">                    
                 </td>                
              </tr>            
            </table>        
        </form>    
   </fieldset>    
   <script src="../js/2-4.js"></script>
   </body>
</html>

js代码

window.onload = function() {    
	var inputs = document.getElementsByTagName('input');    
	for (var i = 0; i < inputs.length; i++) {
	inputs[i].style.borderRadius = "10px";                   
	inputs[i].style.height = "50px";        
	inputs[i].style.width = "240px";    
	}
}
function chanGe() {    
var changes = document.getElementById('phone').value;    
	if (isNaN(changes.trim())) {        
	document.getElementById('tix').innerHTML = "手机号只能为数字";    
	} else {        
		if (changes.trim().length != 11) {             
		document.getElementById('tix').innerHTML = "手机号只能为11位";        
	       } else {            
	        document.getElementById('tix').innerHTML = " ";        
	       }    
	}
}
function over() {      
    document.getElementById('tijiao').style.backgroundColor = "aqua";
    document.getElementById('tijiao').style.boxShadow = "3px 2px 10px 0px lightgreen";
    document.getElementById('tijiao').style.color = "white";
}
function out() { 
    document.getElementById('tijiao').style.backgroundColor = "";
    document.getElementById('tijiao').style.boxShadow = "";
    document.getElementById('tijiao').style.color = "";
}
function checkNull(obj, names) {    var str = obj.value;    if (str.trim().length == 0) {        alert(names + "信息不能为空");    }}
function checkAll() { 
   var name = document.getElementById('name').value;
   var mima = document.getElementById('mima').value; 
   var mail = document.getElementById('mail').value; 
   var phone = document.getElementById('phone').value;    
   if ((name.trim().length != 0) || (mima.trim().length != 0) || (mail.trim().length != 0) || (phone.trim().length != 0)) 
   {        
   return true;    
   } else {       
    alert("请将数据输入完整");        
    return false;    
    }
}

#⇔*求知

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
javascript交互式网页设计——javascript函数和事件

定义函数的4个规则：语法function 函数名（形式参数1，形式参数2，……，形式参数n）{ 语句}1.使用function关键字，function后是函数名，与其他语言不一样，JavaScript中的函数不必说明返回值类型注意：1、函数可以先调用再定义，但是函数必须在调用后面定义。2、在js中没有方法的重载，直接调用最后一个同名的方法。3、调用方法时，可以不管定义中有无形参，随便给或不给。4、js中提供argument对象来对参数进行管理，以数组的形式。5、JavaSc
复制链接

扫一扫