拖拽效果
- 拖拽思路 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;
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() {
var reg = /^\d{6,18}$/;
reg = /^[a-zA-Z].\d$/;
reg = /^.{6,}$/;
reg = /^ab{2,6}$/;
reg = /^[a-zA-Z_$]\w{0,}$/;
reg = /^010\d{8}$/;
reg = /^13\d{8}8$/;
reg = /^.{6}$/;
reg = /^\d[Aa].{0,6}$/
reg = /^\d.\w{6}$/;
reg = /^[\u4e00-\u9fa5]{2,4}$/;
reg = /^\d{5,12}$/;
reg = /^[1-9]\d{5}$/;
reg = /^(xxx\.zip)|(xxx\.rar)|(xxx\.tar)$/;
reg = /^\d{6}@qq\.com$/;
reg = /^1[3587]\d{9}$/;
reg = /^\d{17}(\d)|(x)$/;
reg = /^[a-zA-Z_]\w{5,17}$/;
reg = /a/;
reg = /^abc$/;
reg = /^ba{3,5}$/;
reg = /^5{6}$/;
reg = /^\d{6}$/;
reg = /^\w{6,18}$/;
reg = /^\D\w{5,17}$/;
reg = /^.{6,}$/;
reg = /^www\.baidu\ .com$/;
reg = /^3\+5$/;
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>
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("强");
}
}