js基础运用 day 10

最新推荐文章于 2024-07-20 11:30:56 发布
最新推荐文章于 2024-07-20 11:30:56 发布
阅读量199 收藏
点赞数
分类专栏： Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lx678111/article/details/81239517
版权

 

table.css

table{
	border: #249bdb 1px solid;
	width:500px;
	border-collapse:collapse;
}
table td{
	border: #249bdb 1px solid;
	padding: 5px;
}
table th{
	border: #249bdb 1px solid;
	padding: 5px;
	background-color:rgb(180,180,180);
}

 .one{
		 background-color:#ff80ff;
}
 .two{
		 background-color: #ffff80;
}
.over{
		 background-color: #fff;
		 /*font-size:20px; */
}

 

DOM--有关复选框组件的演示

<!DOCTYPE html>
<html>
    <head>
        <title>DOM--有关复选框组件的演示</title>
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
		
		<script type="text/javascript">
	    
		function getSum(){
			var sum=0;
			var collItemNodes = document.getElementsByName("item");
			for(var x=0;x<collItemNodes.length;x++){
				if(collItemNodes[x].checked){
					sum=sum+parseInt(collItemNodes[x].value);
				}
			}
			
			//alert(sum);
			
			//把金额数据显示到span中
			var spanid=document.getElementById("sumId");
			var strNum=sum+"元";
			spanid.innerHTML=strNum.fontcolor("red").bold();
			
		}
		
		function checkA11(allChkNode){
			 var collItemNodes=document.getElementsByName("item");
			 for(var x=0;x<collItemNodes.length;x++){
			 	 collItemNodes[x].checked=allChkNode.checked;
			 }
		}
		</script>
    </head>
    <body>
        <h3>复选框用法演示</h3>
        商品列表:
        <br/>
        <input type="checkbox" name="allItem" onclick="checkA11(this);"/>全选
        <br/>
        <input type="checkbox" name="item" value="200"/>风扇:200元
        <br/>
        <input type="checkbox" name="item" value="2000"/>电视:2000元
        <br/>
        <input type="checkbox" name="item" value="3000"/>电脑:3000元
        <br/>
        <input type="checkbox" name="item" value="1200"/>手机:1200元
        <br/>
        <input type="button" value="总金额是" onclick="getSum();"/><span id="sumId"></span>
   </body>
</html>

DOM--有关复选框组件的演示--邮件列表

<!DOCTYPE html>
<html>
    <head>
        <title>DOM--有关复选框组件的演示--邮件列表</title>
        <link rel="stylesheet" type="text/css" href="table.css" />
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="table.css" />
        <script type="text/javascript">
            
            function trColor(){
                //给表格的奇数行与偶数行分别设置不同的背景色---用样式来做，显示风格易扩展
                var oTableNode = document.getElementById("tbData");
                var collTrNodes = oTableNode.rows; //获得所有行集合
                //遍历所有行(除第一行的表头外)，分别设置类样式one,two
                for (var x = 1; x < collTrNodes.length; x++) {
                    if (x % 2 == 1) {
                        collTrNodes[x].className = "one";
                    }
                    else {
                        collTrNodes[x].className = "two";
                    }
                }
            }
            
            function trEvent(){
                //给表格的奇数行与偶数行分别设置不同的背景色---用样式来做，显示风格易扩展
                var oTableNode = document.getElementById("tbData");
                var collTrNodes = oTableNode.rows; //获得所有行集合
                //遍历所有行(除第一行的表头外)，分别设置类样式one,two
                for (var x = 1; x < collTrNodes.length; x++) {
                    var oldName;
                    collTrNodes[x].onmouseover = function(){
                        oldName = this.className;
                        this.className = "over";
                    };
                    collTrNodes[x].onmouseout = function(){
                        this.className = oldName;
                    };
                }
            }
            
            onload = function(){
                trColor(); //这种方式可以传参
                trEvent();
                mailChkEvent(); //给所有邮件复选框添加鼠标单击事件
            }
            
            function checkAll(node){
                var collChkMails = document.getElementsByName("mail");
                for (var x = 0; x < collChkMails.length; x++) {
                    collChkMails[x].checked = node.checked;
                }
                
                var collChkAlls = document.getElementsByName("all");
                for (var x = 0; x < collChkAlls.length; x++) {
                    if (collChkAlls[x] != node) {
                        collChkAlls[x].checked = node.checked;
                    }
                }
            }
            
            function mailChkEvent(){
                var collChkMails = document.getElementsByName("mail");
                for (var i = 0; i < collChkMails.length; i++) {
                    collChkMails[i].onclick = chkAllSet;
                }
            }
            
            //设置All复选框
            function chkAllSet(){
                //统计邮件复选框勾选的个数
                var n = 0;
                var collChkMails = document.getElementsByName("mail");
                for (var i = 0; i < collChkMails.length; i++) {
                    if (collChkMails[i].checked) {
                        n++;
                    }
                }
                //alert(n);
                
                var collChkAlls = document.getElementsByName("all");
                if (n == 0) {//全部取消
                    for (var i = 0; i < collChkAlls.length; i++) {
                        collChkAlls[i].checked = false;
                        collChkAlls[i].indeterminate = false;
                    }
                }
                else 
                    if (n == collChkMails.length) {//全选
                        for (var i = 0; i < collChkAlls.length; i++) {
                            collChkAlls[i].checked = true;
                            collChkAlls[i].indeterminate = false;
                        }
                    }
                    else {//部分选
                        for (var i = 0; i < collChkAlls.length; i++) {
                            collChkAlls[i].indeterminate = true;
                        }
                    }
                
                
            }
            
            //按钮勾选的功能
            function checkAllByBtn(num){
                var collcheckMails = document.getElementsByName("mail");
                for (var i = 0; i < collcheckMails.length; i++) {
                    if (num > 1) {//反选
                        collcheckMails[i].checked = !collcheckMails[i].checked;
                    }
                    else {//全选 或 全取消
                        collcheckMails[i].checked = num;
                    }
                }
                
                chkAllSet();
            }
            
			//删除勾选的邮件
            function delMails(){
               //防护一下
				if( !confirm("你真的要删除所选邮件吗?") ){
					return;
				}
				
				var collChkMails = document.getElementsByName("mail");
				//从前往后删除时i要回退
				/*for (var i = 0; i < collChkMails.length; i++) {
					if (collChkMails[i].checked) {
						//用while往上查找当前复选框所在的<tr>对象
						var oTrNode = collChkMails[i];
						while (oTrNode.nodeName != "TR") {
							oTrNode = oTrNode.parentNode;
						}
						//删除oTrNode --找父亲删儿子
						oTrNode.parentNode.removeChild(oTrNode);
					    i--;//※小心※因为表格在动态变化，所在i要回退一下。
					}
					
				}*/
				
				//倒着删，不用回退
				for (var i = collChkMails.length - 1; i >= 0; i--) {
					if (collChkMails[i].checked) {
						//用while往上查找当前复选框所在的<tr>对象
						var oTrNode = collChkMails[i];
						while (oTrNode.nodeName != "TR") {
							oTrNode = oTrNode.parentNode;
						}
						//删除oTrNode --找父亲删儿子
						oTrNode.parentNode.removeChild(oTrNode);
					}
				}
            }
        </script>
    </head>
    <body>
        <h3>复选框用法演示--邮件列表</h3>
        <table id="tbData">
            <tr>
                <th><input type="checkbox" name="all" onclick="checkAll(this);">全选</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>地址</th>
            </tr>
            <tr>
                <td><input type="checkbox" name="mail"></td>
                <td>张三</td>
                <td>22</td>
                <td>湖南</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="mail"></td>
                <td>李四</td>
                <td>12</td>
                <td>江西</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="mail"></td>
                <td>Jack</td>
                <td>6</td>
                <td>福建</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="mail"></td>
                <td>Rose</td>
                <td>32</td>
                <td>湘江</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="mail">
                </td>
                <td>
                    Tom
                </td>
                <td>
                    23
                </td>
                <td>
                    浙江
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="mail">
                </td>
                <td>
                    Mike
                </td>
                <td>
                    22
                </td>
                <td>
                    江苏
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="mail">
                </td>
                <td>
                    刘备
                </td>
                <td>
                    18
                </td>
                <td>
                    潜江
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="all" onclick="checkAll(this);">全选
                </td>
                <td colspan="3">
                    <input type="button" value="全选" onclick="checkAllByBtn(1);"><input type="button" value="清空" onclick="checkAllByBtn(0);"><input type="button" value="反选" onclick="checkAllByBtn(2);"><input type="button" value="删除" onclick="delMails();">
                </td>
            </tr>
        </table>
    </body>
</html>

DOM--有关单选按钮的演示

<!DOCTYPE html>
<html>
  <head>
    <title>DOM--有关单选按钮的演示</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
   <script type="text/javascript">
   	
	function showContent(oRadioNode){
				var oDivNode = document.getElementById("contentid");
				/*
				if(oRadioNode.value=='yes'){
					oDivNode.style.display="block";
				}else{
					oDivNode.style.display="none";
				}
				*/
				//用with语法简化一下上面那段代码
				with(oDivNode.style){
					if(oRadioNode.value=='yes'){
					    display="block";
					}else{
						display="none";
					}
				}
			}
   
   </script>

  </head>
  
  <body>
    <h3>单选按钮组件用法演示</h3>
		<fieldset style="width:200px;">
		    <legend>您要参与问卷调查吗?</legend>
		  <input type="radio" name="wenjuan" value="yes" onclick="showContent(this);">是
		  <input type="radio" name="wenjuan" value="no" checked="checked" onclick="showContent(this);">否
		</fieldset>
		
		<div id="contentid" style="display:none;background:red;width:300px;">
			问卷调查内容:<br/>
			您的姓名:<input type="text" name="name"><br/>
			您的电话:<input type="text" name="tel"><br/>
		</div>
  </body>
</html>

 

版本2

<!DOCTYPE html>
<html>
  <head>
  <title>DOM--有关单选按钮的演示</title>
		
		<style type="text/css">
		  ul{
		    list-style: none;
		    margin:0px;
		    padding:5px;
		  }
		  
		  .close{
		     display: none;
		  }
		  .open{
		     display: block;
		  }
		</style>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
   <script type="text/javascript">
   	 function showResult(){
	 	//获取所有的单选框组件
		var collNo1RdNodes=document.getElementsByName("no1");
		       var val;
				var flag=false;
				for( x in collNo1RdNodes){
					if(collNo1RdNodes[x].checked){
						/*虽然js也有try-catch捕捉异常。但这里不用，因为js的parseInt()不会抛出异常，如果解析出错返回的是"NaN"值
						try{
						  parseInt(collNo1RdNodes[x].value)
							
						}catch(e){
							alert(e);
						}
						*/
						flag=true;
						 val = parseInt(collNo1RdNodes[x].value);
						 break;
					}
				}
				if(flag){ //false
					document.getElementById("erroInfo").innerHTML="没有任何答案被选中".fontcolor("red");
					return;
				}
				
				document.getElementById("erroInfo").innerHTML="";
				
				if(val>=1 && val<=3){
					document.getElementById("res1").style.display="block";
					document.getElementById("res2").style.display="none";
				}else{
					document.getElementById("res2").style.display="block";
					document.getElementById("res1").style.display="none";
				}	
	 } 
   </script>

  </head>
  
  <body>
    <h2>性格测试</h2>
	   <h3>第一题:</h3> <span>您最喜欢的水果是什么?</span>
	   <ul>
	     <li><input type="radio" name="no1" value="1">葡萄</li>
	     <li><input type="radio" name="no1" value="2">桃子</li>
	     <li><input type="radio" name="no1" value="3">西瓜</li>
	     <li><input type="radio" name="no1" value="4">火龙果</li>
	     <li><input type="radio" name="no1" value="5">椰子</li>
	   </ul>
	   
	   <input type="button" value="查看测试结果" onclick="showResult();" />
	   <span id="erroInfo"></span>
	   
	   <div id="res1" class="close">
	      1-3分: 您的性格内向，建议.....
	   </div>
	   <div id="res2" class="close">
	      4分以上: 您的性格外向，建议.....
	   </div>
  </body>
</html>

 

 

木木木是我
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jsColor颜色选择器控件
04-28
利用js颜色选择的控件,和photoshop类似的调色板,简单好用,有两种模式可以选择,内容包含源码和附带demo
Day10:JS和HTML基础
03-18
在学习“Day10: JS和HTML基础”时，你需要掌握以下几个关键知识点： 1. **HTML（HyperText Markup Language）**：HTML是网页内容的结构语言，它定义了网页的布局和元素。例如，`<html>`标签表示整个文档，`<head>`...
js基础运用 day1
三木的博客
07-26 191
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; ch
js基础运用 day 7
三木的博客
07-27 191
BOM--用定时器做个小玩意 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;BOM--用定时器做个小玩意&lt;/title&gt; &lt;meta http-equiv="keywords" content="keyword1,keyword2,keyword3&quo
js基础运用 day2
三木的博客
07-26 165
1.Java中switch语句只能用于选择byte、int等整数类型,char类型和jdk7新增的String类型。而js支持所有类型  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt; &lt;hea...
js基础运用 day3
三木的博客
07-27 155
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html;
js基础运用 day4
三木的博客
07-27 122
tool.js 通过prototype属性拓展js API的对象的功能 添加trim方法、reverse方法、toCharArray方法、以及为其shift()、unshift()方法弄个别名，还有写一个println()函数。 function print(str){ document.write(str); } function println(str){ document.wr...
js基础运用 day 8
三木的博客
07-27 206
DOM--节点的增删改查CRUD &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;DOM--节点的增删改查CRUD&lt;/title&gt; &lt;meta http-equiv="keywords" content="keyword1,keyword2,keyword3
js基础运用 day 11
三木的博客
07-28 157
DOM——有关组合框组件——下拉菜单select用法演示 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type&quo
js基础运用 day 9
三木的博客
07-27 180
  DOM--有关表格的演示   table.css table{ border: #249bdb 1px solid; width:500px; border-collapse:collapse; } table td{ border: #249bdb 1px solid; padding: 5px; } table th{ border: #249bdb 1px soli...
Day08:JS和HTML基础
03-16
总结起来，Day08的学习涵盖了HTML的基础结构、JavaScript的核心概念、DOM操作、事件处理以及异步请求等关键知识点。通过掌握这些，你将具备构建动态Web应用的基础能力。在实践中不断练习，你将更深入地理解和运用...
Day10
03-18
在JavaScript编程语言的学习中，"Day10"可能是一个教学日程或专题的标识，意味着这一天将深入探讨一些特定的JavaScript概念。JavaScript是一种广泛应用于Web开发的动态编程语言，主要负责网页的交互性和动态功能。它...
javascript-30:Day 30天香草JS挑战
03-12
《JavaScript30：Day 30 天香草JS挑战》是知名Web开发者Wes Bos发起的一项编程训练计划，旨在帮助开发者在30天内通过实践掌握JavaScript的基础和高级技能，不依赖任何库或框架，纯JavaScript编程，也就是所谓的...
JavaScript 基础知识 Day03(语句)
最新发布
qq_73990369的博客
07-20 909
本章总结学习了，if、if-else、for、switch、while、do-while 等语句，介绍了其使用方法，并通过几个例题，演示了for循环、if语句的灵活运用，以及其他语句的用法。今天就到这啦~~~~~~
js中的for...in语法
热门推荐
三木的博客
07-27 3万+
for...in语句: 用于遍历对象属性。   用for...in遍历"数组": 循环变量x是数组的下标  ///////用for...in遍历"数组": 循环变量x是数组的下标 ////////// var arr=[22,33,44,55,66]; for(x in arr){ //Java中的x是数组元素，而js中的x是数组下标 //document.write(x+"&...
JSON技术
三木的博客
07-27 266
  给一个JS对象添加/修改成员（属性或方法）一般有两种方法： 第一种是利用prototype：“对象.prototype.属性名/函数名＝xxx”，更改的是对象的原型，所有对象都会被更改。 第二是：“对象.属性名/函数名＝xxx.”，更改的是对象本身，只是此时的当前对象被更改。   JSON 全称；JavaScript Object  Notation 方法一、描述对象：类似面向过程...
js基础运用 day 5——js中的Date、Math、Global对象
三木的博客
07-27 206
  tool.js function print(str){ document.write(str); } function println(str){ document.write(str+"&lt;br/&gt;"); } ///////通过prototype属性扩展js API的对象的功能///////// //※把trim方法融入到String对象中: str.trim()...
js基础运用 day 6 ——BOM--浏览器对象模型、DOM--文档对象模型
三木的博客
07-27 178
BOM:把浏览器窗口封装成对象模型，供js进行访问。最重要的一个对象是:window &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;BOM--浏览器对象模型&lt;/title&gt; &lt;meta http-equiv="keywords" content="keyw
"JS-Day01培训回顾核心内容、WEB技术与AJAX应用
本次培训的内容将围绕JavaScript（以下简称JS）展开。JS是一种基于对象的解释性编程语言，它具有一些现成的对象供程序员使用，如Array、Math、String等，同时也支持按一定规则创建自定义对象。JS是事件驱动的，代码...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值