js小项目
作者：互联网
1.登录
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function checkFrom() {
var name=document.getElementById("username").value;
if(name.length<6){
alert("长度太短");
return false;
}
var ps=document.getElementById("password").value;
var rps=document.getElementById("repassword").value;
if (ps!=rps){
alert("密码不相同");
return false;
}
var ph=document.getElementById("phone").value;
if(!/^1(3|4|5|6|7|8|9)\d{9}$/.test(ph)){
alert("手机格式不对");
return false;
}
var e=document.getElementById("email").value;
if(!/^([a-zA-Z\d])(\w|\-)+@[a-zA-Z\d]+\.[a-zA-Z]{2,4}$/.test(email)){
alert("邮箱格式不对");
return false;
}
}
</script>
</head>
<body>
<form action="#">
<div>用户名：<input id="username" type="text"/></div>
<div>密码：<input id="password" type="password"/></div>
<div>确认密码：<input id="repassword" type="password"/></div>
<div>手机号码:<input id="phone" type="number"/></div>
<div>邮箱:<input id="email" type="text"/></div>
<div><input type="submit" value="注册" onclick="checkFrom()"></div>
</form>
</body>
</html>
2.图片轮播
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>实现带左右按钮控制焦点图片切换</title>
<style type="text/css">
*{margin:0;padding:0;}
ul,li{list-style:none;}
img{border:0;}
.wrapper{
width: 800px;
margin: 0 auto;
padding-bottom: 50px;
}
#focus{
width: 800px;
height: 280px;
overflow: hidden;
position: relative;
}
#focus ul{
height: 380px;
position: absolute;
}
#focus ul li{
float: left;
width: 800px;
height: 280px;
overflow: hidden;
position: relative;
background: #000;
}
#focus ul li div{
position: absolute;
overflow: hidden;
}
#focus .preBtn{
width: 45px;
height: 100px;
left: 0;
top:90px;
background:url(images/spirte.png) no-repeat 0 0;
background-color:#000;
cursor: pointer;
opacity:0.4;
filter:alpha(opacity=40);
}
#focus .nextBtn{
width: 45px;
height: 100px;
right:0px;
top:90px;
background:url(images/spirte.png) no-repeat right top;
background-color:#000;
cursor: pointer;
opacity:0.4;
filter:alpha(opacity=40);}
</style>
<!-- 请在此处添加javascript代码实现需求 -->
<script type="text/javascript">
var picArr=new Array();
picArr[0]="images/01.jpg";
picArr[1]="images/02.jpg";
picArr[2]="images/03.jpg";
picArr[3]="images/04.jpg";
picArr[4]="images/05.jpg";
var index=0;
var timer=0;
window.onload=showPic2();
window.onload=showPic();
function showNext() {
clearTimeout(timer);
showPic();
}
function showPre() {
clearTimeout(timer);
showPic2();
}
function showPic2() {
document.getElementById("pic").src=picArr[index];
if (index>0){
index--;
} else {
index=4;
}
setTimeout("showPic2",2000);
}
function showPic() {
document.getElementById("pic").src=picArr[index];
if (index<(picArr.length-1)){
index++;
}else{
index=0;
}
setTimeout("showPic",2000)
}
</script>
</head>
<body>
<div class="wrapper">
<div id="focus">
<ul>
<li><a href="#" target="_blank"><img src="images/01.jpg" alt="" id="pic"/></a>
<div class="preBtn" onclick="showPre()"></div>
<div class="nextBtn" onclick="showNext()"></div>
</li>
</ul>
</div>
</div>
</body>
</html>
3.列表移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function selectOneleft() {
var lefts = document.getElementById("leftselect");
var options = lefts.options;
var rights = document.getElementById("rightselect");
for (var i = 0; i < options.length; i++) {
var option1 = options[i];
if (option1.selected) {
rights.appendChild(option1);
}
}
}
function selectOneright() {
var lefts = document.getElementById("leftselect");
var rights = document.getElementById("rightselect");
var options = rights.options;
for (var i = 0; i < options.length; i++) {
var option1 = options[i];
if (option1.selected) {
lefts.appendChild(option1);
}
}
}
function selectAllleft() {
var leftSelect = document.getElementById("leftselect") ;
var size = leftSelect.length;
for(var i=0;i<size;i++) {
var options = leftSelect.options[0] ;
document.getElementById("rightselect").appendChild(options) ;
}
}
function selectAllright() {
var rightSelect = document.getElementById("rightselect") ;
var size = rightSelect.length;
for(var i=0;i<size;i++) {
var options = rightSelect.options[0] ;
document.getElementById("leftselect").appendChild(options) ;
}
}
</script>
</head>
<body>
<table width="400px" border="1px">
<tr>
<td>分类名称</td>
<td><input type="text" value=" 手机数码"/></td>
</tr>
<tr>
<td>分类描述</td>
<td><input type="text" value="这里都是手机数码"/></td>
</tr>
<tr>
<td>分类商品</td>
<td>
<div style="float: left">
已有商品<br/>
<select multiple="multiple" id="leftselect" ondblclick="selectOneleft()">
<option>华为</option>
<option>小米</option>
<option>诺基亚</option>
</select>
<br/>
<a href="#" onclick="selectOneleft()">>></a><br/>
<a href="#" onclick="selectAllleft()">>>></a>
</div>
</td>
<td>
<div style="float: right">
未选商品<br/>
<select multiple="multiple" id="rightselect" ondblclick="selectOneright()"> ;
<option>苹果</option>
<option>锤子</option>
<option>三星</option>
</select>
<br/>
<a href="#" onclick="selectOneright()"><<</a><br/>
<a href="#" onclick="selectAllright()"><<<</a>
</div>
</td>
</tr>
</table>
</body>
</html>
标签：function,项目,js,getElementById,var,document,options,picArr 来源： https://blog.csdn.net/alexis333/article/details/101221533