1.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>创建表格</title>
<!-- 定义一些样式,将来给表格用 -->
<style type="text/css">
table{
border:#0099FF 1px solid;
width:600px;
border-collapse:collapse;
}
table td{
border:#0099FF 1px solid;
padding:10px 20px 3px 1px;
}
</style>
<script type="text/javaScript">
function createTable(){
/*
var tabEle = document.createElement("table");//<table></table>
var tr = document.createElement("tr");//<tr></tr>
var td1 = document.createElement("td");//<td></td>
var td2 = document.createElement("td");//<td></td>
var text1 = document.createTextNode("1行1列");
var text2 = document.createTextNode("1行2列");
td1.appendChild(text1);
td2.appendChild(text2);
tr.appendChild(td1);
tr.appendChild(td2);
tabEle.appendChild(tr);
var div_id = document.getElementById("div_id");
div_id.appendChild(tabEle);
*/
var div_id = document.getElementById("div_id");
div_id.innerHTML = "<table>"
+"<tr>"
+"<td>one</td>"
+"<td>two</td>"
+"</tr>"
+"</table>";
}
function createTable2(){
var tabEle = document.createElement("table");//<table></table>
for(var i=1;i<=5;i++){
var tr = document.createElement("tr");//<tr></tr>
for(var j=1;j<=6;j++){
var td = document.createElement("td");//<td></td>
td.innerText=i+"行"+j+"列";
tr.appendChild(td);
}
tabEle.appendChild(tr);
}
var div_id = document.getElementById("div_id");
div_id.appendChild(tabEle);
}
function createTable3(){
var row = document.getElementById("row").value;
var col = document.getElementById("col").value;
var tabEle = document.createElement("table");//<table></table>
for(var i=1;i<=row;i++){
var tr = document.createElement("tr");//<tr></tr>
for(var j=1;j<=col;j++){
var td = document.createElement("td");//<td></td>
td.innerText=i+"行"+j+"列";
tr.appendChild(td);
}
tabEle.appendChild(tr);
}
var div_id = document.getElementById("div_id");
div_id.appendChild(tabEle);
}
</script>
</head>
<body>
<div id="div_id">
</div>
<input type="button" value="创建表格" οnclick="createTable()" /><br />
<input type="button" value="创建表格(5行6列)" οnclick="createTable2()" /><br />
行数:<input type="text" name="row" id="row"/><br />
列数:<input type="text" name="col" id="col"/><br />
<input type="button" name="createButton" value="创建表格(行列用户输入)" οnclick="createTable3()" />
</body>
</html>
2.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>单选按钮</title>
<style type="text/css">
#result1{
display : none;
}
#result2{
display : none;
}
#result3{
display : none;
}
#result4{
display : none;
}
</style>
<script type="text/javaScript">
function show(tag){
//1.先将所有的div隐藏
for(var i = 1;i<=4;i++){
var div = document.getElementById("result"+i);
div.style.display = "none";
}
//2.将所选的显示出来
var v = tag.value;
var div = document.getElementById("result"+v);
div.style.display = "block";
}
</script>
</head>
<body>
<div>
<h3>测试你的性格:</h3>
<div>请选择下列一种水果:</div>
<input type="radio" name="fruit" value="1" οnclick="show(this)" />苹果<br />
<input type="radio" name="fruit" value="2" οnclick="show(this)"/>西瓜<br />
<input type="radio" name="fruit" value="3" οnclick="show(this)"/>葡萄<br />
<input type="radio" name="fruit" value="4" οnclick="show(this)"/>芒果<br />
<div id="result1">
您的性格,很羞涩.
</div>
<div id="result2">
您的性格,很开朗.
</div>
<div id="result3">
您的性格,很内向.
</div>
<div id="result4">
您的性格,很醇香.
</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>全选反选问题</title>
<script>
function getSum(){
//1.获取所有被选中的checkbox,循环遍历,获取value累加
var money = 0;
var items = document.getElementsByName("item");
for(var i = 0;i<items.length;i++){
//如果被选中,则加上钱
if(items[i].checked){
money = parseInt(items[i].value)+money;
}
}
//2.写入span中
document.getElementById("sumId").innerHTML = money+"元";
}
function checkAll(all){
//1.获取所有的item
var items = document.getElementsByName("item");
//2.把所有item的选中状态设置的和全选一样
for(var i= 0;i<items.length;i++){
items[i].checked = all.checked;
}
}
function check(){
//1.获取所有的item
var items = document.getElementsByName("item");
//2.遍历,拿到每个item ,将他的checked属性取反
for(var i= 0;i<items.length;i++){
items[i].checked = !items[i].checked;
}
}
/*
扩展部分:全选按钮的进一步设置
*/
window.onload = function(){
var items = document.getElementsByName("item");
for(var i= 0;i<items.length;i++){
items[i].onclick = function(){
var ac = document.getElementById("allC");
//1.如果是不选,全选按钮就不选
if(!this.checked){
ac.checked = false;
}else{
//2.如果是选,则检查是否都选上了,如果都选上了,则全选要选上
var isAllChoose = true;
var items = document.getElementsByName("item");
for(var i = 0 ;i<items.length;i++){
if(!items[i].checked){
isAllChoose = false;
break;
}
}
ac.checked = isAllChoose;
}
}
}
}
</script>
</head>
<body>
<div>商品列表</div>
<input type="checkbox" name="item" value="3000" />笔记本3000元<br />
<input type="checkbox" name="item" value="2500"/>HTC手机2500<br />
<input type="checkbox" name="item" value="8000" />苹果电脑8000<br />
<input type="checkbox" name="item" value="1500" />IPAD1500<br />
<input type="checkbox" name="item" value="400" />玩具汽车400<br />
<input type="checkbox" id="allC" name="all" οnclick="checkAll(this)"/>全选<br />
<input type="checkbox" name="all" οnclick="check()"/>反选<br />
<input type="button" value="总金额" οnclick="getSum()" />
<span id="sumId"></span>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>下拉框</title>
<script>
function getCountry(){
/*
var sel = document.getElementsByName("country")[0];
alert(sel.value)
var sel = document.getElementsByName("country")[0];
for(var i = 0;i<sel.options.length;i++){
if(sel.options[i].selected == true){
alert(sel.options[i].value)
}
}
*/
}
/*
select中opstions是所有选项组成集合,通过增删改这个集合可以改变select 的选项卡
*/
function addOne(){
var sel = document.getElementsByName("country")[0];
var op = document.createElement("option");
op.innerHTML="法国";
op.value="法国";
var ops = sel.options;
var temp =ops[3];
ops[3]=op;
ops[4]=temp;
//[none,中,美,法,日]
}
</script>
</head>
<body>
<select name="country" οnchange="getCountry()">
<option value="none">--选择国家--</option>
<option value="中国">中国</option>
<option value="美国">美国</option>
<option value="日本">日本</option>
</select>
<input type="button" value="加一个" οnclick="addOne()"/>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二级联动菜单</title>
<style>
</style>
<script>
function selectCity(){
var citys = {
北京市:["海淀区","朝阳区","丰台区"],
河北省:["石家庄","唐山","秦皇岛"],
辽宁省:["沈阳","大连","鞍山"],
山东省:["青岛","济南","烟台"]
}
//1.获取所选的省份
var prov = document.getElementById("province").value;
var city = document.getElementById("city");
//2.查询这个省份下的地区信息
var cs = citys[prov];
//--先清空历史的
city.options.length = 1;
if(cs!=null){
//3.将地区信息组织成option,插入到地区select中
for(var i=0;i<cs.length;i++){
//再将当前省份的内容插入
var op = document.createElement("option");
op.innerText = cs[i];
city.appendChild(op);
}
}
}
</script>
</head>
<!--
var citys = {
北京市:["海淀区","朝阳区","丰台区"],
河北省:["石家庄","唐山","秦皇岛"],
辽宁省:["沈阳","大连","鞍山"],
山东省:["青岛","济南","烟台"]
}
-->
<body>
<select id="province" οnchange="selectCity()">
<option>--选择省市--</option>
<option>北京市</option>
<option>河北省</option>
<option>辽宁省</option>
<option>山东省</option>
</select>
<select id="city">
<option>--选择城市--</option>
</select>
</body>
</html>
<html>
<head>
<title></title>
<style type="text/css">
body{
background:#f0f0f0;
margin:2px;
padding:4px;
font-size:16px;
}
.main{
background:#e0e0e0;
margin:2px 200px auto 200px;
padding:4px;
}
span{
font-size:12px;
color:red;
padding-left:12px;
}
</style>
<script type="text/javaScript">
/*非空校验*/
function checkNull(){
/*var un=document.getElementsByName("username")[0];
if(un.value==""){
alert("用户名不能为空！");
}*/
var nflag=true;
//1.用户名非空校验
nflag=setNull("username","用户名不能为空！")&&nflag;
//2.密码非空校验
nflag=setNull("password1","密码不能为空！")&&nflag;
//3.确认密码非空校验
nflag=setNull("password2","确认密码不能为空！")&&nflag;
//9.密码不一致校验
nflag=checkEquals()&&nflag;
//3.邮箱校验
nflag=checkEmail()&&nflag;
//4.校验爱好是否为空
nflag=setLikeNull()&&nflag;
//5.校验所在地是否为空
nflag=checkCityNull()&&nflag;
//6.校验客户类型是否为空
nflag=checkTypeNull()&&nflag;
//7.校验客户类型是否为空
nflag=checkTextNull()&&nflag;
return nflag;
}
/*邮箱校验*/
function checkEmail(){
//setNull("email","");
//获取邮箱对象
var email=document.getElementById("email");
var emailm=document.getElementById("email_m");
var eflag=setNull("email","邮箱不能为空！");
//创建正则表达式 /^\w+@\w+(\.\w+)+$/
//alert(email.value.match(/^\w+@\w+(\.\w+)+$/));
if(eflag&&!/^\w+@\w+(\.\w+)+$/.test(email.value)){
emailm.innerText="邮箱格式不匹配";
eflag=false;
}
return eflag;
}
function reCheckEmail(){
checkEmail();
}
/*密码不一致校验*/
function checkEquals(){
//获取到两次的密码项对象
var pwd1=document.getElementsByName("password1")[0];
var pwd2=document.getElementsByName("password2")[0];
var pwdm=document.getElementById("password2_m");
//alert(pwd1.value==pwd2.value);
if(pwd1.value!=""&&pwd2.value!=""&&pwd1.value!=pwd2.value){
//alert(pwd1.value==pwd2.value);
pwdm.innerText="密码不一致";
return false;
}else{
//pwdm.innerText="";
return true;
}
}
/*文本域内容非空校验*/
function checkTextNull(){
//获取文本域所在标签对象
var tao=document.getElementsByName("description")[0];
if(tao.value==tao.defaultValue){
alert("请输入描述信息");
return false;
}
return true;
}
/*客户类型非空校验*/
function checkTypeNull(){
//获取客户类型所在标签对象
var cusType=document.getElementsByName("type")[0];
var tym=document.getElementById("ty_m");
if(cusType.value=="----"){
//alert("请选择客户类型");
tym.innerText="**请选择客户类型**";
return false;
}else{
tym.innerText="";
return true;
}
}
/*省市内容非空校验*/
function checkCityNull(){
//获取城市标签对象
var city=document.getElementsByName("city")[0];
var citym=document.getElementById("pc_m");
if(city.options.length==1){
//alert("请选择所在省份");
citym.innerText="**请选择所在省份**";
return false;
}else{
citym.innerText="";
if(city.value=="-选择城市-"){
//alert("请选择所在城市");
citym.innerText="**请选择所在城市**";
return false;
}else{
citym.innerText="";
return true;
}
}
}
window.οnlοad=function(){
/*文本域初始内容的移入移除切换*/
//获取文本域所在标签对象
var tao=document.getElementsByName("description")[0];
tao.οnclick=function(){
if(tao.value==tao.defaultValue){
tao.value="";
}
}
tao.οnblur=function(){
if(tao.value==""){
tao.value=tao.defaultValue;
}
}
/*省市二级联动菜单效果实现*/
//定义一个省市关联数组
var citys={
北京市:["朝阳区","海淀区","东城区","西城区"],
河南省:["郑州市","洛阳市","平顶山市","信阳市"],
湖北省:["武汉市","荆州市","十堰市","黄岗市"],
浙江省:["杭州市","宁波市"]
}
//获取省份标签对象
var prov=document.getElementsByName("province")[0];
//获取下拉项的集合
var provs=prov.options;
//获取到城市标签对象
var city=document.getElementsByName("city")[0];
for(var i=0;i<provs.length;i++){
provs[i].οnclick=function(){
city.options.length=1;
if(this.value!="-选择省市-"){
var cys=citys[this.value];
for(var j=0;j<cys.length;j++){
var cy=document.createElement("option");
cy.innerText=cys[j];
city.appendChild(cy);
}
}
}
}
}
//爱好非空校验
function setLikeNull(){
var uns=document.getElementsByName("like");
var unsm=document.getElementById("like_m");
var lflag=false;
for(var i=0;i<uns.length;i++){
if(uns[i].checked){
lflag = true;
break;
}
}
if(!lflag){
//alert("爱好不能为空！");
unsm.innerText="*爱好不能为空！";
return lflag;
}else{
unsm.innerText="";
return lflag;
}
}
/*设置非空(弹窗)文本提示消息*/
function setNull(name,msg){
var un=document.getElementsByName(name)[0];
var unm=document.getElementById(name+"_m");
if(un.value==""){
//alert(msg);
unm.innerText="**"+msg+"**";
return false;
}else{
unm.innerText="";
}
return true;
}
/*校验表单,提交*/
function onSub(){
if(checkNull()){
//获取表单对象
var fm=document.getElementsByTagName("form")[0];
fm.submit();
}
}
/*制空表单*/
function onReset(){
//获取表单对象
var fm=document.getElementsByTagName("form")[0];
fm.reset();
}
/*复选框点击时触发*/
function reLike(){
setLikeNull();
}
/*下拉框点击时触发*/
function reCheck(){
checkCityNull();
}
function reCheckType(){
checkTypeNull();
}
/*输入框失去焦点时触发*/
function lostF(obj){
if(obj.name=="password2"&&obj.value!=""){
if(checkEquals()){
//alert(obj.hasChildNodes());//.innerText="";
var sid=document.getElementById("password2_m");
sid.innerText="";
}
}else{
setNull(obj.name,"内容不能为空");
}
}
</script>
</head>
<body>
<!-- 创建一个表单
用户名、密码、确认密码、性别、爱好、客户类型、描述信息、自定义提交，重置按钮
-->
<div class="main">
<form action="success.html" method="post">
<table border="1px" bgColor="#cfcfcf" align="center" cellspacing="5px" cellpadding="7px">
<caption><font color="blue" size="+3">校验表单</font></caption>
<tr>
<td>用户名：</td>
<td><input type="text" name="username" οnblur="lostF(this)"/><span id="username_m"></span></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="password1" οnblur="lostF(this)"/><span id="password1_m"></span></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" name="password2" οnblur="lostF(this)"/><span id="password2_m"></span></td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="gender" checked="checked" value="男"/>男
<input type="radio" name="gender" value="女"/>女
</td>
</tr>
<tr>
<td>爱好：</td>
<td>
<input type="checkbox" name="like" value="zq" οnclick="reLike()"/>足球
<input type="checkbox" name="like" value="lq" οnclick="reLike()"/>篮球
<input type="checkbox" name="like" value="ppq" οnclick="reLike()"/>兵乓球
<input type="checkbox" name="like" value="wq" οnclick="reLike()"/>网球
<input type="checkbox" name="like" value="pq" οnclick="reLike()"/>排球
<span id="like_m"></span>
</td>
</tr>
<tr>
<td>邮箱：</td>
<td><input id="email" type="text" name="email" οnblur="reCheckEmail()"/><span id="email_m"></span></td>
</tr>
<tr>
<td>所在省市：</td>
<td>
<select name="province" οnclick="reCheck()">
<option selected="selected">-选择省市-</option>
<option>北京市</option>
<option>河南省</option>
<option>湖北省</option>
<option>浙江省</option>
</select>
<select name="city" οnclick="reCheck()">
<option selected="selected">-选择城市-</option>
</select>
<span id="pc_m"></span>
</td>
</tr>
<tr>
<td>客户类型：</td>
<td>
<select name="type" οnclick="reCheckType()">
<option selected="selected">----</option>
<option>钻石客户</option>
<option>白金客户</option>
<option>VIP客户</option>
<option>普通客户</option>
</select>
<span id="ty_m"></span>
</td>
</tr>
<tr>
<td>描述信息：</td>
<td>
<textArea name="description" rows="8" cols="60">请输入描述信息....</textArea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" id="onsubmit" value="提交" οnclick="onSub()"/>
<input type="button" id="onreset" value="重置" οnclick="onReset()"/>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
扫一扫
209
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
