JS基础实践

最新推荐文章于 2023-06-07 16:18:54 发布

forrest_ou

最新推荐文章于 2023-06-07 16:18:54 发布

阅读量247

点赞数

分类专栏： javaWeb 文章标签： js

本文链接：https://blog.csdn.net/forrest_ou/article/details/53841975

版权

javaWeb 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

既然实践，那么就是实实在在的运行出结果了的，实在点，代码不会骗我。

JS代码

   //JS对大小写敏感
   //document.write("<h1>JS直接写入HTML</h1>") 只能直接写，在文档加载中加载；不能放在函数中，在文档加载后加载，放在函数中改变的是整个文档
   var num = 12, age = 22, tell = "110";
   var fruit = ["apple","orange"]
   var person = {id:"001",name:"YYY",phone:"110"}
   var person2 = {
	   firstName : function(){
		   return "ooo";
	   },
	   lastName : function(){
		   return "uuu";
	   }
   };
   
   function displayDate(){
     document.getElementById("id_1").innerHTML= Date();
   }
   function changeColor(){
     document.getElementById("id_1").style.color = "#ff0000";
   }
   function checkNum(){
     var num = document.getElementById("id_2").value;
	 if(num == "" || isNaN(num)){
	   alert("请输入数字")
	 }
   }
   function changeText(){
	   document.getElementById("id_3").innerHTML= person2.firstName();
   }
   function changeText_2(name,phone){
	   //var v = name +"的电话是"+ phone;
	   document.getElementById("id_4").innerHTML = name +" 的电话是 "+ phone;
   }
   function chooseString(){
	   var d = new Date();
	   var time = d.getHours();
	   if(time < 10){
		    document.getElementById("id_5").innerHTML = "早上好";
	   }else if (time < 20 && time > 10){
		    document.getElementById("id_5").innerHTML = "中午好";
	   }else{
		    document.getElementById("id_5").innerHTML = "晚上好";
	   }
   }
   function chooseWeek(){
	   var x ;
	   var w = new Date().getDay();
	   switch(w){
		   case 0:
		     x = "周日"
			 break;
		   case 1:
		     x = "周一"
			 break;
		   case 2:
		     x = "周二"
			 break;
		   case 3:
		     x = "周三"
			 break;
		   case 4:
		     x = "周四"
			 break;
		   case 5:
		     x = "周无"
			 break;
		   case 6:
		     x = "周六"
			 break;
	   }
	   document.getElementById("id_6").innerHTML = x;
   }
   function testForIn(){
	   //函数（方法）里的变量在使用时要先完成初始化，这里+=使用了text
	   var text = ""  ;
	   var person = {id:"001",name:"YYY",phone:"110"}
	   for (var x in person){
		   //String() Number()  String() = toString()
		   text += person[x]+" "+String(777)+" "; 
   }
   document.getElementById("id_7").innerHTML = text ;
  }
  function checkValue(){
	  var x = document.getElementById("tt").value;
	  try{
		  if(x == "")
			  throw "输入为空";
		  if(isNaN(x))
			  throw "不是数字";
		  if(x > 10)
			  throw "太大";
		  if(x < 5)
			  throw "太小";
		  
	  }catch(exception){
		  document.getElementById("showErr").innerHTML="错误是："+exception;
	  }
  }
  function testStrict(){
	  //点击按钮，执行函数，在严格模式下回报错
	  "use strict";
	  x = 22;//未声明
  }
  function fromCheck(){
	 var  x = document.getElementById("id_8").value;
	 if(x == "" || x == null ){
		 alert ("姓名必须填写");
		 return false;
	 }
  }
  function checkInput(){
	  var v = document.getElementById("id_9");
	  if(v.checkValidity() == false){
		  document.getElementById("id_10").innerHTML = v.validationMessage;
	  }else{
		  document.getElementById("id_10").innerHTML = "输入正确";
	  }
  }
  //json字符串(书写问题)到js对象，然后输出
  var txt = '{"user":['+
  '{"name":"ooo","age":"22"},'+
  '{"name":"uuu","age":"33"}]}';
  obj = JSON.parse(txt);
  var vv = obj.user[0].name;
  document.getElementById("id12").innerHTML = vv;
  //之前将js的引入放在HTML中的head里面，因为先加载的js，而我上面测试json是直接写的js代码，会报找不到id12的错误，将js的引入放在id12元素的下面就可以解决问题

对应的HTML代码

<!DOCTYPE HTML>
<html>
<meta charset="utf-8">
<head>
<title>JS</title>

</head>
<a href="#lastt">跳转到尾部</a>
<a href="javascript:void(0`)">这是一个死链接</a>
<h2 id="id_1">点击按钮显示当前日期</h2>
<button type="button" name="button_1" id="b_1" οnclick="displayDate()">显示当前日期</button>
  <button type="button" οnclick="changeColor()">改变颜色</button>
<hr/>
请输入数字：<input type="text" id="id_2">
  <button type="button" id="b_2" οnclick="checkNum()">验证</button>
<hr/>

<h3 id = "id_3">标题一</h3>
<button type="button" οnclick="changeText()">改变标题一</button>
<hr/>

<h3 id = "id_4">标题二</h3>
<!-- 参数使用单引号，使用双引号会出现令牌不正确的情况，导致</body>失效 -->
<button type="button" οnclick="changeText_2('Ou','999')">改变标题二</button>
<hr/>
<button type="button" οnclick="this.innerHTML=Date()">现在的时间是</button>
<hr/>
<h3 id="id_5">打什么招呼</h3>
<button type="button" οnclick="chooseString()">选择招呼语句</button>
<hr/>
<h3 id="id_6"></h3>
<button type="button" οnclick="chooseWeek()">今天周几</button>
<hr/>
<h3 id="id_7"></h3>
<button type="button" οnclick="testForIn()">For in 遍历对象的属性</button>
<hr/>
<h3>请输入一个5到10之间的数字</h3>
<input type="text" id="tt" >
<button type="button" οnclick="checkValue()">检查</button>
<p id="showErr"></p>
<hr/>
<button type="button" οnclick="testStrict()">严格模式</button>
<hr/>
<form name="form_1"  action="" method="post">
姓名:<input type="text" id="id_8">
<input type="button" οnclick="fromCheck()" value="提交">
</form>
<hr/>
<!-- 约束验证 -->
<h3>请输入100至300之间的数组，点击验证，提示输入正确，否则会提示错误信息</h3>
<input id="id_9" type="number" min="100" max="300" required>
<button type="button" οnclick="checkInput()">验证</button> 
<p id="id_10"></p>
<p id="id12"></p>
<a href="#">跳到网页头部</a>
<h1 id="lastt">尾部定位点</h1>
<script src="js_1.js"></script>
</body>
</html>

两个文件放在同一个文件夹下

------------------over--------------------