js小项目

最新推荐文章于 2023-02-09 20:31:06 发布

alexis333

最新推荐文章于 2023-02-09 20:31:06 发布

阅读量208

点赞数

本文链接：https://blog.csdn.net/alexis333/article/details/101221533

版权

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()">&gt;&gt;</a><br/>
                <a href="#" onclick="selectAllleft()">&gt;&gt;&gt;</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()">&lt;&lt;</a><br/>
                <a href="#" onclick="selectAllright()">&lt;&lt;&lt;</a>
            </div>
        </td>
    </tr>
</table>

</body>
</html>