zoukankan      html  css  js  c++  java
  • 用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.

  • 相关阅读:
    MVC————前台中,冒号与等号的区别
    MVC-通过对象获取整个表单内容
    对Webservice的理解
    windows上使用logstash-input-jdbc
    elasticsearch-head的安装和使用
    最简单的php学习
    linq to sql 和linq to php 的区别
    thinkphp中JS文件不能写__ROOT__变量
    用curl获取https请求时出现错误的处理
    优化apk的odex处理
  • 原文地址:https://www.cnblogs.com/chenguanai/p/6595278.html
Copyright © 2011-2022 走看看