第十二章拖拽效果和正则表达式_正则表达式拖拽-CSDN博客

本文链接：https://blog.csdn.net/qq_45983879/article/details/109657900

拖拽效果

拖拽思路 onmousedown onmousemove onmouseup
1.首先为需要拖拽的对象添加一个onmousedown事件
记录:鼠标点击某个对象时的内部偏移量
e.offsetX e.offsetY
2.鼠标在文档上移动
要想让操作的元素动起来,该元素必须有定位
移动的过程,实际上改变,元素的left和top
3.停止移动,需要触发onmouseup鼠标抬起时,取消移动
document.οnmοusemοve=null
在html中，元素可用onclick、ondblclick、onmouseover、onmouseout、onmousedown、onmouseup、onmousemove来对鼠标的各种事件进行响应。本例演示了鼠标对元素的单击、双击、悬停、移走、按下、松开、在元素内的移动来更改元素的背景色
案例

     <style>
      * {
          padding: 0;
          margin: 0;
      }
      
      #box {
          width: 100px;
          height: 100px;
          position: absolute;
          background-color: brown;
          cursor: move;
      }
    </style>
    <body>
    <div id="box"></div>
    </body>
    <script>
  var oBox = document.querySelector("#box");
  oBox.addEventListener("mousedown", function(evt) {
      var e = evt || event;
      var ofx = e.offsetX;
      var ofy = e.offsetY;
      document.onmousemove = function(evt) {
          var e = evt || event;
          var x = e.pageX - ofx;
          var y = e.pageY - ofy;
          if (x < 0) {
              x = 0;
          }
          if (y < 0) {
              y = 0;
          }
          var maxLeft = window.innerWidth - oBox.offsetWidth;
          var maxtTop = window.innerHeight - oBox.offsetHeight;
          if (x > maxLeft) {
              x = maxLeft;
          }
          if (y > maxtTop) {
              y = maxtTop;
          }
          oBox.style.left = x + "px";
          oBox.style.top = y + "px";
      }
      document.onmouseup = function() {
          document.onmousemove = null;
      }
    });
    var num = 0;
    //ondblclick是鼠标的双击
    oBox.addEventListener("dblclick", function() {
      num += 1;
      if (num % 2 === 0) {
          oBox.style.width = "100%";
          oBox.style.height = "100%";
      } else {
          oBox.style.width = "100px";
          oBox.style.height = "100px";
      }
    });
    </script>

复选框案例

    <body>
          请选择你的爱好:<br>
          <input type="checkbox">全选/全不选<br>
          <input type="checkbox" name="fav">唱歌
          <input type="checkbox" name="fav">跳舞
          <input type="checkbox" name="fav">篮球
          <input type="checkbox" name="fav">游戏
          <input type="checkbox" name="fav">影视剧
          <input type="checkbox" name="fav">逛街<br>
          <button type="button" id="first">全选</button>
          <button type="button" id="btn">全不选</button>
          <button type="button" id="btns">反选</button>
    </body>
    <script>
          var oFirst = document.getElementById("first");
          var oInput = document.querySelectorAll("input");
          var oBtn = document.querySelector("#btn");
          var oBtn1 = document.getElementById("btns");
          oFirst.onclick = function(evt) {
                var e = evt || event;
                oInput[0].checked = "checked";
                for (var i = 1; i < oInput.length; i++) {
                      oInput[i].checked = "checked";
                      }
                }
          oBtn.onclick = function(evt) {
                var e = evt || event;
                oInput[0].checked = "checked";
                for (var i = 1; i < oInput.length; i++) {
                      oInput[i].checked = "";
                      }
                }
          oBtn1.onclick = function(evt) {
                var e = evt || event;
                oInput[0].checked = "";
                for (var i = 1; i < oInput.length; i++) {
                      if (oInput[i].checked) {
                            oInput[i].checked = "";
                            } else {
                            oInput[i].checked = "checked";
                            }
                      }
          }
    </script>

正则表达式

什么是正则表达式
为什么要使用正则表达式
正则表达式(regular expression)是一个描述正则规则的对象,如:只能出现字母,只能出现数字,前三个必须是数字等.
前端往往有大量的表单数据校验的工作,采用正则表达式会使得数据校验的工作大大减轻,如邮箱验证,手机号码,等等.比起用字符串的函数来判断简单,易用
正则表达式的组成:普通字符或者特殊字符
定义:
1.字面量
var reg=/普通字符或者特殊字符/修饰符
2.构造方法
var reg=new RegExp(“a”,“i”);
console.log(reg.test(“a”));
var reg=new RegExp("\d");
console.log(reg.test(“1”));

正则中的特殊字符

单个字符
^:正则的开始
$:正则的结束
.:元字符,表示任意一个字符
\.:表示转义字符  表示的是.
+:表示其前面紧挨着的字符至少出现1次,等价{1,}
*:表示其前面出现的字符至少出现过0次,至多出现1次,等价{0,1}
|:表示的是或者
组合字符:
\d:0-9之间的任意一个数字 \d只占一个位置
\D:除了\d
\w:数字,字母,下划线0-9 a-z A-Z _
\W:除了\w
\s:空格或者空白等
\S:除了\s
括号:
{m,n}:表示括号前面紧挨着的字符至少出现m个,至多出现n个
以b开头 至少出现3个a 至多出现 5个a /^ba{3,5}$/
{m}:表示括号前面紧挨着的字符只能出现m个
{m,}:表示括号前面紧挨着的字符至少出现m个
[]:表示括号内的任意一个字符
[a-z]:表示任意一个小写字母
[^ ]:表示非括号内的任意一个字符
():一般或连用表示优先级
[\u4e00-\u9fa5]:任意一个中文字符

案例展示

  <body>
    <input type="text" id="one">
    <button type="button">测试</button>
  </body>
  <script>
  var oText = document.querySelector("#one");
  var oBtn = document.querySelector("button");
  oBtn.onclick = function() {
      //只能用数字开头，长度在6-18位之间
      var reg = /^\d{6,18}$/;
      //以字母开头，数字结尾，中间任意一个字符
      reg = /^[a-zA-Z].\d$/;
      //密码不能少于6位的字符
      reg = /^.{6,}$/;
      //以a开头   b字符至少出现2个，至多出现6个
      reg = /^ab{2,6}$/;
      //变量的命名正则表达式(不能用数字开头 由字母、数字、下划线 、$组成)
      reg = /^[a-zA-Z_$]\w{0,}$/;
      //以010开头的座机号(后面是8位数字)
      reg = /^010\d{8}$/;
      //手机号以13开头，以8结尾
      reg = /^13\d{8}8$/;
      //密码只能用6个
      reg = /^.{6}$/;
      //第一位是数字，第二位是A或a，后面至多出现6个字符
      reg = /^\d[Aa].{0,6}$/
          //第一位是数字，第二位是任意一个字符,后面只能由字母、数字、下划线组成，共8位
      reg = /^\d.\w{6}$/;
      //写出中国人姓名正则    2--4个中文
      reg = /^[\u4e00-\u9fa5]{2,4}$/;
      //写一个qq号的正则，至少5位  至多12位数字
      reg = /^\d{5,12}$/;
      //邮编检验 共6位数字 第一位不能是0  
      reg = /^[1-9]\d{5}$/;
      //检验压缩包  xxx.zip或xxx.rar或xxx.tar 三个格式
      reg = /^(xxx\.zip)|(xxx\.rar)|(xxx\.tar)$/;
      //电子邮件 (@符号前后使用单词字符即可)   232323@qq.com
      reg = /^\d{6}@qq\.com$/;
      //手机号 1 3|5|8|7 
      reg = /^1[3587]\d{9}$/;
      //身份证 （18位  考虑最后一位可能为x）
      reg = /^\d{17}(\d)|(x)$/;
      //账户名只能使用数字字母下划线，不能数字开头，长度在6--18之间 
      reg = /^[a-zA-Z_]\w{5,17}$/;
      //至少包含一个a
        reg = /a/;
  	//只包含一个a
  	reg = /^abc$/;  //^$一定是连着一起用的
  	//以b开头  至少3个a  至多5个a
  	reg = /^ba{3,5}$/;
  	//6个5
  	reg = /^5{6}$/;
  	//邮编   6位数字
  	reg = /^\d{6}$/;
  	//定义一个由字母或数字或下划线组成的用户名   范围在6,18之间    
  	reg = /^\w{6,18}$/;
  	//定义一个由字母或数字或下划线组成的用户名  开头不能是数字   范围在6,18之间
  	reg = /^\D\w{5,17}$/;
  	//定义一个密码  至少6位   
  	reg = /^.{6,}$/;
  	//www.baidu.com
  	reg = /^www\.baidu\ .com$/;
  	//写一个  3+5 
  	reg = /^3\+5$/;
  	//以 13 或 15 开头的手机号
  	reg = /^(13|15)\d{9}$/
  	reg = /^1[35]\d{9}$/
  	reg = /^[a-zA-Z_0-9]$/;
  	//两个中文
  	reg =/^[\u4e00-\u9fa5]{2}$/;
  	//空格 空白
  	reg = /^\s$/;
  	//[^  ]表示非括号内的任意一个字符
  	reg = /^[^abc]$/;
      console.log(reg.test(oText.value));
    }
    </script>

测试密码的强弱
案例

    //js部分的代码
    //只能
    var regNum=/^\d+$/;
    var regLetter=/^[a-zA-Z]+$/;
    var regChar=/^[!@#]+$/
    //包含
    var _regNum=/\d+/;
    var _regLetter=/[a-zA-Z]+/;
    var -regChar=/[!@#]/;
    var oText=document.querySelector("input");
    var oBtn=document.querySelector("button");
    oBtn.onclick=function(){
          if(regNum.test(oText.value)||regLetter.test(oText.value)||regChar.test(oText.value)){
                alert("弱");
          }else if(_regNum.test(oText.value)||_regLetter.test(oText.value)||_regChar.test(oText.value)){
                alert("中");
          }else{
                alert("强");
          }
    }