JavaScript回顾练习

第一题：

1、给等于号的元素添加点击事件

1)在"="元素上面添加onclick属性=“getSum()”
2)在js文件中获取“=”的元素，元素.onclick=function jia(){

}

备注：onmouseover、onmouseout、onmousedown、onmouseup、onkeydown、onkeypress、onkeyup

2、定义函数，实现点击后的效果

1）获取第一个和第二个文本框的值

var firstNum= document.getElementById("first").value;
var secondNum= document.getElementById("second").value;

备注： document.getElementsByName("zhangsan")
document.getElementsByTagName("标签名")
value、innerText、innerHTML三个属性的区别 <li><a>英雄联盟</a></li>
系统函数：parseInt，parseFloat isNaN

2)求和并给第三个文本框赋值

var sum=firstNum+secondNum
document.getElementById("thrid").value=sum

第二题：

1）如何启用按钮

document.getElementById("btnShow").disabled=false;

2）如何让按钮中的数字递减

扫描二维码关注公众号，回复： 8330688 查看本文章

var num=5;

function time(){

document.getElementById("btnShow").value="请仔细阅读协议("+num+")";
num--;
}

var mySetInterval= setInterval("time()",1000); --每隔一秒执行函数time()

3）如何让数字等于0时停止递减并启用按钮

function time(){
　　//当num大于0时递减，并输出数字，否则，按钮的文字改为“同意”并启用按钮，
　　if(num>0){
　　　　document.getElementById("btnShow").value="请仔细阅读协议("+num+")";
　　　　num--;
　　}else{
　　　　//将按钮文本改为“同意”
　　　　//启用按钮
　　　　//清除定时函数，否则死循环导致页面后期卡顿
　　}

}

备注：setInterval，clearInterval，setTimeout、clearTimeOut 四个定时函数

第三题:

思考：如何实现鼠标移入和移出，移入后如何确定是否为当前的li
如何实现鼠标点击，并将当前元素删除，追加到第二个ul中

1)给第一个ul下的li添加onmouseover(鼠标移入)、onmouseout(鼠标移出)属性

例如：<li onmouseover="addBgColor(this)" onmouseout="removeBgColor(this)">火箭</li>

备注：每个函数中的this代表当前元素

2)给onmouseover事件指定函数，实现背景颜色为红色

function addBgColor(obj){
obj.style.backgroundColor="red";
}

3)给onmouseout事件指定函数，实现移出红色背景功能(将背景色改为白色)

function removeBgColor(obj){
obj.style.backgroundColor="white";
}

4)给第一个ul下的li添加onclick属性

例如：<li onmouseover="addBgColor(this)" onmouseout="removeBgColor(this)" onclick="moveLi(obj)">火箭</li>

5)给onclick事件指定函数，实现删除当前元素，将当前元素追加到第二个ul中(this参数代表当前元素)

function moveLi(obj){
//删除当前元素
document.getElementById("firstUL").removeChild(obj);
//将obj当前元素追加到第二个ul中
document.getElementById("secondUL").appendChild(obj)
}

猜你喜欢