简单JavaScript案例

最新推荐文章于 2022-05-12 13:43:26 发布

naughtyp

最新推荐文章于 2022-05-12 13:43:26 发布

阅读量132

点赞数

本文链接：https://blog.csdn.net/weixin_45615655/article/details/101214259

版权

注册案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function checkForm() {
            var name=document.getElementById("username").value;
            var pw=document.getElementById("password").value;
            var rpw=document.getElementById("repassword").value;
            var mb=document.getElementById("mobile").value;
            var email=document.getElementById("email").value;
            if (name.length<6) {
                alert("用户名不足六位");
                return false;
            }
            if (pw!=rpw){
                alert("两次密码不一样");
                return false;
            }
            if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(mb)){
                alert("手机号格式不正确")
                return false;
            }
            if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(email)) {
                alert("邮箱格式不正确")
            }

        }
    </script>
</head>
<body>

<div>用户名：<input id="username" type="text"></div>
<div>密码：<input id="password" type="password"></div>
<div>确认密码：<input id="repassword" type="password"></div>
<div>手机号：<input id="mobile" type="number"></div>
<div>邮箱：<input id="email" type="text"></div>
<div><input value="注册" type="submit"onclick="checkForm()"></div>

</body>
</html>

图片轮播案例

<!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>
  <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=showPic;
    function showNext() {
      // clearTimeout(timer);
      showPic();
    }
    function showPic() {
        document.getElementById("pic").src=picArr[index];
      if (index<4){
          index++;
      }else {
          index=0
      }
      // setTimeout("showPic()",2000);
    }
    function showPic1() {
        document.getElementById("pic").src=picArr[index];
        if (index>0){
            index--;
        } else {
            index=4;
        }
        // setTimeout("showPic()",2000);
    }
    function showPre() {
        // clearTimeout(timer);
        showPic1();
    }
  </script>

<!-- 请在此处添加javascript代码实现需求 -->

</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>

Select案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function  selectOne() {
            var lefts=document.getElementById("leftSelect");
            var option=lefts.options;
            var rights=document.getElementById("rightSelect");
            for (var i=0;i<option.length;i++){
                var option1=option[i]
                if (option1.selected){
                    rights.appendChild(option1);
                }
            }
        }
        function  selectOne1() {
            var lefts1=document.getElementById("leftSelect");
            var rights1=document.getElementById("rightSelect");
            var options=rights1.options;
            for (var i=0;i<options.length;i++){
                var option1=options[i]
                if (option1.selected){
                    lefts1.appendChild(option1);
                }
            }
        }
        function  selectAll() {
            var lefts=document.getElementById("leftSelect");
            var option=lefts.options;
            var rights=document.getElementById("rightSelect");
            for (var i=0;i<option.length;i++){
                var option1=option[i];
                rights.appendChild(option1);
            }
        }
        function  selectAll1() {
            var lefts1=document.getElementById("leftSelect");
            var rights1=document.getElementById("rightSelect");
            var options=rights1.options;
            for (var i=0;i<options.length;i++){
                var option1=options[i];
                lefts1.appendChild(option1);
            }
        }
    </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="selectOne()">
                    <option>华为</option>
                    <option>小米</option>
                    <option>oppo</option>
                </select>
                <br/>
                <a href="#" onclick="selectOne()">&gt;&gt;</a><br/>
                <a href="#" onclick="selectAll()">&gt;&gt;&gt;</a>
            </div>
            <div style="float:right;">
                未有商品<br/>
                <select multiple="multiple" id="rightSelect" ondblclick="selectOne1()">
                    <option>苹果</option>
                    <option>诺基亚</option>
                    <option>魅族</option>
                </select>
                <br/>
                <a href="#" onclick="selectOne1()">&lt;&lt;</a><br/>
                <a href="#" onclick="selectAll1()">&lt;&lt;&lt;</a>
            </div>
        </td>
    </tr>
</table>
</body>
</html>