JS笔记

作者: 阿甘呀 | 来源:发表于2016-12-23 11:02 被阅读49次

    1、函数的调用:函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块

    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function myFunction()
    {
    alert(哈喽!");
    }
    </script>
    </head>
    
    <body>
    <button onclick="myFunction()">点击这里</button>
    </body>
    </html>
    

    2、JavaScript 函数语法:函数就是包裹在花括号中的代码块,前面使用了关键词 function,例如:

    function functionname()
    {
    这里是要执行的代码
    }
    当调用该函数时,会执行函数内的代码。
    可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 JavaScript 在任何位置进行调用。
    提示:JavaScript 对大小写敏感。关键词 function 必须是小写的,并且必须以与函数名称相同的大小写来调用函数
    

    3、调用带参数的函数,在调用函数时,您可以向其传递值,这些值被称为参数。这些参数可以在函数中使用。您可以发送任意多的参数,由逗号 (,) 分隔:

    myFunction(argument1,argument2) 
    
    //当您声明函数时,请把参数作为变量来声明:
    function myFunction(var1,var2)
    {
    这里是要执行的代码
    }
    注意:变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值,以此类推
    例如:
    <button onclick="myFunction('Bill Gates','CEO')">点击这里</button>
    
    <script>
    function myFunction(name,job){
    alert("Welcome " +name+ ", the " +job);
    }
    </script>
    

    4、带有返回值的函数,有时,我们会希望函数将值返回调用它的地方。通过使用 return 语句就可以实现。在使用 return 语句时,函数会停止执行,并返回指定的值。
    语法

    function myFunction()
    {
    var x=5;
    return x;
    }
    上面的函数会返回值 5。
    注释:整个 JavaScript 并不会停止执行,仅仅是函数。JavaScript 将继续执行代码,从调用函数的地方。
    函数调用将被返回值取代:
    
    var myVar=myFunction();//函数调用
    myVar 变量的值是 5,也就是函数 "myFunction()" 所返回的值。
    即使不把它保存为变量,您也可以使用返回值:
    <laber type="text" id="demo" />
    document.getElementById("demo").innerHTML=myFunction();//获取到 id="demo"的HTML元素并将返回值5赋予HTML元素显示
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
        <script>
            function myFuntion() {
                //修改html内容
               //var x = document.getElementById("pid");
               // x.innerHTML = "这是替换后滴文字!"
               // x.style.color = "red";
    
                //验证输入
                var  y = document.getElementById("isID").value;
                if (y == "" || isNaN(y)) {
                    alert("请输入数字!");
                } 
            }
        </script>
    </head>
    <body>
        <div>
             <p id="pid">这是替换前的文字</p>
            <input type="text" id="isID" />
            <button type="button" onclick="myFuntion()">点击我看看</button>
           
        </div>
    </body>
    </html>
    

    5、局部 JavaScript 变量
    在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。(该变量的作用域是局部的)。
    您可以在不同的函数中使用名称相同的局部变量,因为只有声明过该变量的函数才能识别出该变量。
    只要函数运行完毕,本地变量就会被删除。
    6、条件运算符:

    greeting=(visitor=="PRES")?"Dear President ":"Dear ";//如果变量 visitor 中的值是 "PRES",则向变量 greeting 赋值 "Dear President ",否则赋值 "Dear"。
    

    7、条件语句
    通常在写代码时,您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。
    在 JavaScript 中,我们可使用以下条件语句:
    if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码
    if...else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码
    if...else if....else 语句 - 使用该语句来选择多个代码块之一来执行
    switch 语句 - 使用该语句来选择多个代码块之一来执行

    ---------------------------if 语句语法--------------------------
    
    if (条件)
      {
      只有当条件为 true 时执行的代码
      }
    ---------------------------if...else 语句语法--------------------------
    
    if (条件)
      {
      当条件为 true 时执行的代码
      }
    else
      {
      当条件不为 true 时执行的代码
      }
    --------------------if...else if....else 语句语法----------------------
    
    if (条件 1)
      {
      当条件 1 为 true 时执行的代码
      }
    else if (条件 2)
      {
      当条件 2 为 true 时执行的代码
      }
    else
      {
      当条件 1 和 条件 2 都不为 true 时执行的代码
      }
    -----------------switch 语句语法-----------------
    switch(n)
    {
    case 1:
      执行代码块 1
      break;
    case 2:
      执行代码块 2
      break;
    default:
      n 与 case 1 和 case 2 不同时执行的代码
    }
    
    default 关键词
    
    请使用 default 关键词来规定匹配不存在时做的事情:
    实例
    
    如果今天不是周六或周日,则会输出默认的消息:
    
    var day=new Date().getDay();
    switch (day)
    {
    case 6:
      x="Today it's Saturday";
      break;
    case 0:
      x="Today it's Sunday";
      break;
    default:
      x="Looking forward to the Weekend";
    }
    x 的结果:
    
    Looking forward to the Weekend
    
    

    8、JavaScript 测试和捕捉
    try 语句允许我们定义在执行时进行错误测试的代码块。
    catch 语句允许我们定义当 try 代码块发生错误时,所执行的代码块。
    JavaScript 语句 trycatch 是成对出现的。

    语法
    try {
     //在这里运行代码
     }catch(err) {
     //在这里处理错误 
    }
    实例
    在下面的例子中,我们故意在 try 块的代码中写了一个错字。
    catch 块会捕捉到 try 块中的错误,并执行代码来处理它。
    <!DOCTYPE html>
    <html>
    <head>
    <script>
    var txt="";
    function message(){
    try { 
            adddlert("Welcome guest!");//正确的是alert("Welcome guest!");
     }catch(err) { 
            txt="There was an error on this page.\n\n";
            txt+="Error description: " +err.message + "\n\n"; 
            txt+="Click OK to continue.\n\n";
            alert(txt);
     }
    }
    </script>
    </head>
    <body>
    <input type="button" value="View message" onclick="message()"></body></html>
    

    9、Throw 语句
    throw 语句允许我们创建自定义错误。
    正确的技术术语是:创建或抛出异常(exception)。
    如果把 throw 与 try 和 catch 一起使用,那么您能够控制程序流,并生成自定义的错误消息。

    语法
    throw *exception*
    异常可以是 JavaScript 字符串、数字、逻辑值或对象。
    实例
    本例检测输入变量的值。如果值是错误的,会抛出一个异常(错误)。catch 会捕捉到这个错误,并显示一段自定义的错误消息:
    <script>
    function myFunction(){
    try { 
          var x=document.getElementById("demo").value; 
          if(x=="")
                  throw "值为空";
          if(isNaN(x)) 
                 throw "不是数字";
          if(x>10)
                  throw "太大";
          if(x<5)
                  throw "太小";
    }catch(err) {  
                var y=document.getElementById("mess");
                y.innerHTML="Error: " + err + "."; 
          }
    } 
    </script> 
    <h1>My First JavaScript</h1>
    <p>Please input a number between 5 and 10:</p>
    <input id="demo" type="text">
    <button type="button" onclick="myFunction()">Test Input</button>
    <p id="mess"></p>
    
    说明
    isNaN() 函数可用于判断其参数是否是 NaN,该值表示一个非法的数字(比如被 0 除后得到的结果)。
    
    如果把 NaN 与任何值(包括其自身)相比得到的结果均是 false,所以要判断某个值是否是 NaN,不能使用 == 或 === 运算符。正因为如此,isNaN() 函数是必需的。
    

    10、(非常重要)JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

    JavaScript 表单验证
    JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
    被 JavaScript 验证的这些典型的表单数据有:
    用户是否已填写表单中的必填项目?
    用户输入的邮件地址是否合法?
    用户是否已输入合法的日期?
    用户是否在数据域 (numeric field) 中输入了文本?

    必填(或必选)项目
    下面的函数用来检查用户是否已填写表单中的必填(或必选)项目。假如必填或必选项为空,那么警告框会弹出,并且函数的返回值为 false,否则函数的返回值则为 true(意味着数据没有问题):

    <html>
    <head>
    <script type="text/javascript">
    
    function validate_required(field,alerttxt)
    {
    with (field)
      {
      if (value==null||value=="")
        {
             alert(alerttxt);
             return false;
        }
      else {
            return true;
    }
      }
    }
    
    function validate_form(thisform)
    {
    with (thisform)
      {
      if (validate_required(email,"Email must be filled out!")==false)
        {
         email.focus();
         return false;
        }
      }
    }
    </script>
    </head>
    
    <body>
    <form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
    Email: <input type="text" name="email" size="30">
    <input type="submit" value="Submit"> 
    </form>
    </body>
    
    </html>
    
    

    E-mail 验证

    
    
    下面的函数检查输入的数据是否符合电子邮件地址的基本语法。
    
    意思就是说,输入的数据必须包含 @ 符号和点号(.)。同时,@ 不可以是邮件地址的首字符,并且 @ 之后需有至少一个点号:
    <html>
    <head>
    <script type="text/javascript">
    function validate_email(field,alerttxt)
    {
    with (field)
    {
               apos=value.indexOf("@")
               dotpos=value.lastIndexOf(".")
    if (apos<1||dotpos-apos<2) 
      {
                alert(alerttxt);
                return false
    }
    else {
               return true
           }
    }
    }
    
    function validate_form(thisform)
    {
    with (thisform)
    {
    if (validate_email(email,"Not a valid e-mail address!")==false)
      {
                  email.focus();
                  return false
      }
    }
    }
    </script>
    </head>
    
    <body>
    <form action="submitpage.htm"onsubmit="return validate_form(this);" method="post">
    Email: <input type="text" name="email" size="30">
    <input type="submit" value="Submit"> 
    </form>
    </body>
    
    </html>
    

    11、查找 HTML 元素
    通常,通过 JavaScript,您需要操作 HTML 元素。
    为了做到这件事情,您必须首先找到该元素。有三种方法来做这件事:

    通过 id 找到 HTML 元素
    通过标签名找到 HTML 元素
    

    通过 id 查找 HTML 元素
    在 DOM 中查找 HTML 元素的最简单的方法,是通过使用元素的 id。

    实例
    
    本例查找 id="intro" 元素:
    
    var x=document.getElementById("intro");//获取到id="intro"元素
    
    如果找到该元素,则该方法将以对象(在 x 中)的形式返回该元素。
    如果未找到该元素,则 x 将包含 null。
    

    通过标签名查找 HTML 元素

    实例
    
    本例查找 id="main" 的元素,然后查找 "main" 中的所有 <p> 元素:
    
    var x=document.getElementById("main");
    var y=x.getElementsByTagName("p");
    提示:通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。
    

    12、HTML DOM 允许 JavaScript 改变 HTML 元素的内容。
    改变 HTML 内容
    修改 HTML 内容的最简单的方法时使用 innerHTML 属性。

    实例
    本例改变了 <h1> 元素的内容:
    <!DOCTYPE html>
    <html>
    <body>
                      <h1 id="header">Old Header</h1>
         <script>
                      var element=document.getElementById("header");
                      element.innerHTML="New Header";
        </script>
    </body>
    </html>
    例子解释:
        上面的 HTML 文档含有 id="header" 的 <h1> 元素
        我们使用 HTML DOM 来获得 id="header" 的元素
        JavaScript 更改此元素的内容 (innerHTML)
    

    改变 HTML 属性:

    实例
    本例改变了 <img> 元素的 src 属性:
    <!DOCTYPE html>
    <html>
    <body>
                  <img id="image" src="smiley.gif">
          <script>
                 document.getElementById("image").src="landscape.jpg";
         </script>
    </body>
    </html>
    例子解释:
        上面的 HTML 文档含有 id="image" 的 <img> 元素
        我们使用 HTML DOM 来获得 id="image" 的元素
        JavaScript 更改此元素的属性(把 "smiley.gif" 改为 "landscape.jpg")
    

    改变 HTML 样式:

    例子 1
    
    下面的例子会改变 <p> 元素的样式:
    
    <p id="p2">Hello World!</p>
    
    <script>
                 document.getElementById("p2").style.color="blue";
    </script>
    
    例子 2
    本例改变了 id="id1" 的 HTML 元素的样式,当用户点击按钮时:
    
    <h1 id="id1">My Heading 1</h1>
    <button type="button" onclick="document.getElementById('id1').style.color='red'">点击这</button>
    

    使元素消失:

    <!DOCTYPE html>
    <html>
    <body>
    
    <p id="p1">这是一段文本。</p>
    
    <input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" />
    <input type="button" value="显示文本" onclick="document.getElementById('p1').style.visibility='visible'" />
    
    </body>
    </html>
    

    13、JavaScript HTML DOM 事件
    对事件做出反应
    我们可以在事件发生时执行 JavaScript,比如当用户在 HTML 元素上点击时。
    如需在用户点击某个元素时执行代码,请向一个 HTML 事件属性添加 JavaScript 代码:
    onclick=JavaScript

    例子 1
    在本例中,当用户在 <h1> 元素上点击时,会改变其内容:
    <!DOCTYPE html>
    <html>
    <body>
    <h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>
    </body>
    </html>
    
    例子 2
    本例从事件处理器调用一个函数:
    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function changetext(id)
    {
    id.innerHTML="谢谢!";
    }
    </script>
    </head>
    <body>
    <h1 onclick="changetext(this)">请点击该文本</h1>
    </body>
    </html>
    

    HTML 事件属性
    如需向 HTML 元素分配 事件,您可以使用事件属性。

    实例
    向 button 元素分配 onclick 事件:
    <!DOCTYPE html>
    <html>
    <body>
    
    <p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p>
    
    <button onclick="displayDate()">点击这里</button>
    
    <script>
    function displayDate()
    {
    document.getElementById("demo").innerHTML=Date();
    }
    </script>
    
    <p id="demo"></p>
    
    </body>
    </html>
    在上面的例子中,名为 displayDate 的函数将在按钮被点击时执行
    

    14、onmouseover 和 onmouseout 事件

    onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
    实例
    一个简单的 onmouseover-onmouseout 实例:
    <!DOCTYPE html>
    <html>
    <body>
    <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>
    <script>
    function mOver(obj)
    {
    obj.innerHTML="谢谢"
    }
    
    function mOut(obj)
    {
    obj.innerHTML="把鼠标移到上面"
    }
    </script>
    
    </body>
    </html>
    
    ------------------------------------------------------------------------
    
    onmousedown、onmouseup 以及 onclick 事件
    onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。
    实例
    
    一个简单的 onmousedown-onmouseup 实例:
    
    <!DOCTYPE html>
    <html>
    <body>
    
    <div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</div>
    
    <script>
    function mDown(obj)
    {
    obj.style.backgroundColor="#1ec5e5";
    obj.innerHTML="请释放鼠标按钮"
    }
    
    function mUp(obj)
    {
    obj.style.backgroundColor="green";
    obj.innerHTML="请按下鼠标按钮"
    }
    </script>
    
    </body>
    </html>
    

    15、JavaScript 对象
    JavaScript 提供多个内建对象,比如 String、Date、Array 等等。
    对象只是带有属性方法的特殊数据类型。

    访问对象的属性
    属性是与对象相关的值。

    访问对象属性的语法是:
    objectName.propertyName
    
    这个例子使用了 String 对象的 length 属性来获得字符串的长度:
    var message="Hello World!";
    var x=message.length;
    
    访问对象的方法
    方法是能够在对象上执行的动作。
    您可以通过以下语法来调用方法:
    objectName.methodName()
    这个例子使用了 String 对象的 toUpperCase() 方法来将文本转换为大写:
    var message="Hello world!";
    var x=message.toUpperCase();
    在以上代码执行后,x 的值将是:
    HELLO WORLD!
    

    16、创建 JavaScript 对象
    通过 JavaScript,您能够定义并创建自己的对象。
    创建新对象有两种不同的方法:

    定义并创建对象的实例
    使用函数来定义对象,然后创建新的对象实例
    

    创建直接的实例

    这个例子创建了对象的一个新实例,并向其添加了四个属性:
    实例:

    person=new Object();
    person.firstname="Bill";
    person.lastname="Gates";
    person.age=56;
    person.eyecolor="blue";
    

    17、JavaScript String(字符串)对象 实例
    match() 方法
    如何使用 match() 来查找字符串中特定的字符,并且如果找到的话,则返回这个字符。

    <html>
    <body>
    <script type="text/javascript">
              var str="Hello world!"
              document.write(str.match("world") + "<br />")
              document.write(str.match("World") + "<br />")
              document.write(str.match("worlld") + "<br />")
              document.write(str.match("world!"))
    </script>
    </body>
    </html>
    结果:
    world
    null
    null
    world! 
    

    如何替换字符串中的字符 - replace()
    如何使用 replace() 方法在字符串中用某些字符替换另一些字符。

    <html>
    <body>
    
    <script type="text/javascript">
    
    var str="Visit Microsoft!"
    document.write(str.replace(/Microsoft/,"W3School"))
    
    </script>
    </body>
    </html>
    

    18、字符串对象
    字符串对象用于处理已有的字符块。
    例子:
    下面的例子使用字符串对象的长度属性来计算字符串的长度。

    var txt="Hello world!"
    document.write(txt.length)
    上面的代码输出为:
    12
    

    下面的例子使用字符串对象的toUpperCase()方法将字符串转换为大写:

    var txt="Hello world!"
    document.write(txt.toUpperCase())
    上面的代码输出为:
    HELLO WORLD!
    

    19、JavaScript Date(日期)对象

    getTime()获得当日的日期。

    <html>
    <body>
    
    <script type="text/javascript">
    
    document.write(Date())
    
    </script>
    
    </body>
    </html>
    

    getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。

    <html>
    <body>
    
    <script type="text/javascript">
    var d=new Date();
    document.write("从 1970/01/01 至今已过去 " + d.getTime() + " 毫秒");
    </script>
    
    </body>
    </html>
    

    setFullYear()设置具体的日期。

    <html>
    <body>
    <script type="text/javascript">
    var d = new Date()
    d.setFullYear(1992,10,3)
    document.write(d)
    </script>
    </body>
    </html>
    

    toUTCString():使用 toUTCString() 将当日的日期(根据 UTC)转换为字符串。

    <html>
    <body>
    <script type="text/javascript">
    var d = new Date()
    document.write (d.toUTCString())
    </script>
    </body>
    </html>
    

    getDay():使用 getDay() 和数组来显示星期,而不仅仅是数字。

    <html>
    <body>
    <script type="text/javascript">
    var d=new Date()
    var weekday=new Array(7)
    weekday[0]="星期日"
    weekday[1]="星期一"
    weekday[2]="星期二"
    weekday[3]="星期三"
    weekday[4]="星期四"
    weekday[5]="星期五"
    weekday[6]="星期六"
    document.write("今天是" + weekday[d.getDay()])
    </script>
    </body>
    </html>
    

    网页上显示一个钟表。

    <html>
    <head>
    <script type="text/javascript">
    function startTime()
    {
    var today=new Date()
    var h=today.getHours()
    var m=today.getMinutes()
    var s=today.getSeconds()
    // add a zero in front of numbers<10
    m=checkTime(m)
    s=checkTime(s)
    document.getElementById('txt').innerHTML=h+":"+m+":"+s
    t=setTimeout('startTime()',500)
    }
    
    function checkTime(i)
    {
    if (i<10) 
      {i="0" + i}
      return i
    }
    </script>
    </head>
    
    <body onload="startTime()">
    <div id="txt"></div>
    </body>
    </html>
    

    20、JavaScript Math(算数)对象
    round():四舍五入

    <html>
    <body>
    <script type="text/javascript">
    document.write(Math.round(0.60) + "<br />")
    document.write(Math.round(0.50) + "<br />")
    document.write(Math.round(0.49) + "<br />")
    document.write(Math.round(-4.40) + "<br />")
    document.write(Math.round(-4.60))
    </script>
    </body>
    </html>
    结果:
    1
    1
    0
    -4
    -5 
    

    random():返回一个介于 0 和 1 之间的随机数

    <html>
    <body>
    <script type="text/javascript">
    document.write(Math.random())
    </script>
    </body>
    </html>
    
    
    下面的例子使用了 Math 对象的 floor() 方法和 random() 来返回一个介于 0 和 10 之间的随机数:
    
    document.write(Math.floor(Math.random()*11)) 
    

    max(): 使用 max()来返回两个给定的数中的较大的数

    <html>
    <body>
    <script type="text/javascript">
    document.write(Math.max(5,7) + "<br />")
    document.write(Math.max(-3,5) + "<br />")
    document.write(Math.max(-3,-5) + "<br />")
    document.write(Math.max(7.25,7.30))
    </script>
    </body>
    </html>
    

    使用 min():使用 min() 来返回两个给定的数中的较小的数。

    <html>
    <body>
    <script type="text/javascript">
    document.write(Math.min(5,7) + "<br />")
    document.write(Math.min(-3,5) + "<br />")
    document.write(Math.min(-3,-5) + "<br />")
    document.write(Math.min(7.25,7.30))
    </script>
    </body>
    </html>
    

    注意:
    Math 对象
    Math(算数)对象的作用是:执行普通的算数任务。
    Math 对象提供多种算数值类型和函数。无需在使用这个对象之前对它进行定义。

    21、JavaScript 计时

    JavaScript 计时事件
    通过使用 JavaScript,我们有能力作到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。
    在 JavaScritp 中使用计时事件是很容易的,两个关键方法是:

    setTimeout()
    未来的某时执行代码
    clearTimeout()
    取消setTimeout()
    setTimeout()
    语法
    var t=setTimeout("javascript语句",毫秒)
    setTimeout() 方法会返回某个值。在上面的语句中,值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout(),你可以使用这个变量名来指定它。
    setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')",或者对函数的调用,诸如 alertMsg()"。
    第二个参数指示从当前起多少毫秒后执行第一个参数。
    提示:1000 毫秒等于一秒。
    

    点击按钮。警告框会在 5 秒后显示

    <html>
    <head>
    <script type="text/javascript">
    function timedMsg()
    {
    var t=setTimeout("alert('5 秒!')",5000)
    }
    </script>
    </head>
    <body>
    <form>
    <input type="button" value="显示定时的警告框" onClick = "timedMsg()">
    </form>
    <p>请点击上面的按钮。警告框会在 5 秒后显示。</p>
    </body>
    </html>
    

    输入框会显示出已经过去的时间

    <html>
    <head>
    <script type="text/javascript">
    function timedText()
    {
    var t1=setTimeout("document.getElementById('txt').value='2 秒'",2000)
    var t2=setTimeout("document.getElementById('txt').value='4 秒'",4000)
    var t3=setTimeout("document.getElementById('txt').value='6 秒'",6000)
    }
    </script>
    </head>
    <body>
    <form>
    <input type="button" value="显示计时的文本" onClick="timedText()">
    <input type="text" id="txt">
    </form>
    <p>点击上面的按钮。输入框会显示出已经逝去的时间(2、4、6 秒)。</p>
    </body>
    </html>
    

    无限循环计时:

    <html>
    <head>
    <script type="text/javascript">
    var c=0
    var t
    function timedCount()
    {
    document.getElementById('txt').value=c
    c=c+1
    t=setTimeout("timedCount()",1000)  //要创建一个运行于无穷循环中的计时器,我们需要编写一个函数来调用其自身
    }
    </script>
    </head>
    <body>
    <form>
    <input type="button" value="开始计时!" onClick="timedCount()">
    <input type="text" id="txt">
    </form>
    <p>请点击上面的按钮。输入框会从 0 开始一直进行计时。</p>
    </body>
    </html>
    

    点击计数按钮后根据用户输入的数值开始倒计时,点击停止按钮停止计时

    //下面的例子和上面的无穷循环的例子相似。唯一的不同是,现在我们添加了一个 "Stop Count!" 按钮来停止这个计数器
    <html>
    <head>
    <script type="text/javascript">
    var c=0
    var t
    function timedCount()
    {
    document.getElementById('txt').value=c
    c=c+1
    t=setTimeout("timedCount()",1000)
    }
    
    function stopCount()
    {
    c=0;
    setTimeout("document.getElementById('txt').value=0",0);
    clearTimeout(t);
    }
    </script>
    </head>
    <body>
    <form>
    <input type="button" value="开始计时!" onClick="timedCount()">
    <input type="text" id="txt">
    <input type="button" value="停止计时!" onClick="stopCount()">
    </form>
    <p>请点击上面的“开始计时”按钮来启动计时器。输入框会一直进行计时,从 0 开始。点击“停止计时”按钮可以终止计时,并将计数重置为 0。</p>
    </body>
    </html>
    

    小时钟

    <html>
    <head>
    <script type="text/javascript">
    function startTime()
    {
    var today=new Date()
    var h=today.getHours()
    var m=today.getMinutes()
    var s=today.getSeconds()
    
    m=checkTime(m)
    s=checkTime(s)
    document.getElementById('txt').innerHTML=h+":"+m+":"+s
    t=setTimeout('startTime()',500)
    }
    function checkTime(i)
    {
    if (i<10) 
      {i="0" + i}
      return i
    }
    </script>
    </head>
    <body onload="startTime()">
    <div id="txt"></div>
    </body>
    </html>
    

    此笔记是学习过程中认为比较重要,也需要掌握的知识,笔记内容来自W3school

    相关文章

      网友评论

          本文标题:JS笔记

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