用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.
