好友
阅读权限10
听众
最后登录1970-1-1
|
公子语凉
发表于 2018-9-27 22:06
好久没有发帖了,
自从学完了java基础,就一直在学javaweb,前端以只是学了html/css js一直没学.
正好这两天看了点js,所以做了个小Demo将一些知识点聚集了一下. 加深记忆.
不要怪我没加注释,因为我懒!!!!
不过如果看的人多,我过几天可以在整理一下,在更新这个帖子.
[JavaScript] 纯文本查看 复制代码 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.gg{
width: 460px;
margin: 0 auto;
margin-bottom: 20px;
}
table th , table td{
padding: 5px;
}
table span{
font-size: 6px;
color: blue;
}
.firsttb tr:hover{
background-color: dodgerblue;
}
.nav{
width: 360px;
margin: 0 auto;
margin-top: 15px;
text-align: center;
border: 1px solid blueviolet;
padding: 10px;
}
</style>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("td:even").css("text-align","right");
$("td:last").css("text-align","center");
});
//声明省
var pres = ["北京", "上海", "天津","重庆"]; //直接声明Array
//声明市
var cities = [
["东城","西城","朝阳"],
["黄浦","徐汇","长宁"],
["河东","河西","南开"],
["万州","涪陵","涪陵"]
];
//声明区
var areas = [
[
["东城1", "东城2", "东城3"],
["西城1", "西城2", "西城3"],
["朝阳1", "朝阳2", "朝阳3"]
],
[
["黄浦1", "黄浦2", "黄浦3"],
["徐汇1", "徐汇2", "徐汇3"],
["长宁1", "长宁2", "长宁3"]
],
[
["河东1", "河东2"],
["河西1", "河西2"],
["南开1", "南开2"]
],
[
["万州1", "万州2"],
["涪陵1", "涪陵2"],
["涪陵1", "涪陵2"]
]
];
function init(){
var date = new Date();
var y = date.getFullYear();
time = setInterval("showad()",1000);
setInterval("next()",1000)
var year = document.getElementById("year");
for(var i = 1990 ; i <= y ; i++){
var tex = document.createTextNode(i);
var ele = document.createElement("option");
ele.appendChild(tex);
year.appendChild(ele);
}
var month = document.getElementById("month");
for(var i = 1 ; i <= 12 ; i++){
var tex = document.createTextNode(i);
var ele = document.createElement("option");
ele.appendChild(tex);
month.appendChild(ele);
}
var pre = document.getElementById("pre");
for(var i = 0 ; i < pres.length ; i++){
var text = document.createTextNode(pres[i]);
var ele = document.createElement("option");
ele.appendChild(text);
pre.appendChild(ele);
}
}
function prechange(){
var city = document.getElementById("city");
city.length = 0 ;
var pre = document.getElementById("pre");
var index = pre.selectedIndex;
for(var i = 0 ; i < cities.length ; i++){
if(i+1 == index){
for(var j = 0 ; j < cities[i].length ; j++){
var text = document.createTextNode(cities[i][j]);
var ele = document.createElement("option");
ele.appendChild(text);
city.appendChild(ele);
}
}
}
}
function citychange(){
var area = document.getElementById("area");
area.length = 0 ;
var pre = document.getElementById("pre");
var index1 = pre.selectedIndex;
/*alert(index1);*/
var city = document.getElementById("city");
var index2 = city.selectedIndex;
/*alert(index2);*/
for(var i = 0 ; i < areas.length ; i++){
if(i+1 == index1){
for(var j = 0 ; j < areas[i].length ; j++){
if(index2 == j){
for(var k = 0 ; k < areas[i][j].length ; k++){
var text = document.createTextNode(areas[i][j][k]);
var ele = document.createElement("option");
ele.appendChild(text);
area.appendChild(ele);
}
}
}
}
}
}
function showad(){
var img = document.getElementById("img");
img.style.display="block";
setInterval("hidden()",1000);
}
function hidden(){
clearInterval(time);
var img = document.getElementById("img");
img.style.display="none";
}
var i = 1 ;
function next(){
if(i > 3)
{
i=1;
}
document.getElementById("pic").src="img/"+i+++".jpg"
}
function previos(){
if(i < 1)
{
i=3;
}
document.getElementById("pic").src="img/"+i--+".jpg"
}
function change(){
var month = document.getElementById("month");
var index = month.selectedIndex;
var text = month.options[index].text;
var day = document.getElementById("day");
if(text == 1 || text == 3 || text == 5 || text == 7 || text == 8 || text == 10 || text == 12){
for(var m = 1 ; m <= 31 ; m++){
var text = document.createTextNode(m);
var ele = document.createElement("option");
ele.appendChild(text);
day.appendChild(ele);
}
}else if(text == 4 || text == 6 || text == 9 || text == 11){
for(var m = 1 ; m <= 30 ; m++){
var text = document.createTextNode(m);
var ele = document.createElement("option");
ele.appendChild(text);
day.appendChild(ele);
}
}else{
for(var m = 1 ; m <= 28 ; m++){
var text = document.createTextNode(m);
var ele = document.createElement("option");
ele.appendChild(text);
day.appendChild(ele);
}
}
}
function checkForm(){
var username = document.getElementById("username").value;
if(username == ""){
document.getElementById("ushow").innerHTML="用户名不能为空";
return false;
}
if(username.length<=6 || username.length>=12){
document.getElementById("ushow").innerHTML="用户名长度不正确";
return false;
}
var password = document.getElementById("password").value;
if(password == ""){
document.getElementById("pshow").innerHTML="密码不能为空";
return false;
}
if(password.length<=6 || password.length>=12){
document.getElementById("pshow").innerHTML="密码长度不正确";
return false;
}
var surepassword = document.getElementById("surepassword").value;
if(surepassword == ""){
document.getElementById("spshow").innerHTML="确认密码不能为空";
return false;
}
if(surepassword != password){
document.getElementById("spshow").innerHTML="两次密码不一样";
return false;
}
var email = document.getElementById("email").value;
if(email == ""){
document.getElementById("eshow").innerHTML="邮箱不能为空";
return false;
}
if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(email)){
document.getElementById("eshow").innerHTML="请输入正确的邮箱";
return false;
}
var yzm = document.getElementById("yzm").value;
if(yzm == ""){
document.getElementById("yzmshow").innerHTML="验证码不能为空";
return false;
}
if(yzm != "zckx"){
document.getElementById("yzmshow").innerHTML="输入验证码不正确";
return false;
}
alert("账户创建成功")
}
function selected(){
var select = document.getElementById("select");
var lovers = document.getElementsByName("lovers");
if(select.checked == true){
for (var i = 0 ; i < lovers.length ; i++) {
lovers[i].checked = true;
}
}else{
for (var i = 0 ; i < lovers.length ; i++) {
lovers[i].checked = false;
}
}
}
function get1(){
document.getElementById("ushow").innerHTML = "请输入由6-12位组成用户名";
}
function out1(){
document.getElementById("ushow").innerHTML = "";
}
function get2(){
document.getElementById("pshow").innerHTML = "请输入由6-12位组成密码";
}
function out2(){
document.getElementById("pshow").innerHTML = "";
}
function get3(){
document.getElementById("spshow").innerHTML = "请和密码保持一致";
}
function out3(){
document.getElementById("spshow").innerHTML = "";
}
function get4(){
document.getElementById("eshow").innerHTML = "请输入正确邮箱地址";
}
function out4(){
document.getElementById("eshow").innerHTML = "";
}
function get5(){
document.getElementById("yzmshow").innerHTML = "请输入正确验证码";
}
function out5(){
document.getElementById("yzmshow").innerHTML = "";
}
function cha(tag){
if(tag == "move"){
var tr1 = document.getElementById("tr1");
tr1.style.backgroundColor="palevioletred";
}else if(tag == "out"){
var tr1 = document.getElementById("tr1");
tr1.style.backgroundColor="white";
}
}
function xidu(){
var tab = document.getElementById("tab");
var len = tab.tBodies[0].rows.length;
for(var i = 0 ; i < len ; i++)
{
if(i%2 == 0)
{
tab.tBodies[0].rows[i].style.backgroundColor="red";
}else
{
tab.tBodies[0].rows[i].style.backgroundColor="green";
}
document.getElementById("body").style.backgroundColor="yellow";
}
}
function cloe(){
var tab = document.getElementById("tab");
var len = tab.tBodies[0].rows.length;
for(var i = 0 ; i < len ; i++)
{
tab.tBodies[0].rows[i].style.backgroundColor="white";
}
document.getElementById("body").style.backgroundColor="white";
}
</script>
</head>
<body id="body">
<input type="button" value="开启吸毒模式" />
<input type="button" value="关闭吸毒模式" />
<div class="gg">
<img src="img/4.jpg" id="img" style="display: none;"/>
</div>
<div>
<form action="#" method="get">
<table cellpadding="0" cellspacing="0" width="500px" align="center" id="tab">
<thead>
<tr id="tr1">
<th colspan="2">用户注册系统</th>
</tr>
</thead>
<tbody class="firsttb">
<tr>
<td>用户名:</td>
<td>
<input type="text" id="username"/>
<span id="ushow"></span>
</td>
</tr>
<tr>
<td>密码:</td>
<td>
<input type="password" id="password" />
<span id="pshow"></span>
</td>
</tr>
<tr>
<td>确认密码:</td>
<td>
<input type="password" id="surepassword" />
<span id="spshow"></span>
</td>
</tr>
<tr>
<td>Email:</td>
<td>
<input type="text" id="email" />
<span id="eshow"></span>
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" value="nan" name="sex" checked="checked"/>男
<input type="radio" value="nv" name="sex"/>女
</td>
</tr>
<tr>
<td>爱好:
<input type="checkbox" value="select" id="select" />
</td>
<td>
<input type="checkbox" value="zuqiu" name="lovers"/>足球
<input type="checkbox" value="lanqiu" name="lovers"/>篮球
<input type="checkbox" value="wangqiu" name="lovers"/>网球
<input type="checkbox" value="taiqiu" name="lovers"/>台球
</td>
</tr>
<tr>
<td>出生日期:</td>
<td>
<select id="year">
<option>-请选择-</option>
</select>
<select id="month">
<option>-请选择-</option>
</select>
<select id="day">
<option>-请选择-</option>
</select>
</td>
</tr>
<tr>
<td>籍贯:</td>
<td>
<select id="pre">
<option>-请选择-</option>
</select>
<select id="city">
<option>-请选择-</option>
</select>
<select id="area">
<option>-请选择-</option>
</select>
</td>
</tr>
<tr>
<td>验证码:</td>
<td>
<input type="text" id="yzm" />
<img src="img/yanzhengma.png" />
<span id="yzmshow"></span>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="creat" id="creat"/>
</td>
</tr>
</tbody>
</table>
</form>
</div>
<div class="nav">
<input type="button" value="previos" id="previos"/>
<input type="button" value="next" id="next"/>
<img src="img/1.jpg" id="pic" style="padding: 10px;"/>
</div>
</body>
</html>
|
|
|
发表于 2018-9-28 13:03
