用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.
用js写倒计时,向列表添加数据-------2017-03-21的更多相关文章
- Android创建列表并为列表添加数据
在Android开发中经常会用到ListView,也就是列表,而列表的内容需要如何决定呢,很好的方法是使用各种adapter 首先来看看用entries添加列表内容 在布局文件中,创建一个ListVi ...
- 用js给循环的列表添加click事件
纠结了两天终于搞定了,首先id这个东西必不可少,这个时候不能用onclik事件,而是需要使用代理事件. 比如说,这里有个列表如下: <ul> <li></li> & ...
- vue.js 利用SocketCluster实现动态添加数据及排序
直接上代码 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- 零代码第一步,做个添加数据的服务先。node.js + mysql
node.js + mysql 实现数据添加的功能.万事基于服务! 增删改查之添加数据. 优点:只需要设置一个json文件,就可以实现基本的添加功能,可以视为是零代码. 添加数据的服务实现的功能: 1 ...
- jQuery写省级联动列表,创造二维数组,以及如何存/调用二维数组中的数据
jQuery写省级联动列表,创造二维数组来存放数据,然后通过each来遍历调用,通过creatTxtNode创建文本节点,通过createElement创建标签option,在通过append将文本写 ...
- 用vue写添加数据、删除数据、筛选数据表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- js循环读取json数据,将读取到的数据用js写成表格
①js循环读取json数据的方式: var data=[{"uid":"2688","uname":"*江苏省南菁高级中学 022 ...
- 使用size()方法输出列表中的元素数量。需要注意的是,这个方法返回的值可能不是真实的,尤其当有线程在添加数据或者移除数据时,这个方法需要遍历整个列表来计算元素数量,而遍历过的数据可能已经改变。仅当没有任何线程修改列表时,才能保证返回的结果是准确的。
使用size()方法输出列表中的元素数量.需要注意的是,这个方法返回的值可能不是真实的,尤其当有线程在添加数据或者移除数据时,这个方法需要遍历整个列表来计算元素数量,而遍历过的数据可能已经改变.仅当没 ...
- js限制输入数字能输入小数点,js定义数组,js往数组中添加数据,js将字符型转为数字型,除法结果保留两位小数——js小测:计算比赛得分
一个朋友跟我说要去给某个比赛算分: 规则:去掉最低分最高分求平均分: 最近在学习大数据可视化——图谱,用到js一些东西,所以今天就用js练练 用到知识点: js限制输入数字能输入小数点,js定义数组, ...
随机推荐
- 深度理解微信小程序的思想
这篇文章不涉及小程序技术方面得问题,只讨论小程序的核心问题. 探讨一个问题最好的方法是问"为什么",这篇文章主要思路是通过回答以下几个问题来探讨微信小程序的"思想&quo ...
- [TPYBoard-Micropython之会python就能做硬件 4] 学习使用电位器和1602显示屏
一.实验器材 1.TPYboard V102板 一块 2.电位器 一个 3.1602 屏 一块 4.杜邦线:若干 二.电位器的使用 电位器 (英文:Potentiometer)是可变电阻器的一种 ...
- 源码(05) -- java.util.AbstractCollection<E>
java.util.AbstractCollection<E> 源码分析(JDK1.7) ------------------------------------------------- ...
- spring MVC cors跨域实现源码解析
# spring MVC cors跨域实现源码解析 > 名词解释:跨域资源共享(Cross-Origin Resource Sharing) 简单说就是只要协议.IP.http方法任意一个不同就 ...
- Raid类型
raid0:两块磁盘同时写入raid1:一块磁盘写入,另一块磁盘做备份,利用率50%raid5:两块磁盘同时写入两块磁盘都有内容,第三块磁盘做效应,n/n-1的利用率raid6:四块磁盘两块磁盘做存储 ...
- linux python3.5.0安装并替代centos自带的python
CentOS自带2.7.3版本的Python,旧版本无法及时支持新功能,所以要安装更高版本的Python3.5.0. 1.下载#wget https://www.python.org/ftp/pyth ...
- 详解 swift2.2 和 OC 的混编
前言: 我们在一些情况下,仅仅使用swift 是无法完成一个项目的,在swift项目中必要用到 OC 实现一些功能,比如,项目要使用一些第三方的框架,但这个第三方的框架却是用 OC 实现的,或者你的项 ...
- Java模拟新浪微博登陆抓取数据
前言: 兄弟们来了来了,最近有人在问如何模拟新浪微博登陆抓取数据,我听后默默地抽了一口老烟,暗暗的对自己说,老汉是时候该你出场了,所以今天有时间就整理整理,浅谈一二. 首先: 要想登陆新浪微博需要 ...
- 第一章 Java语言概述2
一.编写第一个Java应用程序 1.下载.安装JDK 官方网址:www.oracle.com java.sun.com 安装JDK 傻瓜式安装,下一步即可. 建议:安装路径不要有中文或者特殊符号,如空 ...
- 从CMOS到触发器(一)
作为一个学微电子专业的IC learner,这个学期也有一门课:<微电子器件>,今天我就来聊聊基本的器件:CMOS器件及其电路.在后面会聊聊锁存器和触发器. 今天的主要内容如下所示: ·M ...