js中的一些小案例

最新推荐文章于 2022-09-09 11:41:45 发布

小星星之路

最新推荐文章于 2022-09-09 11:41:45 发布

阅读量1k

点赞数 1

分类专栏： html+css+js代码文章标签： js css html

本文链接：https://blog.csdn.net/qq_45760909/article/details/118177599

版权

html+css+js代码专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1抽奖

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table{
   width:500px;
   height:500px;
   
}
   td{
      width:150px;
      height:50px;
      border:1px solid #000;
      
      padding-lift:25px;
   }
   .ok{
      background-color:#f00;
    }
</style>
</head>
<body>
  <table>
     <tr>
        <td>100</td>
        <td>200</td>
        <td>300</td>
     </tr>
     <tr>
        <td>400</td>
        <td>
           <button id="kaishi">开始</button>
           <button id="tingzhi">停止</button>
        </td>
        <td>500</td>
     </tr>
     <tr>
        <td>600</td>
        <td>700</td>
        <td>800</td>
     </tr>
     
  </table>
  <script type="text/javascript">
       //获取开始停止按钮个控件
       var a = document.getElementById("kaishi");
       var b = document.getElementById("tingzhi");
       //获取所有的li
       var c = document.getElementsByTagName("td");
       console.log(c);
       var arr = [0,1,2,5,8,7,6,3];
      //添加点击事件
      var x = 0;
      a.onclick=function(){
   	   a.disabled = true; 
   	   hello = setInterval(function() {
   		c[arr[x]].className="";
   		   x++;
   		   if(x==8){
   			   x=0;
   		   }
   		   //需要通过js语言的工具去
   		  c[arr[x]].className="ok";
   	   },1000);   //这里是以毫秒为单位，1秒 = 1000；
      }
      b.onclick = function(){
    	  a.disabled = false;
    	  clearInterval(hello);
      }
                        
  </script>
</body>
</html>

二：时间的开始，停止，归位

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
  div{
    width:500px;
    height:300px;
    border:1px solid #000;
    text-align:center;
    font-size:50px;
  }
  button{
    width:150px;
    height:50px;
    margin:8px;
    background-color:#fff;
  }
</style>
</head>
<body>
  <div id="xianshi">
  </div>
  <button id="kaishi">开始</button>
  <button id="tingzhi">停止</button>
  <button id="guiwei">归位</button>
</body>
<script type="text/javascript">
   //获取三个按钮的
   var a = document.getElementById("kaishi")
   var b = document.getElementById("tingzhi")
   var c = document.getElementById("guiwei")
   //创建三个按钮的点击事件
   var x =0;
   a.onclick = function(){
	   //设置锁：
	   a.disabled = true;
	   //定义一个计时器
	   add = setInterval(function(){
		   
		   //获取div控件
		   var d = document.getElementById("xianshi");
		   d.innerHTML = x++;
	   },500);
   }
   b.onclick = function(){
	   a.disabled = false;
	   var d = document.getElementById("xianshi");
	   clearInterval(add);  //控制它是否能继续运行
   }
   c.onclick = function(){
	   a.disabled = false;
	   var d = document.getElementById("xianshi");
	   x=0;
	   d.innerHTML ="";
	   
   }
</script>
</html>

三：图片的聚焦，显示

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片位置</title>
<style type="text/css">
  #zuo {
    float:left;
    width:140px;
    
  }
  #you {
    float:left;
    width:140px;
   /* border:1px solid #000;*/
  }
  #zuo img{
    width:140px;
  }
  #you img{
    width:440px;
    /*设置图片隐藏*/
    display:none;
    margin-left:2px;
  }
  #you .index{
    display:block;
  }
</style>
</head>
<body>
<div>
 <!-- 左侧的图片 -->
   <div id="zuo">
        <img alt="" src="images/001.jpg" >
        <img alt="" src="images/002.jpg" >
        <img alt="" src="images/003.jpg" >
   </div>
   <!-- 右侧的图片 -->
   <div id="you">
	   <img alt="" src="images/001.jpg"  class="index">
	   <img alt="" src="images/002.jpg" >
	   <img alt="" src="images/003.jpg" >
   </div>
</div>
  <script type="text/javascript">
     //获取左侧的图片：
     var a = document.getElementById("zuo").getElementsByTagName("img");
     //获取右侧的图片
     var b = document.getElementById("you").getElementsByTagName("img");
     //实现鼠标滑过左侧图片时：打印
     for(var i=0;i<a.length;i++){
    	 a[i].onmouseover = ok;
    	 //当鼠标经过第一张图片的时候，我们可以把0赋值给第一个张图片
    	 a[i].xx = i;
     }
     
     function ok(){
    	 for(var j=0;j<b.length;j++){
    		 //当左侧的图片下标等于右侧图片的下标 则显示对应的图片
    		 if(this.xx ==j ){
    			 b[j].className = "index";
    		 }else{
    			 b[j].className = "";
    		 }
    	 }
     }
  </script>
</body>
</html>

四：日历

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>日历</title>
<style type="text/css">
     #zong{
        width:500px;
        height:600px;
        background-color:#00FFFF;
        text-align:center;
         font-weight:bold;
         font-size:25px;
     }
     #nian{
        width:500px;
        height:100px;
        background-color:#53FF53;
        margin:10px auto;
     }
     #fen{
       margin-top:10pxl;
       width:500px;
        height:100px;
        background-color:#B8860B;
     }
     #riqi{
        margin:10px auto;
        text-align:center;
        width:250px;
        height:150px;
        background-color:#d00;
        border-radius:10px;
     }
      #xing{
      margin:0px auto;
        text-align:center;
        width:200px;
        height:100px;
        background-color:#C0C0C0;
     }
     #zong :hover{
         background-color:#FAFAD2;
     } 
     #guang{
       /*固定定位*/
       position:fixed;
       right:0px;
       bottom:0px;
     }
     #xiao{
       position:absolute;
       right:0px;
     }
     .ok{
      display:none;  
     }
</style>
<script type="text/javascript">

     
     function zidong(){
    	 
    	 setInterval(function(){
    	 var time = new Date();
    	 //获取年月份
    	 var a = document.getElementById("nian");
    	 a.innerHTML=time.getFullYear()+"-"+time.getMonth()+"-"+time.getDate();
    	 
    	 //获取时分秒
    	 var b = document.getElementById("fen");
    	 b.innerHTML = time.getHours()+":"+time.getMinutes()+":"+time.getSeconds();
    	 //获取是哪一天
    	 var c = document.getElementById("riqi");
    	 c.innerHTML = time.getDate();
    	 //获取是星期几
    	 var d = document.getElementById("xing");
    	 var f = time.getDay()-1;
    	 console.log(f);
    	 var xingqi = new Array("星期一","星期二","星期三","星期四","星期五","星期六","星期日");
    	 d.innerHTML = xingqi[f];
    	 },1000);
     }
     function dianji(){
    	 console.log("ni好");
    	 var xiao1 = document.getElementById("xiao");
    	 var da1 = document.getElementById("da");
    	 xiao1.className ="ok";
    	 da1.className ="ok";
    	 
     }
     
</script>
</head>
<body onload="zidong()">
 <!-- 设置一个广告弹 -->
 <div id="guang">
     <img alt="" src="images/close.png" id="xiao" onclick="dianji()">
     <img alt="图片" src="images/a.jpg" id="da">
 </div>


<div id="zong" >
     <!-- 显示年的div -->
     <div id="nian"></div>
     <!-- 显示时分秒的div -->
     <div id="fen"></div>
    <!-- 显示日的div -->
    <div id="riqi"></div>
    <!-- 显示星期几的div -->
    <div id="xing"></div>
</div>
</body>
</html>

五：登录控制

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    
    function shiqu(){
    	//获取账号中的值
    	var a = document.getElementById("zhanghao").value;
    	
    	//获取文字的id
    	var wenzi = document.getElementById("span1");
    	//选择正则表达式与文本框中的值进行判断
    	var c = /^\w{5,10}$/;
    	var d = /^\w{10,15}$/;
    	//进行判断：正则表达式中判断提供了固定的工具（test 返回的是true 和false）
    	if(c.test(a)){
    		//如果对比上了将文字的颜色改为绿色
    		wenzi.style.color ="#0f0";
    		return ture;  //返回一个1用于判断
    	}else{
    		//如果没有对比上则将文字改变为红色
    		span1.style.color="#f00";
    		return false;
    	}
    }
    function shiqi2(){
    	//获取密码文本框的值
    	var b = document.getElementById("password").value;
    	//获取文字的id
    	var wenzi2 = document.getElementById("span2");
    	var d = /^\w{10,15}$/;
    	if(d.test(b)){
    		span2.style.color ="#0f0";
    		return true;
    	}else{
    		span2.style.color="#f00";
    		return false;
    	}
    }
</script>
</head>
<body>
<!-- onsubmit：作用：当点击登录按钮时：会直接触发form标签中的action 
    但是当from 中有onsubmit方法后：会先判断onsubimt是否满足  当满足后才会触发action方法 
 -->
<form action="http://www.taobao/com" style="color:" onsubmit="return shiqu+shiqi2==2">
<!-- onblur：定义一个函数为shiqu  当定义了这个函数的文本框失去焦点之后就会自动执行js中shiqu()函数中的代码 -->
    账号：<input id="zhanghao" onblur="shiqu()" > <span id="span1">5-10字母，数字下划线</span>
    <br>
   密码：<input id="password" onblur="shiqi2();"> <span id="span2">10-15字母，数字下划线</span>
   <br>
   <input type="submit" value="登录">
</form>
</body>
</html>

小星星之路

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
js中的一些小案例

1抽奖<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css">table{ width:500px; height:500px; } td{ width:150px; height:50px; bor
复制链接

扫一扫