一:单选按钮,选择同意,提交变为可用,反正提交不可用:

HTML里面代码:

<form id="f1" name="f1">
<input type="radio" value="true" id="ok1" name="ok" onclick="doEnable()"/>
<label for="ok1">同意</label>
<input type="radio" value="false" id="ok2" name="ok" checked="checked" onclick="doEnable()"/><label for="ok2">不同意</label><br/> <input type="Submit" value="提交" id="btn" name="btn" disabled="disabled"/>
</form>

JS代码:

function doEnable()
{
var b = document.getElementById("btn");
var a = document.getElementById("ok1");
if(a.checked)
{
b.removeAttribute("disabled");
}
else
{
b.setAttribute("disabled","disabled");
}
}

二:表单操作,列表内数据的添加,删除,修改

效果图如下:

HTML代码:

<form id="f1">
<input type="text" id="t1" name="t1" />
<input type="button" id="b1" name="b1" value="添加" onclick="add()" /> <br /><br />
<select name="s1" id="s1" size="10" style="width:100px; margin-left:30px;" onclick="sel(this)">
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>淄博</option>
</select><br />
<input type="button" id="d1" name="d1" value="删除" style=" margin-left:30px;" onclick="del()"/>
<input type="button" id="d2" name="d2" value="清空" onclick="cl()"/> <br /><br />
<input type="text" id="t2" name="t2" />
<input type="button" id="u1" name="u1" value="修改" onclick="up()"/> <br />
</form>

JS代码:

var t1 = document.getElementById("t1");
var t2 = document.getElementById("t2");
function add()
{
var t = t1.value; //取出文本框中输入的值
var obj = document.createElement("option"); //创建一个标签元素
obj.innerHTML=t; //将文本框中的值赋到已创建的标签元素内
document.getElementById("s1").appendChild(obj); //将创建的标签作为一个子元素添加到id为s1的select列表中
t1.value="";
} var op;
function sel(rd)
{
op = rd.options[rd.selectedIndex]; //由传进来的this参数,来找出选中的option的下标,从而找到选中的那个option
var u = op.innerHTML; //选中的option中的内容放到u中
t2.value =u; //u的值赋给t2的value }
function del()
{
var s = document.getElementById("s1");
s.removeChild(op);
var t2=document.getElementById("t2");
t2.value ="";
}
function cl()
{
var s = document.getElementById("s1");
var n = s.options.length; //变量n等于子元素的个数,个数会随着删除变化,所以不能直接放在for里面
for(var i=0;i<n;i++)
{
s.removeChild(s.options[0]); //每次删除了之后第1个元素变为第0个,所以每次循环删0,就可以都删除
}
t1.value="";
t2.value="";
}
function up()
{
var v = t2.value; //将文本框2中的内容赋给变量v
op.innerHTML = v; //将v的值赋给选的中option
}

三:两个列表,可以添加数据,并且通过按钮在两个列表之间移动数据

效果图如下:

HTML代码:

<div style="float:left">
<select name="s1" id="s1" size="10" style="width:150px; margin-left:30px;" onclick="rightto(this)">
</select><br />
<input type="text" id="t1" name="t1" style="width:100px; margin-left:30px;" />
<input type="button" id="b1" name="b1" value="添加" onclick="add1()" />
</div>
<div style="float:left">
<input type="button" id="d1" name="d1" value=">>" style=" margin:15px 0px 0px 30px;" onclick="rightall()"/> <br />
<input type="button" id="d2" name="d2" value="->" style=" margin:15px 0px 0px 30px;" onclick="rightone()"/> <br />
<input type="button" id="d3" name="d3" value="<<" style=" margin:15px 0px 0px 30px;" onclick="leftall()"/> <br />
<input type="button" id="d4" name="d4" value="<-" style=" margin:15px 0px 0px 30px;" onclick="leftone()"/> <br />
</div>
<div style="float:left">
<select name="s2" id="s2" size="10" style="width:150px; margin-left:30px;" onclick="leftto(this)">
</select><br />
<input type="text" id="t2" name="t2" style="width:100px; margin-left:30px;" />
<input type="button" id="b2" name="b2" value="添加" onclick="add2()" />
</div>

JS代码:

var t1 = document.getElementById("t1");
var t2 = document.getElementById("t2");
var s1 = document.getElementById("s1");
var s2 = document.getElementById("s2");
var op1;
var op2;
function add1()
{
var t = t1.value; //取出文本框中输入的值
var obj = document.createElement("option"); //创建一个标签元素
obj.innerHTML=t; //将文本框中的值赋到已创建的标签元素内
document.getElementById("s1").appendChild(obj); //将创建的标签作为一个子元素添加到id为s1的select列表中
t1.value="";
}
function add2()
{
var t = t2.value;
var obj = document.createElement("option");
obj.innerHTML=t;
document.getElementById("s2").appendChild(obj);
t2.value="";
}
function rightall()
{
var n = s1.options.length;
for(var i=0;i<n;i++)
{
s2.appendChild(s1.options[0]);
}
}
function leftall()
{
var n = s2.options.length;
for(var i=0;i<n;i++)
{
s1.appendChild(s2.options[0]);
}
}
function rightto(r1)
{
op1 = r1.options[r1.selectedIndex];
}
function leftto(r2)
{
op2 = r2.options[r2.selectedIndex];
}
function rightone()
{
s2.appendChild(op1);
}
function leftone()
{
s1.appendChild(op2);
}

四:不算个例子,就是验证了一下checked的返回值,选中某一项的时候返回的值是个true,未选中的返回flase

效果图如下:

HTML代码:

<form>
<input id="in1" type="radio" name="in" />同意
<input id="in2" type="radio" name="in" checked="true" />不同意
</form>

JS代码:

var a = document.getElementById("in1");
var b = document.getElementById("in2");
alert(a.checked);
alert(b.checked);

五:日期时间的选择

效果图如下:

HTML代码:

<form id="f1" name="f1">
<select name="selYear" id="selYear" onchange="FillDay()"></select>年
<select name="selMonth" id="selMonth" onchange="FillDay()"></select>月
<select name="selDay" id="selDay"></select>日
</form>

JS代码:

var sYear = document.getElementById("selYear");
var sMonth = document.getElementById("selMonth");
var sDay = document.getElementById("selDay");
function FillYear()
{
//清空
sYear.innerHTML = "";
//添加
var d = new Date();
var year = d.getFullYear();
for(var i=year-10;i<=year+10;i++)
{
var op = document.createElement("option");
op.innerHTML = i;
op.value = i;
sYear.appendChild(op);
}
}
function FillMonth()
{
sMonth.innerHTML = "";
for(var i=1;i<=12;i++)
{
var op = document.createElement("option");
op.innerHTML = i;
op.value = i;
sMonth.appendChild(op);
}
}
function FillDay()
{
sDay.innerHTML = "";
var year = parseInt(sYear.value);
var month = parseInt(sMonth.value);
if(month == 1 || month == 3 || month==5 || month==7 || month==8 || month==10 || month == 12)
{
buildDayList(31);
}
else if(month == 4 || month == 6 || month == 9 || month == 11)
{
buildDayList(30);
}
else
{
if(year%400 == 0 || (year%4==0 && year%100!=0))
{
buildDayList(29);
}
else
{
buildDayList(28);
}
} }
function buildDayList(n) //n是每月的天数
{
for(var i=1;i<=n;i++)
{
var op = document.createElement("option");
op.innerHTML = i;
op.value = i;
sDay.appendChild(op);
}
}
FillYear();
FillMonth();
FillDay();

六:鼠标移动到背景上,背景向上拉开,显示出下面的图片,这个还没加入动态移除添加事件,有BUG,练习用

效果图如下:

CSS代码:

<style type="text/css">
#bg
{
background-image:url(images/1.jpg);
width:300px;
height:300px;
}
#hd
{
background-color:#666;
width:300px;
}
</style>

HTML代码:

<div id="bg" onmouseover="hdup()" onmouseout="hddown()" >
<div id="hd" style="height:300px;">
</div>
</div>

JS代码:

var d = document.getElementById("hd");
function hdup()
{
var h = parseInt(d.style.height);
if(h>=10)
{
h=h-10;
d.style.height= h+"px"; setTimeout(function(){hdup();},30);
} } function hddown()
{
var h = parseInt(d.style.height);
if(h<=290)
{
h=h+10;
d.style.height= h+"px"; setTimeout(function(){hddown();},30);
}
}

JS实例(一)的更多相关文章

  1. Vue.js实例练习

    最近学习Vue.js感觉跟不上节奏了,Vue.js用起来很方便. 主要实现功能,能添加书的内容和删除.(用的Bootstrap的样式)demo链接 标题用了自定义组件,代码如下: components ...

  2. JS实例

    JS实例 1.跑马灯 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  3. JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3

    技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...

  4. JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记2

    技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...

  5. JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记1

    技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] 第 3 章 用 JavaScri ...

  6. 【js实例】Array类型的9个数组方法,Date类型的41个日期方法,Function类型

    前文提要:[js实例]js中的5种基本数据类型和9种操作符 Array类型的9个数组方法 Array中有9个数组方法: 1.检测数组 2.转换方法 3.栈方法 4.队列方法 5.冲排序方法6.操作方法 ...

  7. [百度地图] 用于类似 DWZ UI 框架的 百度地图 功能封装类 [MultiZMap.js] 实例源码

    MultiZMap 功能说明 MultiZMap.js 本类方法功能大多使用 prototype 原型 实现,它是 ZMap 的多加载版本,主要用于类似 DWZ 这个 多标签的 UI 的框架: 包含的 ...

  8. 模拟jQuery中的ready方法及实现按需加载css,js实例代码

    这篇文章介绍了模拟jQuery中的ready方法及实现按需加载css,js实例代码,有需要的朋友可以参考一下     一.ready函数的实现经常用jQuery类库或其他类库中的ready方法,有时候 ...

  9. 百度地图整合功能分享修正版[ZMap.js] 实例源码!

    ZMap 功能说明 ZMap 是学习百度地图 api 接口,开发基本功能后整的一个脚本类,本类方法功能大多使用 prototype 原型 实现: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐标是 ...

  10. jquery.validate.js实例演示

    validate是前端重要的交互手段,提升性能的同时更能提升用户操作体验,validate的实现大概有三种方式:HTML5部分支 持,validate验证框架,手动写js或ajax调用接口.使用val ...

随机推荐

  1. Eclipse+Maven+Spring+CXF 构建webservice 服务

    一. 软件准备 Eclipse 4.2.1 Maven 2.2.1 Spring 3.2.6 CXF 3.0.2 二. 步骤 首先,在Eclipse中用maven构建一个quickstart版本的ma ...

  2. win10全系列官方MSDN原版系统安装密钥、版本区别、镜像下载地址与激活教程

    微软发布win10正式版已经过去几天了,相信很多同学都心情高涨的装上了期待已久的win10系统,但也有很多同学面对win10系统的众多版本感到一脸茫然,的确,微软在win10系统版本上的划分确实有点多 ...

  3. Automator 简单使用流程

    iOS开发中常常要用到图片缩放的工作,有些需求流程很奇葩,根本找不到现成的工具去实现. 这时候,你可以去想一想Automator了. 示例:要把文件夹下所有的图片文件都缩小成原来的一半(搞iOS开发的 ...

  4. codeforce

    A. Playing with Dice time limit per test 1 second memory limit per test 256 megabytes input standard ...

  5. linux下svn使用及查看杀掉进程

    ps –aux ubuntu下安装subversion客户端: sudo apt-get install subversion svn正在checkout时候无法退出操作,shift+ctrl+t新建 ...

  6. arcGis引入Dll报无法嵌入互操作类型错误解决方法

    arcGis引入Dll报“无法嵌入互操作类型"ESRI.ARCGIS.Geometry.PointClass".请改用通用接口."   解决方法:设置引用DLL的“嵌入互 ...

  7. JSP_DAO方式实现数据库查询(MyEclipse10,Tomcat7.0,JDK1.7,)——Java Web练习(四)

    1.项目结构: 2.创建数据库.表.插入记录 create database TestDao; use TestDao; create table student( stuid int, userna ...

  8. CodeForces - 269C Flawed Flow

    http://codeforces.com/problemset/problem/269/C 题目大意: 给定一个边没有定向的无法增广的残量网络且1是源点,n是汇点,给定每条边中的流.  让你把所有边 ...

  9. MINA2.0原理

    转自:http://blog.csdn.net/liuzhenwen/article/details/5894279 客户端通信过程  1.通过SocketConnector同服务器端建立连接  2. ...

  10. java之Comparator与Comparable

    转自:http://blog.csdn.net/zhangerqing 当需要排序的集合或数组不是单纯的数字型时,通常可以使用Comparator或Comparable,以简单的方式实现对象排序或自定 ...