zoukankan      html  css  js  c++  java
  • javascript之DOM编程改变CSS样式(简易验证码显示)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script type="text/javascript"> 
    	
    	
    	//产生一个四位的验证码。
    	function createCode(){
    		var datas = ['A','B','何','敏','凡','江','1','9']; // 0-7  长度8
    		var code = "";
    		for(var i = 0 ; i<4; i++){
    			//随机产生四个索引值
    			var index =  Math.floor(Math.random()*datas.length); // random 0.0-1.0(不包括1.0)
    			code+=datas[index];
    		}	
    		
    		var spanNode = document.getElementById("code");
    		spanNode.innerHTML = code;
    		spanNode.style.fontSize ="24px";
    		spanNode.style.color = "red";
    		spanNode.style.backgroundColor="gray";
    		spanNode.style.textDecoration = "line-through";
    	}
    	
    function ready(){
    	createCode();
    }
    	
     
     
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
    <body onload="ready()">
    	<span id="code"></span><a href="#" onclick="createCode()">看不清,换一个</a>
    	
    </body>
    </html>
    

    点击“看不清,换一个”之后,显示图片如下所示。实现了控制css样式,类似一个简易的验证码


    再点击一次:


  • 相关阅读:
    redis实时同步工具redis-shake
    elasticsearch单机部署
    ogg从库进程监控
    mha安装部署
    mha自定义路径安装
    gnuplot输出柱状图
    gnuplot输出曲线图
    gnuplot命令行模式不支持中文标题的解决办法
    ogg中logdump使用自动输入执行
    JDK(java se development kit)的构成
  • 原文地址:https://www.cnblogs.com/wanghang/p/6299762.html
Copyright © 2011-2022 走看看