JS练习题 - 技术栈

1.九九乘法表

  <script>
    var str = "";
    for (var i = 1; i <= 9; i++) {
      for (var j = 1; j <= i; j++) {
        str = str + j + "*" + i + "=" + i * j + "\t";
      }
      str = str + "\n";
    }
    console.log(str);
  </script>

----------------------------------------

2.计算两数运算结果

html 复制代码

  <body>
    <input
      name="btn"
      type="button"
      value="计算两数运算结果"
      onclick="jisuan()"
    />
  </body>

<script>
    function jisuan() {
      var result;
      var num1 = prompt("请输入第一个数");
      var num2 = prompt("请输入第二个数");
      var operator = prompt("请输入运算符");
      switch (operator) {
        case "+":
          result = parseInt(num1) + parseInt(num2);
          break;
        case "-":
          result = parseInt(num1) - parseInt(num2);
          break;
        case "*":
          result = parseInt(num1) * parseInt(num2);
          break;
        case "/":
          if (num2 != 0) {
            result = parseInt(num1) / parseInt(num2);
          } else {
            alert("输入错误！！！");
          }
          return;
        default:
          alert("输入的运算符错误！");
          return;
      }
      alert("计算结果为" + num1 + operator + num2 + " = " + result);
    }
  </script>

----------------------------------------

3.点击按钮显示当前按钮下标

html 复制代码

  <body>
    <button style="width: 50px; height: 50px" id="1">1</button>
    <button style="width: 50px; height: 50px" id="2">2</button>
    <button style="width: 50px; height: 50px" id="3">3</button>
    <button style="width: 50px; height: 50px" id="4">4</button>
    <button style="width: 50px; height: 50px" id="5">5</button>
  </body>
  <script>
  
    onload = function () {
      var arr = document.getElementsByTagName("button");
      for (var i = 0; i < arr.length; i++) {
        arr[i].onclick = function () {
          alert(this.id);
        };
      }
    };
  </script>

----------------------------------------

4.平年闰年判断

html 复制代码

  <script>
    var year = prompt("请输入年份");
    if((year % 4 == 0 && year % 400!=0 ) || year % 400 == 0){
        document.write(year+"年是闰年")
    }else{
        document.write(year+"年是平年")
    }
  </script>

----------------------------------------

5.页面跳转

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>跳转</title>
  </head>
  <body>
    <div>这是跳转界面</div>
    <span id="da" style="color: red">5</span>秒后回到首页...
  </body>
  <script>
    function aa() {
      var da = parseInt(document.getElementById("da").innerHTML);
      da--;
      document.getElementById("da").innerHTML = da;
    }
    var mytime = setInterval("aa()", 1000);
    function timeout() {
      clearInterval(mytime);
      location = "start.html";
    }
    setTimeout("timeout()",5000)
  </script>
</html>

----------------------------------------

6.点击按钮获得相应的效果

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li name="xxx" id="li01">孙悟空</li>
      <li name="xxx">八戒</li>
      <li>唐僧</li>
    </ul>

    <div id="concent"></div>
    <button onclick="getLi()">点击获得一个Li</button>
    <button onclick="getLis()">点击获得两个Li</button>
    <button onclick="getLiByTagName()">点击获得所有li</button>
  </body>
  <script>
    //-------------------------------
    function getLi() {
      //换名
      var obj = document.getElementById("li01");
      obj.innerHTML = "白骨精";
    }
    //-------------------------------
    function getLis() {
      //根据name属性 获取元素 返回数组
      var objs = document.getElementsByName("xxx");
      var arr = new Array();
      for (var i = 0; i < objs.length; i++) {
        var elementLi = objs[i];
        arr.push(elementLi.innerHTML);
      }
      console.log(arr);
      document.getElementById("concent").innerHTML = arr.join("-");
    }
    //------------------------------
    function getLiByTagName() {
      var objs = document.getElementsByTagName("li");
      for (var i = 0; i < objs.length; i++) {
        var elementLi = objs[i];
        alert(elementLi.innerHTML);
      }
    }
  </script>
</html>

----------------------------------------

7.时间操作

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>启动/暂停</title>
  </head>
  <body>
    <div id="myclock"></div>
    <br>
    <button onclick="start()">启动/暂停</button>
    <button onclick="tiaozhaun()">点击跳转</button>
  </body>
  <script>
    var bool = true;
    var mytime;
    //
    function start() {
      if (bool) {
        window.clearInterval(mytime);
        bool = false;
      } else {
        mytime = setInterval("time()", 1000);
        bool = false;
      }
    }
    function time() {
      var today = new Date();
      var year = today.getFullYear();
      var month = today.getMonth() + 1;
      var day = today.getDate();
      var hh = today.getHours();
      var mm = today.getMinutes();
      var ss = today.getSeconds();
      document.getElementById("myclock").innerHTML =
        "现在是：" +year +"年" +month +"月" +day +"日" +hh +":" +mm +":" +ss;
    }
    time();
     mytime = setInterval("time()", 1000);

    function tiaozhaun(){
        location="跳转.html"
    }


  </script>
</html>

----------------------------------------

8.节点操作

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<ul id="xyj">
			<li>猪八戒1</li>
			
			<li  id="zbj">猪八戒2</li>
			<li>猪八戒3</li>
		</ul>
		<button onclick="getParent()">获得父级节点</button>
		<button onclick="getChildNodes()">获得所有子集</button>
		<button onclick="getNextNodes()">获得下一个子节点</button>
		<button onclick="addElementNode()">创建元素并插入</button>
	</body>
	<script type="text/javascript">
		function addElementNode(){
			var li = document.createElement("li");
			li.innerText = "孙悟空";
			li.style.color = "red";
			document.getElementById("xyj").appendChild(li);
		}
	
	
	
		function getParent(){
			document.getElementById("zbj").parentNode.style.color = "red";
		}
		function getChildNodes(){
			var arr = document.getElementById("xyj").childNodes;
			for(var i = 0;i<arr.length;i++)
			{
				if(arr[i].nodeType==1){
					alert(arr[i].innerText);
				}
				
			}
		}
		function getNextNodes(){
			var zbj = document.getElementById("zbj");
			var nextNode = zbj.nextSibling||zbj.nextElementSibling;
			alert(nextNode.nodeType);
		}
	</script>
</html>

----------------------------------------

9.表单验证1

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form method="get" action="1111" onsubmit="return lgoinSubmit()">
			<!--onfocus获得焦点      onblur失去焦点-->
			用户名:<input type="text" onfocus="focusChecked(this)" 
				onblur="blurChecked(this,1)"  id="uname"/><span id="uname_err" pl="用户名4到6位" ></span>
			<br/>
			密码：
			<input type="password" onblur="blurChecked(this,2)"
				  onfocus="focusChecked(this)" 
				   id="pwd"/><span id="pwd_err" pl="密码必须是6位" ></span>
			<br/>
			<input type="submit"  value="登录" />
		</form>
	</body>
	<script>
		function focusChecked(obj){
			obj.nextSibling.innerText = obj.nextSibling.getAttribute("pl");
			obj.nextSibling.style.fontSize = "12px";
			obj.nextSibling.style.color = "blue";
		}
		
		
		
		
		function blurChecked(obj,type){
			var bool = true;
			if(type==1){
				if(obj.value.length>6||obj.value.length<4){
					bool = false;
				}
			}else if(type==2){
				if(obj.value.length!=6){
					bool = false;
				}
			}
			
			if(bool){
				obj.nextSibling.innerText = "输入正确";
				obj.nextSibling.style.fontSize = "12px";
				obj.nextSibling.style.color = "green";
			}else{
				obj.nextSibling.innerText = "输入错误";
				obj.nextSibling.style.fontSize = "12px";
				obj.nextSibling.style.color = "red";
			}
		
			
		}
	
		
		function lgoinSubmit(){
			return false;
		}
		
		
	</script>
</html>

----------------------------------------

10.表单验证2

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>dom</title>
  </head>
  <body>
    用户名：
    <input type="text" id="uname" />
    <br />
    性别：
    <input type="radio" name="sex" id="sex" value="0" />女
    <input type="radio" name="sex" id="sex" value="1" checked />男
    <br />
    爱好：
    <input type="checkbox" name="hobby" value="0" />唱
    <input type="checkbox" name="hobby" value="1" checked />跳
    <input type="checkbox" name="hobby" value="2" />rap
    <br />
    国家：
    <select id="city">
      <option value="0">请选择</option>
      <option value="1001">中国</option>
      <option value="1002">日本</option>
      <option value="1003">美国</option>
    </select>
    <br />
    备注：
    <textarea id="bz" placeholder="请输入备注">xxx</textarea>
    <br />
    <button onclick="loginSubmit()">提交</button>
    <button onclick="defaultValue()">默认值</button>
  </body>
  <script>
    function defaultValue(){
			var uname = document.getElementById("uname");
			uname.value = "哈哈哈";
			
			var sexs = document.getElementsByName("sex");
			for(var i = 0;i<sexs.length;i++){
				if(sexs[i].value==2){
					sexs[i].checked = true;
				}
			}
			
			var city = document.getElementById("city");
			city.value = 1003;
			
			var bz = document.getElementById("bz");
			bz.innerText = "张三";
			
			
		}


    function loginSubmit() {
      // var uname = document.getElementById("uname");
			// uname.value = "哈哈哈";
      //获得单选框中的值
      // var sexs = document.getElementsByName("sex");
      // var sex;
      // for (var i = 0; i < sexs.length; i++) {
      //   if (sexs[i].checked) {
      //     sex = sexs[i].value;
      //   }
      // }
      //获得复选框中的值
      // var hobbys = document.getElementsByName("hobby");
      // var arrHobbys = new Array();
      // for (var i = 0; i <hobbys.length; i++) {
      //   if (hobbys[i].checked) {
      //     arrHobbys.push(hobbys[i].value);
      //   }
      // }
      // alert(arrHobbys.join(","));
      //获取下拉框中的值
      // var city=document.getElementsByName("city");
      // if(city.value==0){
      //   document.getElementById("city_err").innerHTML = "请选择国家";
      // }else{
      //   document.getElementById("city_err").innerHTML = "";
      // }
      //获得文本域的值
      var bz =document.getElementById("bz");
      alert(bz.value);
    }
  </script>
</html>

----------------------------------------