HTML里为啥input和canvas元素水平放在一行没有对齐,要写一个验证码,附上代码

<!DOCTYPE html>





Document



验证码


<br> /*生成4位随机数*/<br> function rand() {<br> var str = &quot;abcdefghijklmnopqrstuvwxyz0123456789&quot;;<br> var arr = str.split(&quot;&quot;);<br> var validate = &quot;&quot;;<br> var ranNum;<br> for (var i = 0; i &lt; 4; i++) {<br> ranNum = Math.floor(Math.random() * 36); //随机数在[0,35]之间<br> validate += arr[ranNum];<br> }<br> return validate;<br> }<br> /*干扰线的随机x坐标值*/<br> function lineX() {<br> var ranLineX = Math.floor(Math.random() * 90);<br> return ranLineX;<br> }<br> /*干扰线的随机y坐标值*/<br> function lineY() {<br> var ranLineY = Math.floor(Math.random() * 40);<br> return ranLineY;<br> }<br> function clickChange() {<br> var mycanvas = document.getElementById(&#39;mycanvas&#39;);<br> var cxt = mycanvas.getContext(&#39;2d&#39;);<br> cxt.fillStyle = &#39;#000&#39;;<br> cxt.fillRect(0, 0, 90, 40);<br> /*生成干扰线20条*/<br> for (var j = 0; j &lt; 20; j++) {<br> cxt.strokeStyle = &#39;#fff&#39;;<br> cxt.beginPath(); //若省略beginPath,则每点击一次验证码会累积干扰线的条数<br> cxt.moveTo(lineX(), lineY());<br> cxt.lineTo(lineX(), lineY());<br> cxt.lineWidth = 0.5;<br> cxt.closePath();<br> cxt.stroke();<br> }<br> cxt.fillStyle = &#39;red&#39;;<br> cxt.font = &#39;bold 20px Arial&#39;;<br> cxt.fillText(rand(), 25, 25); //把rand()生成的随机数文本填充到canvas中<br><br> }<br> clickChange();<br> /*点击验证码更换*/<br> mycanvas.onclick = function (e) {<br> e.preventDefault(); //阻止鼠标点击发生默认的行为<br> clickChange();<br> };<br>

2个回答

对不齐你放页面的代码,放JS没看头,啥都看不出来

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐