JavaScript之事件练习

作者: 意蜀 | 来源:发表于2019-08-02 19:19 被阅读2次

补充以下HTML,实现点击某一个数字可以alert出该数字。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件监听</title>
</head>
<body>
<ul id="no">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>

<script>
   // write your code here 
   // ......
</script>
</body>
</html>

答案

 var list=document.getElementById('no').getElementsByTagName('li');
    for(var i=0;i<list.length;i++){
         list[i].onclick=function(){
             alert(this.firstChild.nodeValue);//使用dom的nodeValue属性
         }
    }

实现一个基础的计时器应用,点击开始按钮开始计时,点击结束按钮结束计时,并把计时的结果显示在上面的输入框中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器示例</title>
</head>
<body>

<input type="text" id="result">

<input type="button" value="开始" >
<input type="button" value="结束" >

<script>
    // write your code here
    // ......
</script>
</body>
</html>

答案

  var hello=0;
        var time;
        var go=0;
     function timedCount(){
         document.getElementById('result').value=hello;
         hello=hello+1;
         time=setTimeout(function(){timedCount()},1000);
        }
     function start(){
         if (!go){
            go=1;
             timedCount();
         }
    }
      function stop(){
         clearTimeout(time);
         go=0;
         }

相关文章

  • JavaScript ☞ day3

    JavaScript基础学习笔记之JavaScript进阶 焦点事件 鼠标事件-单击与双击 鼠标事件-mouseo...

  • JavaScript之事件练习

    补充以下HTML,实现点击某一个数字可以alert出该数字。 答案: 实现一个基础的计时器应用,点击开始按钮开始计...

  • JavaScript事件之鼠标事件

    1. 鼠标事件 在DOM3级事件中定义了9个鼠标事件: click:在用户单击主鼠标按钮(一般是左边的按钮)或按下...

  • JS-Basic

    本文主要结构 任务JavaScript基础练习JavaScript集合练习 JavaScript基础练习学到的主要...

  • javascript之“事件绑定”

    设计场景 给元素绑定事件 问题 兼容性问题 解决方案

  • JavaScript之Event事件

    JavaScript 事件是由访问 Web 页面的用户引起的一系列操作。当用户执行某些操作的时候,再去执行一系列代...

  • Js事件循环

    列表 JavaScript事件循环 测试金字塔 stub JavaScript事件循环理解 javaScript语...

  • JavaScript绑定事件的三种方式

    @(javascript)[JavaScript事件绑定] JavaScript绑定事件的三种方式 使用内联 使用...

  • javascript 中的事件机制

    js之事件机制 1、事件初探 1.1 js事件的概述 JavaScript事件:JavaScript是基于事件驱动...

  • 第三次任务总结

    任务内容—Javascript 编程入门 1.Javascript代码个人练习 a.Javascript 基础练习...

网友评论

    本文标题:JavaScript之事件练习

    本文链接:https://www.haomeiwen.com/subject/fmfrrctx.html