dom例子四(时钟倒数-加法-按钮触发)

案例十 :

几个按钮中,当点击一个按钮时,显示“我被抓到了” ,而其他按钮显示“没被抓到”

<html>
<head>
<title></title>
<script type="text/javascript"> 
 function initEvent(){
  var inputs=document.getElementsByTagName("input");
  for(var i=0;i<inputs.length;i++){
   var input=inputs[i];
   input.οnclick=btnClick;
  }
 }
 function btnClick(){
  var inputs=document.getElementsByTagName("input");
  for(var i=0;i<inputs.length;i++){
      var input=inputs[i];
  //取得引发事件的控件
   if(input==window.event.srcElement){
    input.value="我被抓到了";
   }else{
    input.value="我没被抓到";
   }
  }
 }
</script>
</head>
<body  οnlοad="initEvent()">
<input type="button" value="不要抓我"/>
<input type="button" value="不要抓我"/>
<input type="button" value="不要抓我"/>
<input type="button" value="不要抓我"/>
<input type="button" value="不要抓我"/>
</body>
</html>


案例十一 :

简易加法计算器

<html>
<head>
<title></title>
<script type="text/javascript"> 
 function calculate(){
  var val1=document.getElementById("txt1").value;
  var val2=document.getElementById("txt2").value;
  document.getElementById("txt3").value=parseFloat(val1)+parseFloat(val2);
 }
</script>
</head>
<body >

<input id="txt1" type="text" />+<input id="txt2" type="text" />
<input type="button" οnclick="calculate()" value="="/><input id="txt3" type="text" readonly="readonly"/>
</body>
</html>


案例十二 十秒钟后协议文本框下的注册按钮才能被点击,时钟倒数
btn.disabled=true;
注册按钮初始状态为不可用disabled
启动定时器,setInterval,1秒运行一次CountDown方法。设定一个初始值为10的全局变量
在CountDown方法中对全局变量进行倒数,然后将倒数的值定局到注册按钮上  如:请仔细阅读协议(还剩8秒)
直到全局变量为小于等于0,就让注册按钮可用,将按钮的文本设置为同意

<html>
<head>
<title></title>
<script type="text/javascript"> 
 var leftSeconds=10;
 function CountDown(){
  var time1;
  var btnReg=document.getElementById("btnReg");
  if(btnReg)//如果网页速度慢,可能定时器运行的时候控件还没有加载
  {
   if(leftSeconds<=0){
    btnReg.value="agree";
    btnReg.disabled="";//btnReg.disabled=false;
    clearInterval(time1);
   }else{
    btnReg.value="请仔细阅读协议(还剩"+leftSeconds+"秒)";
    leftSeconds--;
   }
   
  }
 }
 time1=setInterval("CountDown()",1000);
</script>
</head>
<body  οnlοad="initEvent()">
<textarea></textarea>
<input name="btnReg" type="button" value="agree" disabled="disabled"/>
</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值