• 用js写倒计时,向列表添加数据-------2017-03-21


    一、单选按钮确定提交是否可用

    <input id="a" type="radio" name="a"  onclick="check()"/>

    <label for="a">同意</label>

    <input id="b" type="radio" name="a"  onclick="check()" />

    <label for="b">不同意</label><br />

    <input type="button" name="d" id="c" value="提交" disabled="disabled"/>

    <script>

    function check(){

    var yes=document.getElementById("a");

    var no=document.getElementById("b");

    var btn=document.getElementById("c");

    //  if(yes.getAttribute("checked")) 这个行不通,记住下面这个yes.check

    if(yes.checked)

    {

    btn.removeAttribute("disabled");

    }

    if(no.checked){

    btn.setAttribute("disabled","disabled");

    }

    }

    </script>

    显示效果如下:

    未点击前,提交按钮不可用;在点击同意之后后提交按钮可用。

     

                           

    二、倒计时:

    Eg1:

    <script>

    function shijian(){

    alert("哈哈");

    }

    window.setTimeout("shijian()",2000);

    </script>

    注:setTimeoout属性是指延长多少时间发生的事,以毫秒计数。

    此处显示效果: 哈哈界面就会在刷新页面2000毫秒后弹出。

    Eg2:

    <script>

    function shijian(){

    alert("哈哈");

    }

    for(i=0;i<4;i++){

    window.setTimeout("shijian()",i*2000);

    }

    </script>

    显示效果:利用for循环控制显示次数,即每隔2秒显示一次哈哈,共显示4次。

    Eg3:

    <span id="time">8</span>

    <input id="btn" name="next" type="button" disabled="disabled" value="下一步" />

    <script>

    function shijian(){

    var s=document.getElementById("time").innerText;

    s=parseInt(s);         -------变量转换成整数。

    if(s<=0){                  ------当秒数小于0时,“下一步”按钮生效。

    document.getElementById("btn").removeAttribute("disabled");

    }

    else{                      

    s--;                        -------时间每隔2秒减1

    document.getElementById("time").innerText=s;

    }

    }

    for(i=0;i<=9;i++){         -------设置循环次数和时间间隔

    window.setTimeout("shijian()",i*2000);

    }

    </script>

    注:次数的设置,可能会因为少一次导致按钮不可用。

    三、向列表内添加数据:

    1、利用<ol>列表

    <body>

    <ol id="ol1">                         -------定义一个有序列表

    <li>开始值</li>    

    </ol>

    <input type="text" id="txt"/>          -----------输出一个文本框

    <input type="button" value="添加" id="btn" onclick="add()"/>

                          -----------设置一个添加按钮,并创建一个点击事件     

    <script>

    function add()

    {

    var x = document.getElementById("txt").value;   ---将文本内容定义给x

    var y = document.getElementById("ol1");      -------将列表内容定义给y

    y.innerHTML+="<li>"+x+"</li>";           --------将x值添加到y中

    }

    </script>

    </body>

    2、利用<select>做列表

    <select size="7" id="ol1">   -----显示一个有5列的列表,最多可到7列

    <option>1</option>

    <option>2</option>

    <option>3</option>

    <option>4</option>

    <option>5</option>

    </select>

    <input type="text" id="txt"/>

    <input type="button" value="添加" id="btn" onclick="add()"/>

    <script>

    function add()

    {

    var x = document.getElementById("txt").value;

    var y = document.getElementById("ol1");

    y.innerHTML+="<option>"+x+"</option>";

    }

    </script>

    Everything will go okay. Just go ahead.

  • 相关阅读:
    Week4_1Neural Networks Representation
    吴恩达逻辑回归题目详解
    丢弃正则化
    python随笔 join 字典,列表的清空 set集合 以及深浅拷贝(重点..难点)
    python全栈开发 随笔 'is' 和 == 的比较知识与区别 编码和解码的内容及转换
    python全栈 字典数据类型相关知识及操作
    Python全栈开发 列表, 元组 数据类型知识运用及操作 range知识
    python全栈 字符串,整数,bool 数据类型运用
    python全栈 流程控制;while 循环 格式化输出 运算符 及编码
    python全栈开发 什么是python python命名及循环
  • 原文地址:https://www.cnblogs.com/chenguanai/p/6595278.html
Copyright © 2020-2023  润新知