HTML
-
html : html标签
-
head: 头文件
-
body : html主题
-
title : 页面标题
-
meta : 申明编码
<meta charset="utf-8" />单标签 -
br : 换行
<br/>单标签 -
标题 :
<h1> - <h6> -
a : 链接
-
img :图像
-
<!-- 代码 -->: 注释 -
嵌入元素(音频、视频) :
<embed src="文件名">
属性
<h1 align="center"> 大标题<h1/> 居中显示
页面背景色或背景图片
<body bgcolor="pink" background="bg.png">
Hello World
</body>
表格
<table 边框:border="1" 背景色:bgcolor 背景图片:background 单元格间距:cellspacing >
<caption>表标题<caption/>
<tr>
<th>表头
<th/>
<tr/>
<tr>
<td 跨列:colspan 跨行:rowspan>表内容
<td/>
<tr/>
<table/>
列表
无序列表
<ul>
<li><li/>
<ul/>
有序列表,默认数字
<ol type="a">
<li><li/>
<ol/>
定义列表
<dl>
<dt>术语</dt>
<dd>对术语的解释</dd>
</dl>
图片
<img src="图片url" alt="对图片的说明">
form表单
<body bgcolor="pink">
<form action="提交的url" method="get" target="_blank"> <!--target="_blank"新窗口打开-->
账号 :<input type="text" name="键值对的键"/> <br />
密码 :<input type="password" name="passwd" /> <br />
单选按钮 :<input type="radio" name="sex" value="boy" checked /> 男 <!--单选按钮的name必须相同-->
<input type="radio" name="sex" value="girl"/> 女
<br />
复选框 :<input type="checkbox" name="复选框" value="1"/> 复选框1
<input type="checkbox" name="复选框" value="2" checked="checked"/> 复选框2
<input type="checkbox" name="复选框" value="3"/> 复选框3
<br />
下拉框 : <select name="list">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3" selected="selected">选项3</option> <!--selected="selected" 默认选定-->
</select>
按钮 :<input type="button" /><br />
重置 : <input type="reset" />
提交: <input type="submit" />
</form>
</body>
滚动marquee
<body bgcolor="pink">
<marquee scrolldelay="5" scrollamount="20" direction="right">
<!-- scrolldelay :滚动的延时时间 -->
<!-- scrollamount : 滚动的速度 -->
滚动文字或者图片
</marquee>
</body>
特殊字符实体
字符实体由 “&” + “实体名/实体号” + “;” 三部分组成
空格 &plusmm; ± ∴ ∴
CSS
<html>
<head>
<meta charset="utf-8" />
<title>标题</title>
<style>
div{
width: 100%;
height: 100px;
background-color: aqua;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>标题</title>
<style>
div{
width: 100px;
height: 100px;
background-color: aqua;
}
#id_1{
background-color: aquamarine;
}
.class_1{
background-color: green;
}
.class_2{
width: 200px;
background-color: #00FFFF;
}
</style>
</head>
<body>
<div></div>
<div id="id_1"></div>
<div class="class_1"></div>
<div class="class_1 class_2"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>标题</title>
<style>
p{
color: bisque;
font-family: "黑体";
width: 100px;
height: 100px;
background-color: azure;
}
.class_1{
color: black;
background-color: bisque;
font-family: "宋体";
font-size: 20px;
text-align: center; /* 文本s水平对齐方式 */
line-height: 100px; /* 文本垂直对齐 */
}
</style>
</head>
<body>
<p>好好学习</p>
<p class="class_1">天天向上</p>
</body>
</html>
内外边距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>标题</title>
<style>
.div-1{
width: 200px;
height: 200px;
background-color: gray;
margin-top: 20px; /* 外边距的宽度 */
}
.div-2{
width: 100px;
height: 100px;
background-color: aqua;
padding: 10px; /* 内边距的宽度 */
}
</style>
</head>
<body>
<div class="div-1"> </div>
<div class="div-2"></div>
</body>
</html>
position 相对/绝对位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>标题</title>
<style>
.div-1{
width: 200px;
height: 200px;
background-color: gray;
position: relative; /* 相对位置 相对于当前行的前一行的位置*/
top:40px;
}
.div-2{
width: 100px;
height: 100px;
background-color: aqua;
position: absolute; /* 绝对位置 在整个页面的位置或者在当前被包围标签的绝对位置*/
top:40px;
left: 40px;
}
</style>
</head>
<body>
<div class="div-1">
<div class="div-2"></div>
</div>
</body>
</html>
引入样式 :
-
行内
<p style="color:pink;font-size:30px;">行内样式<p/> -
内嵌
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>标题</title> <style> p{ color: pink; font-size: 30px; } </style> </head> <body> <p>内嵌样式<p/> </body> </html> -
外部引入样式
html文件
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>标题</title> <link rel="stylesheet" href="css.css"> </head> <body> <p>行内样式<p/> </body> </html>
css文件
p{ color: pink; font-size: 30px; }
照片墙
html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>照片墙</title> <link rel="stylesheet" href="./css/style.css"> </head> <body> <div id="box"> <img src="https://wx1.sinaimg.cn/mw690/9b6feba7ly3gd1tofgumkj21f01g3kjm.jpg" class="pic pic1"/> <img src="https://wx3.sinaimg.cn/mw690/9b6feba7ly3gd1tokuf2kj21jo1kwx6r.jpg" class="pic pic2"/> <img src="https://wx2.sinaimg.cn/mw690/9b6feba7ly1gbzok7i8qsj21jk2bckjn.jpg" class="pic pic3"/> <img src="https://wx1.sinaimg.cn/mw690/9b6feba7ly1gdj4mmv3w3j219c1w04qp.jpg" class="pic pic4"/> <img src="https://wx4.sinaimg.cn/mw690/9b6feba7ly3gdmlulh21bj21jo1kwu0x.jpg" class="pic pic5"/> <img src="https://wx3.sinaimg.cn/mw690/9dc1a827gy1gca68o17mvj20u0105e89.jpg" class="pic pic6"/> <img src="https://wx1.sinaimg.cn/mw690/9b6feba7ly1gd9t7yxg53j21sc2dsu0y.jpg" class="pic pic7"/> <img src="https://wx1.sinaimg.cn/mw690/9b6feba7ly3gd1tohz7f7j21jo1kwkjm.jpg" class="pic pic8"/> <img src="https://wx4.sinaimg.cn/mw690/9b6feba7ly3gam2gnidooj20qn0zkh7n.jpg" class="pic pic9"/> <img src="https://wx1.sinaimg.cn/mw690/9b6feba7ly1gahdym3vvtj20yl1fvkjl.jpg" class="pic pic10"/> </div> </body> </html>
css
body{
background-color: #ffd8de;
}
#box{
width: 960px;
height: 540px;
margin: 150px auto;
}
/* 设置图片样式 */
.pic{
width: 150px;
padding: 5px;
background-color: #ffffff;
/* 设置阴影 : 水平 垂直 虚化值 颜色*/
box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
/* 设置动画过渡时间 */
transition:all 0.6s;
/* 相对位置,用于设置图片层级关系 */
position: relative;
}
.pic1{
/* 设置图片角度 */
transform: rotate(5deg);
}
.pic2{
/* 设置图片角度 */
transform: rotate(20deg);
}
/* 设置鼠标移动效果 */
#box img:hover{
transform: rotate(0deg) scale(1.5);
/*设置层级关系 */
z-index: 99;
}
JavaScript
基本语法
JavaScript是一种具有面向对象能力的、解释型的程序设计语言
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
// 弹窗
alert("这是弹窗!!!");
// 输出日志
console.log("输出日志");
// 创建对象
var now = new Date();
var year = now.getFullYear() ;
var year1 = now.getYear() + 1900; //year1等同于year
var month = now.getMonth() + 1;
var day = now.getDate();
var w = now.getDay(); // 获取星期
var week = Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六")
alert(year + "年" + month + "月" + day + "日" + week[w])
</script>
</head>
<body>
</body>
</html>
数据类型 :
-
数值型
整型 : 123 // 十进制 0123 // 八进制 以0开头 0x123// 十六进制 以0x开头 浮点型 :整数部分 + 小数部分 可以用科学计数法表示 314159 = 3.14159E5
-
字符串
可以用双引号或者单引号括起来
-
布尔型
只有true和false
-
转义字符
\b 退格 \n 换行 \t Tab符 \r 回车 \' 单引号 \" 双引号 \\ 反斜杠
-
空值
null 用于定义空的或者不存在的引用 car a=null
-
未定义值
已经声明,单没有赋值 var a; alter(a) 显示的是undefined关键字,用来代表未定义值
-
typeof
查看数据类型
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> var a = 10; var b = "10"; alert("a的数据类型是:" + typeof(a) +" " + "b的数据类型数:" + typeof(b)) //a的数据类型是:number b的数据类型数:string </script> </head> <body> </body> </html>
赋值运算符
a += b 相当于 a = a + b a -= b 相当于 a = a - b a *= b 相当于 a = a * b a /= b 相当于 a = a / b
算数运算符
+ - * / % ++ --
++: //累加 <script> var i = 1; var j = 0; j = i++; //先用后加 console.log(i); //2 console.log(j); //1 </script> <script> var i = 1; var j = 0; j = ++i; //先加后用 console.log(i); //2 console.log(j); //2 </script>
除法运算时,若0作为除数,返回的结果是 "Infinity"
比较运算
>、<、>=、<=
== 等于 只判断值是否相等
=== 绝对等于 判断值和数据类型是否相等
!= 不等于 只判断值是否不等
!== 绝对不等于 判断值和数据类型是否不等
<script>
var a = 1;
var b = "1";
console.log(a==b) // true
</script>
逻辑运算
-
&& 逻辑与 只有两个都为真结果才是真
-
|| 逻辑或 有一个真结果就是真
-
! 逻辑非 !真=假
条件运算符
条件运算符是JavaScript支持的一种特殊的三元运算符
基本语法 : 操作数?true的结果;false的结果; var a=10; var b=5; var c=a>b?a;b; // 10
流程控制
if
if (条件) {
// 条件成立执行
}
if (条件) {
//条件成立执行
}else{
//条件不成立执行
}
// 示例
<script>
var a=3;
var b=5;
if (a>b){
console.log(a);
}else{
console.log(b)
}
</script>
if (条件){
//成立执行
}else if (条件){
//成立执行
}else if (条件){
//成立执行
}...
else{
}
switch
switch (变量){
case 值1:
等于值1后执行的代码;
break;
case 值2:
等于值2后执行的代码;
break;
...
default:
默认结果;
}
//示例
<script>
var i=007;
switch (i){
case 001:
alert("不是特工");
break;
case 007:
alert("是特工!!!");
break;
default:
alert("数据有误!")
}
</script>
for
for(初始值;条件;运算法则){
循环体;
}
//示例
<script>
var sum = 0;
for(var i=1;i<=10;i++){
sum += i
}
alert("1+2+3+ ...+" + (i-1) + "的总和是 :" + sum)
</script>
while
while(条件){
循环体
}
//示例
<script>
/* 打印数字一到十 */
var num=1;
while(num<=10){
console.log(num);
num++;
}
</script>
do - while
do{
循环体
}while(条件)
//示例
<script>
/* 打印数字一到十 */
var num=1;
do{
console.log(num);
num++;
}while(num<=10);
</script>
函数
定义函数-调用函数
function 函数名([参数1,参数2...]){
函数体;
[return 返回值;]
}
示例 :
html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="./js/js.js"></script> </head> <body> </body> </html>
javascript
function test(){
alert("自定义函数!!")
};
test();
// 两个数相加
function sum_(a,b){
var sum = a + b;
return sum;
}
var c = sum_(1,3);
alert(c)
匿名函数
var 变量名=function([参数1,参数2...]){
函数体;
return 返回值;
}
//示例
// 计算a的b次方
var r = function(a,b){
var s=Math.pow(a,b); // 计算a的b次方
alert(s);
};
r(2,3)
####
-
//将字符串后的str类型的代码重新启动
var str="alert('hello!!!')"
eval(str)
//通过js写html代码并插入到页面中
document.write("<h1>大标题</h1>")
编码解码
//编码 encodeURI var str1 = "编码测试123"; var encode1 = encodeURI(str1) alert(encode1) // %E7%BC%96%E7%A0%81%E6%B5%8B%E8%AF%95123 //解码 decodeURI var str2 = "%E7%BC%96%E7%A0%81%E6%B5%8B%E8%AF%95123" var decode1=decodeURI(str2); alert(decode1) // 编码测试123
form结合函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function sum_1(){
var a = Number(form_1.num_1.value);
var b = Number(form_1.num_2.value);
alert(a+b)
}
</script>
</head>
<body>
<p>加法运算</p>
<form action="" method="" name="form_1">
<input type="text" name="num_1" placeholder="第一个数"/>
+
<input type="text" name="num_2" placeholder="第二个数"/>
<input type="button" value="计算" onclick="sum_1()" />
</form>
</body>
</html>
事件
-
什么是事件
-
例如在页面载入完毕时,将触发onload(载入事件);
-
当用户单击按钮时,将触发按钮的onclick事件
-
-
常用事件
onabort : 对象载入被中断时触发 onblur : 元素或窗口本身失去焦点时触发 onchange : 改变<select>元素中的选项或其他表单元素失去焦点,且在其获取焦点后内容发生改变时触发 onerror : 出现错误时触发 onfocus : 任何元素或窗口本身获得焦点时触电 onkeydown :键盘键(包括shift、alt等)被按下时触发 onkeypress : 键盘键被按下,并产生一个字符时触发(意思是按下shift或alt不触发) onkeyup : 释放键盘上的按键时触发 onload : 页面完全载入后释放 onunload : 页面完全卸载后触发
onclick : 单击鼠标左键时触发/光标的焦点在按钮上时,按下Enter时也会触发 ondblclick : 双击左键时触发 onmousedown : 单击任何一个鼠标按键时触发 onmousemove : 鼠标在摸个元素上移动时持续触发 onmouseout : 鼠标从指定的元素上移开时触发 onmouseover : 鼠标移动到某个元素时触发 onmouseup : 释放任意一个鼠标按键时触发 onreset : 单击重置按钮时, 在<form>上触发 onresize : 窗口或框架的大小发生改变时触发 onscroll : 在任何带滚动条的元素或窗口上滚动时触发 onselect : 选中文本时触发 onsubmit : 单击提交按钮时,在<form>上触发
事件处理
事件处理程序是用于响应某个事件而执行的处理程序,事件处理程序可以是任意的javascript语句,通常使用函数来对事件进行处理
-
第一种方式,在html中绑定
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> function save_(){ alert("保存按钮被点击") } </script> </head> <body> <form> <input type="button" name="save" value="保存" onclick="save_()" /> </form> </body> </html> -
第二种方式,在javascript中绑定
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #div_01{ width: 100px; height: 100px; background: #FFC0CB; } </style> </head> <body> <div id="div_01"></div> <script> //定位标签 var div_=document.getElementById("div_01"); //给div绑定单击事件 div_.onclick = function(){ alert("方块被点击") } </script> </body> </html><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #div_01{ width: 100px; height: 100px; background: #ffff00; } </style> </head> <body> <div id="div_01"></div> </body> <script> //定位标签 var div_=document.getElementById("div_01"); //给div绑定移动到元素时触发事件 div_.onmouseover = function(){ //修改div的背景色 var r = Math.random() * 255; var g = Math.random() * 255; var b = Math.random() * 255; console.log(r+","+g+","+b) div_.style.background="rgb("+r+","+g+","+b+")"; } </script> </html>窗口全部加载完毕再执行的操作
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> // console.log("加载...") 此行不注释的结果 : 加载...正在加载中...全部加载完毕 // 上行代码注释后的结果 : 正在加载中...全部加载完毕 window.onload=function(){ console.log("全部加载完毕") }; window.onresize=function(){ // 窗口大小改变时触发 alert("窗口大小已改变") } </script> </head> <body> <script> console.log("正在加载中...") </script> </body> </html><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <body> <input type="text" id="text_1" /> <input type="button" value="提交" id="btn" /> <hr> <p id="p_1"><p/> <script> var btn=document.getElementById("btn"); btn.onclick=function(){ var input_text = document.getElementById("text_1").value; var p=document.getElementById("p_1"); // p.textContent=input_text; // p.innerHTML=input_text; p.innerText=input_text; // 清空输入框 document.getElementById("text_1").value=""; } </script> </body> </html> // textContent、innerText、innerHTML的区别和差异 1 、textContent属性可以获取指定节点的文本及其后代节点中文本内容，也包括<script>和<style>元素中的内容； innerText也是获取指定节点的文本及其后代节点中文本内容，但不能获取<script>和<style>元素中的内容。 innerHTML是获取HTML文本结构内容。 2、textContent会获取display:none的节点的文本；而innerText好像会感知到节点是否呈现一样，不作返回。 也就是说，textContent能够获取元素的所有子节点上的文本，不管这个节点是否呈现；而innerText只返回呈现到页面上的文本。 3、要注意设置文本时被替换的可不只是文本了；这时textContent 、innerText属性相当于innerHTML属性，会把指定节点下的所有子节点也一并替换掉。 4、由于 innerText 受 CSS 样式的影响，它会触发重排（reflow），但 textContent 不会。计算器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="box"> <p id="result"></p> <a>AC</a> <a>/</a> <a>7</a> <a>8</a> <a>9</a> <a>*</a> <a>4</a> <a>5</a> <a>6</a> <a>-</a> <a>1</a> <a>2</a> <a>3</a> <a>+</a> <a>0</a> <a>.</a> <a>=</a> </div> <script> var num1=""; //s符号前 var num2=""; // 符号后 var fuhao=""; // 获取输入内容 var label=document.getElementById("result"); // 获取所有标签 var btns=document.getElementsByTagName("a"); // 通过循环得到所有的标签 for (var i=0;i<btns.length;i++){ // 获取单个按钮 var btn=btns[i] // 设置按钮点击事件 btn.onclick=function(){ // 获取按钮上的文字 var t=this.innerText; switch (t){ case "AC": label.innerHTML=""; break; case "+": fuhao="+" break; case "-": fuhao="-" break; case "*": fuhao="*" break; case "/": fuhao="/" break; case "=": // 获取两个数并转换成数值型 if (num1==""){ alert("请输入第一个数!!!") }else if(fuhao==""){ alert("请输入符号") }else if(num2==""){ alert("请输入第二个数") }else{ // 转换两个数并计算 num1=parseFloat(num1) num2=parseFloat(num2) switch (fuhao){ case "+": label.innerHTML=num1 + num2; break; case "-": label.innerHTML=num1 - num2; break; case "*": label.innerHTML=num1 * num2; break; default: label.innerHTML=num1 / num2; break; } num1=""; num2=""; fuhao=""; } break; default: // 判断输入的是第几个数 if (fuhao==''){ // 第一个数 num1=num1+t; label.innerHTML=num1; }else{ // 第二个数 num2=num2+t; label.innerHTML=num2 }; } } } </script> </body> </html>
正则表达式
一个正则表达式是由普通字符(如a~z)以及特殊字符(成为元字符)组成的模式字符串
该模式字符串描述在查找文字主题时待匹配的的一个或者多个字符串. 正则表达式作为一个模板,将某个字符模式与所搜索的字符串进行匹配
正则表达式的创建
-
语法 :
/正则表达式/修饰符(可选) -
修饰符
修饰符 描述 i 忽略大小写匹配 g 执行全局匹配(查找所以有匹配而非在找到第一个匹配后停止匹配) m 执行多行匹配 -
使用字符串方法
-
search和replace
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> // 创建正则表达式 var re_1=/china/i; // 正则查找china , i表示不区分大小写 var str="l live in china and china is ver good!" // 使用正则 var s = str.search(re_1); // search() 查找匹配内容的位置(索引为0,且计算空格) // search() 只匹配第一个符合的字符串 // 找不到返回 -1 console.log(s) // 结果: 10 var s1=str.replace(re_1,"HeBei") // replace 匹配并替换第一个相匹配的 // 加g参数匹配所以并替换 console.log(s1) // 打印结果 :l live in HeBei and china is ver good! </script> </head> <body> </body> </html>
-
-
使用RegExp对象
在javascript中,RegExp对象是一个预定义了属性和方法的正则表达式对象 test()方法是一个正则表达式方法,用于检测一个字符串是否匹配某个模式.如果字符串中国含有匹配文本,则返回true,否则返回false. var reg=/e/; var str = "The best things in live are free!" // 判断str中是否有e,有的话返回true,否则返回false alter(reg.test(str));
exec()方法,用于检索字符串中的正则表达式的匹配.该函数组返回一个数组,存放匹配的结果.若未匹配到,则返回null var reg=/e/; var str= "The best things in life are free!" //判断str中是否有e,有则返回e,否则返回null alert(reg.exec(str));
量词
表达式 描述 n+ 匹配任何包括至少一个n的字符串 n* 匹配任何包含0个或多个n的字符串 n? 匹配任何包含0个或一个n的字符串
-
正则表达式模式
方括号用于查找某个范围内的字符
表达式 描述 [abc] 查找方括号之间的任意字符 [0-9] 查找任何从0至9的数字 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> var reg1=/^[0-9]{2,4}$/ //从前到后匹配2~4位 var reg2=/[a-z 0-9 A-Z]/ //可以这样写 var reg3=/^[0-9 a-z]{2,4}$/ var str1="5852"; var str2="5"; var str3="a11_" alert(reg1.test(str1)); //返回true alert(reg2.test(str2)); //返回true alert(reg3.test(str3)); //返回false </script> </head> <body> </body> </html>小括号
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> var reg=/^(a){3}$/; //匹配3个a var reg1=/^(a){3}/; //匹配开头是3个a的 var str="aaaa"; alert(reg.test(str)); //false alert(reg1.test(str)); //true </script> </head> <body> </body> </html>元字符
表达式 描述 \d 查找数字 \s 查找空白字符 \b 匹配单词边界 \w 匹配字母、数字、下划线、汉字 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> var reg1=/^\d$/; //匹配一个数字 var reg2=/^\w/; //匹配一个数字、字母、汉族、下划线 var str="1"; alert(reg1.test(str)); //true alert(reg2.test(str)); //true </script> </head> <body> </body> </html>
正则表达式案例
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./js/js.js"></script>
<script>
function isQQ(){
// 获取输入框信息
var qq=document.getElementById("qq").value;
if(isReg_QQ(qq)){
alert("QQ合法");
}else{
alert("QQ不合法!!!");
}
}
function isTel(){
var tel_num=document.getElementById("tel").value;
if(isReg_tel(tel_num)){
alert("电话号码合法")
}else{
alert("电话号码不合法")
}
}
function isEmail(){
var email=document.getElementById("email").value;
if(isReg_Email(email)){
alert("邮箱合法")
}else{
alert("邮箱不合法")
}
}
</script>
</head>
<body>
QQ:<input type="text" id="qq" placeholder="请输入被检测qq号码"/>
<input type="button" value="检测" onclick="isQQ()" />
<hr>
Tel:<input type="text" id="tel" placeholder="请输入被检测电话号码"/>
<input type="button" value="检测" onclick="isTel()" />
<hr>
Email:<input type="text" id="email" placeholder="请输入被检测邮箱" />
<input type="button" value="检测" onclick="isEmail()" />
</body>
</html>
javascript
/*
*p判断QQ是否合法
*最少五位,最多11位
* 第一位非0
*/
function isReg_QQ(qq){
var reg=/^[1-9][0-9]{4,10}$/;
return reg.test(qq);
}
/**
*手机号
* 十一位
* 1开头
* 第二位 3 4 5 7 8 9
*/
function isReg_tel(tel){
var reg=/^1(3|4|5|7|8|9)[0-9]{9}$/ // |表示或的意思
return reg.test(tel)
}
/**
* 邮箱
* 若干字符@若干字符.若干字符
*/
function isReg_Email(e){
var reg=/^[a-zA-Z0-9_-]{2,12}@[a-zA-Z0-9]{2,4}\.[a-zA-Z]{2,3}$/;
return reg.test(e);
}
