JS部分实例

APibBom
116 阅读1分钟

JS的部分实例

动态添加、删除下拉菜单列表

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>动态添加、删除下拉菜单选项</title>
</head>

<body>
	<form name="formSelectAddremove" method="get">
	<table>
		<caption></caption>
		<tr>
		<th rowspan="1" colspan="1"></th>
			<td rowspan="1" colspan="3">
			<fieldset><!-- fieldset 元素可将表单内的相关元素分组。

<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。<fieldset> 标签没有必需的或唯一的属性 -->
				<legend>添加选项</legend><!--为fieldset元素定义标题-->
				<table>
				<tr>
					<th rowspan="1" colspan="1">Value:</th>
					<td rowspan="1" colspan="1">
					<input type="text" class="input-sel" name="optValue" id="id-optValue"/>
					</td>
				  </tr>
					<tr>
					<th rowspan="1" colspan="1">Text:</th>
						<td rowspan="1" colspan="1">
						<input type="text" class="input-sel" name="optText" id="id-optText"/><!-- clss规定类名 -->
						</td>
					</tr>
					<tr>
					<th></th>
						<td rowspan="1" colspan="1">
						<input type="button" id="id-input-add-opt" value="添加选项" onClick="on_add_opt_click(this.id)"/>
						</td>
					</tr>
				
			  </table>
			  </fieldset>
			</td>
		</tr>
		<tr>
		<th rowspan="1" colspan="1">Hobby:</th>
			<td rowspan="1" colspan="1">
			<select name="selHobby" id="id-selHobby">
				<option value="">请选择...</option>
				<option value="sport">Sport</option>
				<option value="dance">Dance</option>
				<option value="reading">Reading</option>
				
				</select>
			</td>
			<th></th>
			<td rowspan="1" colspan="1">
			<input type="button" id="id-input-remove-opt" value="删除选项" onclick="on_remove_opt_click(this.id)"/> 
			</td>
		
		</tr>
		</table>
	
	</form>
</body>
	<script type="text/javascript">
	function on_remove_opt_click(thisid){
		var selHobby=document.getElementById("id-selHobby");
		selHobby.remove(selHobby.selectedIndex);//当一个选项被选择后，selectedIndex会变成该选项的索引号,remove()删除
		
		
	}
		function on_add_opt_click(thisid){
			var selHobby=document.getElementById("id-selHobby");
			var option =document.createElement("option");//createElement创建元素，此处是创建了一个option下拉选项元素
			option.value=document.getElementById("id-optValue").value;
			option.text=document.getElementById("id-optText").value;
			selHobby.add(option);//add添加元素
		}
	
	</script>
	
	
	
	
</html>

复选框全选、取消及判断是否选中的办法

<body>
	<form name="cormTraverse" method="get">
		<p>Hobby:<br>
	<input type="checkbox" name="hobby" value="sport">Sport<br>
	<input type="checkbox" name="hobby" value="play">play<br>
		<input type="checkbox" name="hobby" value="reading">reading<br>
		<input type="checkbox" name="hobby" value="tour">tour<br>
		<input type="checkbox" name="hobby" value="movie">movie<br>
		<input type="checkbox" name="hobby" value="dance">dance<br>
			</p>
		<input type="button" onClick="on_checkbox_all()" value="全部选择">
		<input type="button" onClick="on_checkbox_none()" value="全部取消">
		<input type="button" onClick="on_checkbox_sel()" value="部分选择">
		<input type="button" onClick="on_checkbox_checked()" value="判断是否被选中">
		
			   
		
	
	</form>
</body>
	<script type="text/javascript">
	function on_checkbox_all(){
		var all_checkbox=document.getElementsByName("hobby");
		for(var i in all_checkbox)
			{
				all_checkbox[i].checked=true;
				
			}
		
	}//编写全部选择的方法
		function on_checkbox_none(){
			var none_checkbox=document.getElementsByName("hobby");
			for(var i in none_checkbox)
				{
					none_checkbox[i].checked=false;
				}
			
		}//编写全部取消的方法
		function on_checkbox_sel(){
			var sel_checkbox=document.getElementsByName("hobby");
			var bcheck=[true,false,true,false,true];
			for(var i in sel_checkbox){
				sel_checkbox[i].checked=bcheck[i];
			}
		}//编写部分选择的方法
		function on_checkbox_checked(){
			var checked2=document.getElementsByName("hobby");
			for(var i=0;i<checked2.length;i++)
				{
					if(checked2[i].checked==true){
						console.log(checked2[i].value+" is checked");
					}
					else{
						console.log(checked2[i].value+" is not checked");
					}
					
				}
			
		}//编写判断是否选中方法
	
	</script>

如何使用隐藏控件

<body>
	<form name="formHidden" method="get" action="ch02-js-hidden-ele.php">
	<table>
		<caption>乘客铺铺位分配</caption><!-- 定义标题 -->
		<tr>
		<th>姓名:</th><!-- th表示头部，tr表示行，td表示单元格 -->
			<td><input type="text" name="name" id="id-name"></td>
		</tr>
		<tr>
		<th>出生年月:</th>
			<td><input type="month" name="birth" id="id-birth"
					    onchange="on_birth_change(this.id)"/>
			<input type="hidden" name="hidden-level" id="id-hidden-level" value=""/>		   
			</td>
			
			
		</tr>
		<tr>
		<th></th>
			<td><input type="submit" id="id-submit" value="提交"></td>
		</tr>
		</table>
	
	</form>
</body>
	<script type="text/javascript">
	function on_birth_change(thisid){
		var level=3;
		var birth =document.getElementById(thisid).value;
		var arrBirth=birth.split("-");
		var birthYear=arrBirth[0];
		var birthMonth=arrBirth[1];//定义2个变量用于存储年和月
		var now=new Date();
		var nowYear=now.getFullYear();
		var nowMonth=now.getMonth();//获取当前的年和月
		if((nowYear-birthYear)>60){
			level=1;
		}
		else if((nowYear-birthYear)==60){
			if(nowMonth>=birthMonth)
				level=1;
			else
				level=2;
		}
		else if((nowYear-birthYear)==45)
			{
				if(nowMonth>=birthMonth)
					level=2;
				else
					level=3;
			}else
				level=3;
		
	
		document.getElementById("id-hidden-level").value=level;
	}

猜数字小游戏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>猜数字</title>
</head>
<body>
<h1>猜数字游戏</h1>
<p>请输入1~100之间的自然数：</p>
<input type="text" class="userNumber">
<button class="checkNumber">确定</button>
<!--用户所猜的数字-->
<p class="guess"></p>
<!--告诉用户是否猜正确-->
<p class="lastResult"></p>
<!--判断数字高了还是低了-->
<p class="judge"></p>
<script>
    // 定义一个随机数   范围1~100
    var randomNumber = Math.floor(Math.random()*100+1);
    console.log(randomNumber);
    // 获取元素
    var userNumber = document.getElementsByClassName("userNumber")[0];
    var checkNumber = document.getElementsByClassName("checkNumber")[0];
    var guess = document.getElementsByClassName("guess")[0];
    var lastResult = document.getElementsByClassName("lastResult")[0];
    var judge = document.getElementsByClassName("judge")[0];
    // 定义猜的次数
    var guessCount = 1;
    // 判断数字的函数
    function checkGuess() {
        // 用户输入的数字
        var userGuess = Number(userNumber.value);
        if(guessCount ===1){
            //textContent 作用加入文本内容
            guess.textContent = "上次猜的数字是：";
        }
        // 把用户猜的数字显示出来
        guess.textContent += userGuess + " ";
        // 判断用户输入的数字是否与随机数一致
        if(userGuess === randomNumber){         //用户回答正确的情况
            lastResult.textContent = "恭喜你，答对了！";
            lastResult.style.backgroundColor = "green";
            judge.textContent = "";
            gameover();
        }
        // 用户所猜的次数到达10次的时候，结束游戏
        else if(guessCount === 10){
            lastResult.textContent = "游戏结束";
            gameover();
        }
        // 用户猜1~10次且猜错的时候
        else{
            lastResult.textContent = "你猜错了";
            lastResult.style.backgroundColor = "red";
            // 判断用户输入的数字与系统生成的数字的大小比较
            if(userGuess<randomNumber){
                judge.textContent = "你猜低了";
            }else if(userGuess>randomNumber){
                judge.textContent = "你猜高了";
            }
        }
        // 猜测的次数要加1
        guessCount++;
        // 清空用户输入框
        userNumber.value = "";
        // 焦点事件  让焦点回到输入框   在每次输入之后让鼠标指针回到输入框中
        userNumber.focus();
    }
    // 确定按钮的事件
    checkNumber.addEventListener("click",checkGuess);
    // 游戏结束的函数
    function gameover() {
        // 输入框禁用
        userNumber.disabled = true;
        // 按钮的禁用
        checkNumber.disable = true;
        // 创建一个按钮
        resetButton = document.createElement("button");
        resetButton.textContent = "开始新游戏";
        // 向body里面加一个按钮元素
        document.body.appendChild(resetButton);
        // 点击开始新游戏，要重置游戏
        resetButton.addEventListener("click",resetGame);
    }
    // 游戏重置的函数
    function resetGame() {
        // 猜的次数重新赋值
        checkNumber = 1;
        // 获取所有p标签元素
        var resetText = document.querySelectorAll("p");
        // 清空p标签的文本内容
        for(var i=1;i<resetText.length;i++){
            resetText[i].textContent = "";
        }
        // 删除开始新游戏的按钮
        resetButton.parentNode.removeChild(resetButton);
        // 取消禁用
        userNumber.disabled = false;
        checkNumber.disable = false;
        // 清空输入框
        userNumber.value = "";
        // 让鼠标指针重新回到输入框中
        userNumber.focus();
        // 让第二个p标签的背景色设置为白色
        lastResult.style.backgroundColor = "white";
        randomNumber = Math.floor(Math.random()*100+1);
        console.log(randomNumber);
    }
</script>
</body>
</html>
avatar
文章
阅读
粉丝