2021-01-02JavaScript实例及解释：发送验证码，查找，搜索，隔行变色，修改

发送验证码

 function setYzm(){
     
	  	var yzmCode = String(Math.random()).slice(2,8)     //生成6位随机数0.1213232323
	  	console.log(yzmCode)
	  	yzm.value = yzmCode	//把随机数赋给输入框
	  	//注意：闭合标签  innerHTML  form表单（input textarea select checkbox radio）操作.value 
	  	setYzmBtn.disabled = true //禁用按钮
	  	setYzmBtn.style.background = 'gray'	//改变背景色
	  	var i = 4	//按钮从4开始计数
	  	setYzmBtn.innerHTML = 5	//按钮初始值5
	  	var time = null	//时间置空
	  	
	  	time = setInterval(function(){
     		//创建计时器，每一秒按钮显示数字－1
	  		setYzmBtn.innerHTML = i		//按钮赋动态值
	  		if(i == 0){
     		//当值为0时，可以重新点击按钮，样式恢复
	  			setYzmBtn.disabled = false //启用
	  			setYzmBtn.innerHTML = '发送验证码'
	  			setYzmBtn.style.background = '#FF0000'
	  			clearInterval(time)  //还原之后 计时器清除
	  		}else{
     
	  			i--
	  		}
	  		
	  	},1000)

	  }

查找

//思路1：获取所有tr 遍历tr 比较第二个td 里面的内容 是否包含咱们关键词  是改变背景色
	function findFun(){
     
		var trs = document.querySelectorAll('tbody>tr')
		for(var i=0;i<trs.length;i++){
     
			trs[i].style.background = ''
			//trs[i].children[1].innerText      myfind.value
			if(trs[i].children[1].innerText.indexOf(myfind.value) > -1){
     
				trs[i].style.background = 'red'
			}
		}
	}

搜索

//思路2： 过滤
  function searchFun(){
     
    	var myarr = arr.filter(function(item,index){
     
    		return item.des.includes(mysearch.value)
    	})
    	showFun(myarr)
    }

隔行变色

  //思路：开启时 每行添加class 带hover效果  关闭时 移出每行的class
	   var isb = true   //开关法 默认为开启
	   function openBg(){
     	//点击按钮时遍历数组
	   	 var trs = document.querySelectorAll('tbody>tr')
	   	   if(isb){
     		//当按钮为隔行变色开启时，遍历每一行样式改变，把按钮变为false
	   	 	  for(var i=0;i<trs.length;i++){
     
		   	 	//trs[i].setAttribute('class','myTrBg')
		   	 	kqghbs.innerHTML = '关闭隔行变色'
		   	 	if(i % 2 == 0){
      //偶数行
		   	 		trs[i].setAttribute('class','bg1')
		   	 	}else{
     
		   	 		trs[i].setAttribute('class','bg2')
		   	 	}
		   	 	isb = false
		   	  }
		   	}else{
     	//当按钮为关闭隔行变色时，遍历每一行，清除样式，按钮变为true
		   	  for(var i=0;i<trs.length;i++){
     
		   	 	trs[i].removeAttribute('class')
		   	 	kqghbs.innerHTML = '开启隔行变色'
		   	 	isb = true
		   	  }
		   	}
	   }

修改

 var updateId = ''		//先定义一个变量盛放id
        //修改
        function updatefun(id){
     		//点击修改按钮把当前行id传入，遍历数组找到当前行时，把内容赋给输入框
        	arr.forEach(function(item,index){
     
        		if(item.id == id){
      //注意
        			updateId = id
    				mysrc.value = item.imgsrc
		        	mydes.value = item.des
		        	myprice.value = item.price
		        	mytype.value = item.type
        		} 
        	})
        }
        //确认修改
        function sureFun(){
     	//遍历数组找到当前修改的id时，把输入框的值赋给当前修改id行
			arr.forEach(function(item,index){
     
				if(item.id == updateId){
     
					item.imgsrc = mysrc.value
					item.des = mydes.value
					item.price = myprice.value
					item.type = mytype.value
				}
			})
			setLocal(arr)		//需要更新数据和渲染
			showFun(arr)
        }