javascrpit初始学习

最新推荐文章于 2023-05-04 08:21:27 发布

Lord_zang

最新推荐文章于 2023-05-04 08:21:27 发布

阅读量195

点赞数

本文链接：https://blog.csdn.net/Lord_zang/article/details/101208453

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function checkform() {
            var input1=document.getElementById("username").value;
            if(input1.length<6){
                alert("用户名太短");
                return false;
            }
            var inputE=document.getElementById("email").value;
           if (!(/[@]/.test(inputE))){
               alert("邮箱格式错误");
               return false;
           }
            var input2=document.getElementById("password").value;
            var input3=document.getElementById("repassword").value;
            if(input2!=input3){
                alert("两次密码不一致");
                return false;
            }
            var input4=document.getElementById("mobile").value;
            if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(input4))){
                alert("手机号错误");
                return false;
            }
        }
    </script>
</head>
<body>
<div>
    <form action="#">
    <div>用户名:<input id="username" type="text"></div>
    <div>邮箱:<input id="email" type="text"></div>
    <div>密码:<input id="password" type="password"></div>
    <div>确认密码:<input id="repassword" type="password"></div>
    <div>手机号码:<input id="mobile" type="number"></div>
    <input type="submit" value="注册" onclick="checkform()">
    </form>
</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(../img/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(../img/spirte.png) no-repeat right top;
	background-color:#000;
	cursor: pointer;	
	opacity:0.4;
	filter:alpha(opacity=40);}
</style>
<!-- 请在此处添加javascript代码实现需求 -->
<script>
  var picarr=new Array();
  var index=0;
  var timer=0;
  picarr[0]="../img/01.jpg";
  picarr[1]="../img/02.jpg";
  picarr[2]="../img/03.jpg";
  picarr[3]="../img/04.jpg";
  picarr[4]="../img/05.jpg";
  window.onload=nextYe;
  function showNext() {
      clearTimeout(timer);
      nextYe();
  }
  function nextYe() {
      document.getElementById("pic").src=picarr[index];

      if(index<(picarr.length-1)){
          index++;
      }
      else {
          index=0;
      }
      timer=setTimeout("nextYe()",2000);
  }
  function showPre() {
      if(index>0){

          index--;
      }
      else {
          index=picarr.length-1;
      }
      clearTimeout(timer);
      document.getElementById("pic").src=picarr[index];
  }
</script>
</head>

<body>
<div class="wrapper">
  <div id="focus">
    <ul>
      <li><a href="#" target="_blank"><img src="../img/01.jpg" alt="" id="pic"/></a>
      <div class="preBtn" onclick="showPre()"></div>
      <div class="nextBtn" onclick="showNext()"></div> 
      </li>      
    </ul>     
  </div>
</div>
</body>
</html>

<!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 selectAll() {
            var leftS=document.getElementById("leftSelect");
            var option=leftS.options;
            var rightS=document.getElementById("rightSelect");
            for (var i=0;i<option.length;){
                var option1=option[i];
                rightS.appendChild(option1);
            }
        }
        function selectrOne() {
            var leftS=document.getElementById("leftSelect");
            var rightS=document.getElementById("rightSelect");
            var option=rightS.options;
            for (var i=0;i<option.length;i++){
                var option1=option[i];
                if (option1.selected){
                    leftS.appendChild(option1);
                }
            }
        }
        function selectrAll() {
            var leftS=document.getElementById("leftSelect");
            var rightS=document.getElementById("rightSelect");
            var option=rightS.options;
            for (var i=0;i<option.length;){
                var option1=option[i];
                leftS.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">
                <p>已有商品</p>
                <select multiple="multiple" id="leftSelect" ondblclick="selectOne()">
                <option>华为</option>
                    <option>小米</option>
                    <option>诺基亚</option>
                </select>
                <br />
                <a href="#" onclick="selectOne()">&gt;&gt;</a>
                <a href="#" onclick="selectAll()">&gt;&gt;&gt;</a>
            </div>
            <div style="float: right">
                <p>未选商品</p>
                <select multiple="multiple" id="rightSelect" ondblclick="selectOne()">
                    <option>苹果</option>
                    <option>oppo</option>
                    <option>vivo</option>
                </select>
                <br />
                <a href="#" onclick="selectrOne()">&gt;&gt;</a>
                <a href="#" onclick="selectrAll()">&gt;&gt;&gt;</a>
            </div>
        </td>

    </tr>

</table>
</body>
</html>

Lord_zang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascrpit初始学习

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script> function checkform() { var input1...
复制链接

扫一扫