一 **** .两数之和
<script type='text/javascript>
//带参数的函数
function sum(a,b){
return a+b;
}
console.log(sum(5,2))
//用输入数字的方式进行调用函数实现两数之和
var num1=parseInt(prompt('请输入第一个数字*'))
var num2=parseInt(prompt('请输入第二个数字*'))
function sums(num1,num2){
return num1+num2;
}
result=sums(num1,num2)
console.log(result)
</script>
弹窗进行输入数字
两数字之和的结果
二 **** 对页面进行交互 鼠标点击双击 鼠标上移引发的事件交互
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Document</title>
</head>
<body onload="myload()">
<!-- 点击时,当前标签内容变为功夫熊猫 单击,双击,鼠标划过-->
<h1 id="t1" onclick="this.innerHTML='功夫熊猫'" >标题1</h1>
<h1 id="t2" ondblclick ="fn1(this)" >标题1</h1>
<h1 id="t3" onmouseover ="fn3()" >标题1</h1>
<script>
//onload表示页面元素加载成功后执行!
function myload(){
alert('页面加载完成了...')
}
//onload可以添加到body中也可以直接添加到窗口window中(写1个)
window.onload=function(){
alert('窗口页面加载成功了....')
}
function fn1(obj){
obj.innerHTML ='功夫熊猫2';
}
function fn3(){
var t3 = document.getElementById('t3')
t3.innerHTML='功夫熊猫3'
}
</script>
</body>
</html>
三 **** 添加事件监听获取键盘按钮事件
<body>
<div id='box1' class='box1></div>
<script type='text/javascript'>
document.addEventListener('keydown',fn);
function fn(event){
switch(event.keyCode){
case 13:
location.href='http://www.baidu.com';
break;
case 39:
var box1=document.getElementById('box1')
box1.className='box2';
console.log(box1)
break;
default:
console.log('其他')
}
}
</script>
</body>
四 **** 表单操作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Document</title>
<style type="text/css" media="screen">
.red{color:red;}
</style>
</head>
<body>
<form action="http://www.baidu.com" method="get" onsubmit="return checkInfo(this)">
名字: <input type="text" name="uname" id="uname" autocomplete="off"
onfocus="checkName(this)" onblur="checkName2(this)"value='默认' /> <span id='errname'></span><br/>
密码: <input type="password" name="pwd1" id="pwd1" /> <br/>
确认密码: <input type="password" name="pwd2" id="pwd2" /> <br/>
性别: <input type="radio" name="sex" value="1" checked="checked" onchange="checkSex(this)">男
<input type="radio" name="sex" value="2" onchange="checkSex(this)">女 <br/>
住址:
<select name="addr" onchange="checkAddr(this)">
<option value="0">--请选择--</option>
<option value="1">--山西--</option>
<option value="2">--河北--</option>
<option value="3">--北京--</option>
</select><br/>
<input type="submit" value='提交' />
<h1 class="red" id="errinfo"></h1>
</form>
<script type="text/javascript">
//获得焦点 onfocus
function checkName(obj){
//obj表示当前用户名输入框, obj.样式.背景颜色
//obj.style.background='yellow';
obj.style.backgroundColor='yellow';
obj.style.border="1px solid red"
obj.style.color='red'
}
//失去焦点时
function checkName2(obj){
uname = obj.value;
//找用户名错误提示标签
errname = document.getElementById('errname');
console.log(uname);
//判断
if(uname.length==0 ){
//改内容
errname.innerHTML='请输入用户名';
errname.className='red';//添加了一个类名
}
}
//改变事件
function checkSex(obj){
console.log('您选了:'+obj.value)
}
//下拉菜单选择
function checkAddr(obj){
console.log("您选了:"+obj.value);
}
//表单提交事件
function checkInfo(obj){
errinfo = document.getElementById('errinfo');
uname = obj.uname.value;
//判断用户名
if(uname.length==0){
errinfo.innerHTML='用户名错误!'
return false;
}
pwd1 = obj.pwd1.value;
pwd2 = obj.pwd2.value;
console.log(pwd1)
console.log(pwd2)
if(pwd1!=pwd2){
errinfo.innerHTML='密码不一致!'
return false;
}
return false; //阻止提交 (提交事件的函数可以返回布尔类型,一旦为false,会阻止表单提交!!)
}
</script>
</body>
</html>
网友评论