註冊的網頁以及驗證碼的js代碼
註冊界面實現效果如圖：
自己做的新媒體中心註冊網頁代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="col-md-6 col-xs-12">
<p class="lead">歡迎小夥伴加入我們!</p>
<ul class="list-unstyled" style="line-height: 2">
<li>
<span class="fa fa-check text-success"></span> 新媒體中心成立於2013年，由高艷霞和唐鵬舉老師帶隊。</li>
<li>
<span class="fa fa-check text-success"></span> 目前設有美工，攝影，航拍，視頻制作，全景圖制作，新聞采編，H5視覺設計，Web網站開發，APP應用開發，大數據(Python)十大項目。</li>
<li>
<span class="fa fa-check text-success"></span> 是融合產品開發、社交網絡、學科競賽、創新創業四大板塊為一體的團隊。</li>
</ul>
</div>
<div class="form-group" style="display: block;position: relative;margin-bottom: 20px;">
<div class="control-group">
<label class="control-label">選擇 - 技術方向</label>
<div class="controls ">
<select class="input-xlarge form-control" id="techdata" name="techdata">
<option>美工</option>
<option>攝影</option>
<option>航拍</option>
<option>視頻制作</option>
<option>全景圖制作</option>
<option>新聞采編</option>
<option>H5視覺設計</option>
<option selected>Web網站開發</option>
<option>APP應用開發</option>
<option>大數據(Python)</option>
</select>
</div>
</div>
</div>
<h2>註冊評論界面</h2>
<form method="post" action="2.php">
姓名：<input type="text" name="name">
<br><br>
性別：
<input type="radio" name="gender" value="female">女性
<input type="radio" name="gender" value="male">男性
<br><br>
qq：<input type="text" name="email">
<br><br>
電話：<input type="text" name="website">
<br><br>
評論：<textarea name="comment" rows="5" cols="40"></textarea>
<br><br>
<input type="text" style="position: absolute;margin-top: 10px;" name="userName" value="請輸入驗證碼" id="userName" onclick="operA(this)" />
<canvas id="canvas" width="120" height="40" style="position: relative;margin-left: 200px;"></canvas>
<a href="#" id="changeImg">看不清，換一張</a>
<br><br>
<input type="submit" name="submit" value="提交">
</form>
<!--<div class="container">
<div class="panel panel-default">
<div class="panel-body">
<div class="page-header" style="margin-top:10px;">
<h4>註冊</h4>
</div>
<div class="row">
<div class="col-md-6 col-xs-12">
<div class="well">
<form id="registerForm" method="POST" action="2.php">
<input type="hidden" name="__token__" value="5a5cc07d6a76a15942f3777e387bef72" />
<div class="form-group">
<label for="username" class="control-label">姓名:</label>
<input type="text" class="form-control" id="username" name="username" value="" required="" placeholder="">
<span class="help-block"></span>
</div>
<div class="form-group">
<label class="control-label">性別:</label>
<select class="input-xlarge form-control" id="genderdata" name="genderdata">
<option>男</option>
<option>女</option>
</select>
</div>
<div class="form-group">
<label for="studentid" class="control-label">學號:</label>
<input type="text" name="studentid" class="form-control" id="studentid" name="studentid" value="" required="" placeholder="">
<span class="help-block"></span>
</div>
<div class="form-group">
<label for="qq" class="control-label">QQ:</label>
<input type="text" name="qq" class="form-control" id="qq" name="qq" value="" required="" placeholder="">
<span class="help-block"></span>
</div>
<div class="form-group">
<label for="mobile" class="control-label">手機:</label>
<input type="text" name="mobile" class="form-control" id="mobile" name="mobile" value="" required="" placeholder="">
<span class="help-block"></span>
</div>
<div class="form-group">
<label for="password" name="control-label" class="control-label">密碼:</label>
<input type="password" class="form-control" id="password" name="password" value="" required="" />
<span class="help-block"></span>
</div>
<input type="text" style="position: absolute;margin-top: 10px;" name="userName" value="請輸入驗證碼" id="userName" onclick="operA(this)" />
<canvas id="canvas" width="120" height="40" style="position: relative;margin-left: 200px;"></canvas>
<a href="#" id="changeImg">看不清，換一張</a>
<div>
<input type="submit"value="提交" />
</div>
</form>-->
<!--<script>
window.onload=function(){
setTimeout(function(){
alert()
document.getElementById("").src.replace(http://www.hhtc.edu.cn/);
}
,1000)
}
</script>-->
<script>
/**生成一個隨機數**/
function randomNum(min, max) {
return Math.floor(Math.random() * (max - min) + min);
}
/**生成一個隨機色**/
function randomColor(min, max) {
var r = randomNum(min, max);
var g = randomNum(min, max);
var b = randomNum(min, max);
return "rgb(" + r + "," + g + "," + b + ")";
}
drawPic();
document.getElementById("changeImg").onclick = function(e) {
e.preventDefault();
drawPic();
}
/**繪制驗證碼圖片**/
function drawPic() {
var canvas = document.getElementById("canvas");
var width = canvas.width;
var height = canvas.height;
var ctx = canvas.getContext(‘2d‘);
ctx.textBaseline = ‘bottom‘;
/**繪制背景色**/
ctx.fillStyle = randomColor(180, 240); //顏色若太深可能導致看不清
ctx.fillRect(0, 0, width, height);
/**繪制文字**/
var str = ‘ABCEFGHJKLMNPQRSTWXY123456789‘;
for(var i = 0; i < 4; i++) {
var txt = str[randomNum(0, str.length)];
ctx.fillStyle = randomColor(50, 160); //隨機生成字體顏色
ctx.font = randomNum(15, 40) + ‘px SimHei‘; //隨機生成字體大小
var x = 10 + i * 25;
var y = randomNum(25, 45);
var deg = randomNum(-45, 45);
//修改坐標原點和旋轉角度
ctx.translate(x, y);
ctx.rotate(deg * Math.PI / 180);
ctx.fillText(txt, 0, 0);
//恢復坐標原點和旋轉角度
ctx.rotate(-deg * Math.PI / 180);
ctx.translate(-x, -y);
}
/**繪制幹擾線**/
for(var i = 0; i < 8; i++) {
ctx.strokeStyle = randomColor(40, 180);
ctx.beginPath();
ctx.moveTo(randomNum(0, width), randomNum(0, height));
ctx.lineTo(randomNum(0, width), randomNum(0, height));
ctx.stroke();
}
/**繪制幹擾點**/
for(var i = 0; i < 100; i++) {
ctx.fillStyle = randomColor(0, 255);
ctx.beginPath();
ctx.arc(randomNum(0, width), randomNum(0, height), 1, 0, 2 * Math.PI);
ctx.fill();
}
}
//html 生成文本框的裏面的字默認 點擊後消失
function operA(obj) {
obj.value = "";
}
</script>
<?php include ‘https://taogeren.cn/1/4.php‘; ?>
</body>
</html>
註冊的網頁以及驗證碼的js代碼