javaScript和json例题

最新推荐文章于 2022-07-21 17:08:54 发布

蓝莓浆糊饼干

最新推荐文章于 2022-07-21 17:08:54 发布

阅读量635

点赞数

CC 4.0 BY-SA版权

分类专栏：学习笔记文章标签： javascript json

本文链接：https://blog.youkuaiyun.com/dangaodeaiyi/article/details/48719169

学习笔记专栏收录该内容

13 篇文章

订阅专栏

本文通过五个实战案例介绍如何使用HTML、CSS和JavaScript实现点名器、交互式日期显示、多选框控制、数据动态加载及表单验证等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，制作一个点名器：

<!DOCTYPE html>
<html>
  <head>
    <title>点名器.html</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">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
   <style  type="text/css">
      body{
        background:url("../tu/8.11练习.png");
        /*  可以自己选择背景图片   */
        background:blue;
        
      }
       span{
            font-size:40px;
            color:red;         
       }
      /* style标签统一放在head标签内部   */
   </style>
  </head>
  <body  >
    <div>
      <input   type="button"  id="id"  value="开始点名"  />
      <br/>
      <span  type="text"   id="text" ><span>
      </span>
      </div>
  </body>
    <script  type="text/javascript">
	 studentArr = ["学生01","学生02","学生03","学生04","学生05"];
         var   seti;//设定一个全局变量，作用范围是
      var  anniou=    document.getElementById("id");
   /*  设定一个全局变量，之所以把script标签放在body标签下面，因为HTML文件是解释一条执行一条，
    也是为了使得这个anniou有意义 */
       function   run()
       { 
        
           if(anniou.value=="开始点名")
           {
                 seti=setInterval(ff,20);//设定每20毫秒就执行一次ff函数
                 anniou.value="结束点名";
           }
           else
          {
              clearInterval(seti);//停止周期调用函数
              anniou.value="开始点名";
           }
     
        }
        function  ff()
        {
        	//获取一个随机数
           var  v= Math.floor(Math.random()*10); 
            
            document.getElementById("text").innerHTML=  studentArr[v];
               
        }
        //下面使用了DOM分配事件的机制
        window.onload=function(){
        	anniou.onclick=run;
        	
        };
  </script>
</html>

2，写一个span，内容是“我是span”。当鼠标在span上悬停时，span显示当前日期；当鼠标移出span时，恢复”我是span”内容（事件练习）

<!DOCTYPE html>
<html>
  <head>
    <title>练习2.html</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">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
       <style type="text/css">
       /*  style标签统一放在head标签内部  */
        .class{
            color:red;
            font-size: 12px;
        }
    </style>
  </head>
  <body>
   <span   id="id"   class="class">我是span</span>
  </body>
    <script  type="text/javascript">
    
    var   d=document.getElementById("id");
     // d.innerHTML="我是span";
      function  run(){
         var   date=new  Date();
         
        d.innerHTML=date.toLocaleString();
       } 
       function  ff(){
         
           d.innerHTML="我是span"; //获取内容体    
      } 
       //利用DOM分配事件机制，使得HTML元素和JavaScript代码尽可能的分离开来
       window.onload=function(){
           d.onmouseover=run;
           d.onmouseout=ff;
           
            
      };
  </script>
</html>

3，用JS设置多选框系列的全选/全不选/反选

<!DOCTYPE html>
<html>
  <head>
    <title>MyHtml4.html</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">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
 
  </head>
 
  <body>
  <form>
    <input  type="checkbox"  id="篮球"   name="aihao"  value="lq"/>篮球<br/>
    <input  type="checkbox"  id="足球"   name="aihao"  value="zq"/>足球<br/>
    <input  type="checkbox"  id="游泳"   name="aihao"  value="yy"/>游泳<br/>
    <input  type="checkbox"  id="编程"   name="aihao"  value="bc"/>编程<br/>
    <input  type="button"   id="全选"    value="全选"    />
    <input  type="button"   id="全不选" value="全不选"  />
    <input  type="button"   id="反选"  value="反选"    />
    <input  type="submit"   id="提交"  value="提交"    />
    </form>
  </body>
  <script  type="text/javascript">
     function   qrun()
     {
          //注意checked的使用
          var   v= document.getElementsByName("aihao");
          for(var  i=0; i<v.length;i++)//遍历
          {
              v[i].checked=true; //全部设置为选中        
          }
     } 
      function   qbrun()
     {
          var   v= document.getElementsByName("aihao");
          for(var  i=0; i<v.length;i++)
          {
              v[i].checked=false; //全部设置为不选中        
          }
     }
     function   frun()
     {
         var   v= document.getElementsByName("aihao");
          for(var  i=0; i<v.length;i++)
          {
              if(v[i].checked==true)//如果原本选中
              {
                  v[i].checked=false;//设置为不选中
              } 
              else//如果原本没有选中
            {
                v[i].checked=true;//设置为选中    
              }        
          }
     } 
     window.onload=function(){
         document.getElementById("全选").onclick=qrun;
         document.getElementById("全不选").onclick=qbrun;
         document.getElementById("反选").onclick=frun;
     };  
  </script>
</html>

4，eval()的使用

<!DOCTYPE html>
<html>
  <head>
    <title>MyHtml.html</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">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
 
  </head>
  <script  type="text/javascript">
    function   run()
    {
          var  goods="[{'商品名字':'电视机','商品价格':'200','库存':'10'},{'商品名字':'手机','商品价格':'4200','库存':'100'},{'商品名字':'电冰箱','商品价格':'2000','库存':'8'}]"; 
         var  v=eval("("+goods+")");
        
          var   dueix=document.getElementById("id");
         //alert("jk");
         //每一个数组元素就是一个对象，获取对象后在获取对象的属性
         for(var  i=0;i<v.length;i++)
         {
             dueix.innerHTML  +="<tr><td>"+v[i]["商品名字"]+"</td><td>"+v[i]["商品价格"]+"</td><td>"+v[i]["库存"]+"</td></tr>";
         }
         //alert("hh");
                   
    }
  </script>
  <body>
    <table  border="1"  width="100%"  id="id">
      <tr>
         <td>商品名字</td><td>商品价格</td><td>库存</td>
      </tr>
    </table>
   <input  type="button" value="点我加载数据"  onclick="run()"/>
  </body>
</html>

5，需求

1、用户名不能为空；2、密码不能为空；3、确认密码不能为空；4、确认密码需和密码一致；5、用户类型必须选择；6、所在城市必须选择。

全部符合校验规则提交表单数据，某一项不符合，不提交表单，且进行提示。

<!DOCTYPE html>
<html>
  <head>
    <title>自写表单.html</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">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
   
  <style  type="text/css">
          span{
             color:red;
          }  
   </style> 
  </head>
   <body>
       <form  action="#"  method="get"   onsubmit="return  tijiao()" >
       <!-- 这里用了一个return，
       表示计算tijiao函数后，返回false才会显示tijiao函数的执行效果； 而且要注意onsubmit一般都是写在form标签上，注意form不要写成from
        -->
          <table  width=50%>
              <tr>
                 <td>用户名</td>
                 <td><input  type="text" id="用户名" name="yhm"/><span  id="yhmspan"></span></td>
              </tr>
              <tr>
                 <td>密码</td>
                 <td><input  type="password" id="密码" name="mima"/><span  id="mimaspan"></span></td>
              </tr>
               <tr>
                 <td>确认密码</td>
                 <td><input  type="password" id="确认密码" name="qrmima"/><span  id="qrmimaspan"></span></td>
              </tr>
              <tr>
                 <td  rowspan="2">用户类型</td>
                 <td><input  type="radio"  name="yhlx"  value="vip"/>vip</td>
              </tr>
              <tr>
                 <td><input  type="radio"  name="yhlx"  value="一般用户"/>一般用户</td>
              </tr>
              <tr><td></td><td><span  id="yhlxspan"></span></td></tr>
              <tr>
                  <td>所在城市</td>
                  <td><select  id="所在城市">
                   <option>请选择</option>
                   <option>深圳</option>
                   <option>北京</option>
                   <option>上海</option>
                   <option>哈尔滨</option>
                  </select></td>
              </tr>
              <tr><td></td><td><span  id="csspan"></span></td></tr>
              <tr>
                 <td><input  type="submit"    value="提交按钮"/><input  type="reset"  value="重置" /></td>
              </tr>
              
          </table>
       </form>
  </body>
    <script  type="text/javascript">
      s = /^\s*$/;//设定正则,注意要带*
     function  tijiao()//检验表单的主方法
     {
    	 clearSpan();
    	 var   v1=yhmjy();
    	 var   v2=mimajy();
    	 var   v3=qrmimajy();
    	 var   v4=mym();
    	 var   v5=yhlxjy();
    	 var   v6=csjy();
    	 return  v1  &&  v2 && v3 && v4&& v5&& v6;
     }
     function   clearSpan()//清空span方法
     {
         var   sz=document.getElementsByTagName("span");
         for(var  i=0;i<sz.length;i++)
         {
               sz[i].innerHTML="";    
         } 
    	
     }
     function   yhmjy()//用户名检验
     {
    	 if(s.test(document.getElementById("用户名").value))
    	{
    		 document.getElementById("yhmspan").innerHTML="用户名不能为空";
    		 return  false;
    	}
    	return   true;
     }
    function   mimajy()//密码检验
    {
   	 if(s.test(document.getElementById("密码").value))
 	{
 		 document.getElementById("mimaspan").innerHTML="密码不能为空";
 		 return  false;
 	}
 	   return   true;
    }
    function   qrmimajy()//确认密码检验
    {
   	 if(s.test(document.getElementById("确认密码").value))
 	{
 		 document.getElementById("qrmimaspan").innerHTML="确认密码不能为空";
 		 return  false;
 	}
 	   return   true;
    }
    function   mym()//确认密码与密码的对比
    {
    	var  vmima=document.getElementById("密码");
    	var  vqrmima=document.getElementById("确认密码");
    	if(vmima.value!=vqrmima.value)
    	{
    		document.getElementById("qrmimaspan").innerHTML="密码比对不正确";
    		return  false;
    	}
    	return  true;
    }
    function   yhlxjy()//用户类型检验
    {
    	var  yhlxsz=   document.getElementsByName("yhlx");
    	for(var  i2=0;i2<yhlxsz.length;i2++)
    	{
    		if(yhlxsz[i2].checked==true)
    		{
    		   return  true;
    		}
    	}
    	document.getElementById("yhlxspan").innerHTML="没有选择用户类型";
    	return  false;
    }
    function   csjy()//所在城市检验
    {
    	 var   csjh=document.getElementById("所在城市");//options是所有选项的集合，可以利用selectIndex选中项的序号来获取对应的被选中项目的节点对象
    	  if(csjh.options[csjh.selectedIndex].innerHTML=="请选择")
    	  {
    		  document.getElementById("csspan").innerHTML="请选择所在城市";
    		  return  false;
    	  }
    	 return  true;
    	
    }
  </script>
</html>