Skip to content

Commit d852078

Browse files
CatsugarCatsugar
committed
222
1 parent 4a9b648 commit d852078

File tree

5 files changed

+152
-1
lines changed

5 files changed

+152
-1
lines changed

‎README.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -35,4 +35,6 @@
3535
* 任务二十九：有趣的鼠标悬浮模糊效果 https://catsuger.github.io/my-ife2017/Task29/Task29.html
3636
* 任务三十四：自定义checkbox， radio样式 https://catsuger.github.io/my-ife2017/Task34/Task34.html
3737
* 任务三十六：自定义网页右键菜单 https://catsuger.github.io/my-ife2017/Task36/Task36.html
38-
* 任务三十七：使用CSS实现折叠面板 https://catsuger.github.io/my-ife2017/Task37/Task37.html
38+
* 任务三十七：使用CSS实现折叠面板 https://catsuger.github.io/my-ife2017/Task37/Task37.html
39+
* 任务三十八：正则表达式之入门 https://catsuger.github.io/my-ife2017/Task38/Task38.html
40+
* 任务三十九：正则表达式之简易markdown文件解析器 https://catsuger.github.io/my-ife2017/Task39/Task39.html

‎Task38/Task38.css

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
@charset "utf-8";
2+
body,div,span,ul,li,a,h2,h3,h4,input,select,table{
3+
padding:0;
4+
margin:0;
5+
list-style:none;}
6+
body{
7+
font: 14px/24px "微软雅黑";
8+
color:#666;}
9+
h1{
10+
text-align:center;
11+
margin-top:30px;}
12+
a{text-decoration:none;}
13+
h3{margin-left:20PX;}
14+
/*********************以上是预设*****************************/
15+
.value{
16+
width:200px;
17+
height:30px;
18+
margin-left:20PX;}
19+
.button{
20+
width:60px;
21+
height:30px;
22+
font: 14px/30px "微软雅黑";}

‎Task38/Task38.html

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>正则表达式之入门</title>
6+
<link type="text/css" href="Task38.css" rel="stylesheet" />
7+
</head>
8+
<body>
9+
<h1>正则表达式之入门</h1>
10+
<h3>任务一：编写一个判断给定数字是否为手机号码的正则表达式</h3>
11+
<input type="text" class="value" id="value-1">
12+
<input type="button" class="button" id="button-1" value="测试">
13+
<h3>任务二：编写一个判断输入的字符串是否有相邻重复单词的正则表达式</h3>
14+
<input type="text" class="value" id="value-2">
15+
<input type="button" class="button" id="button-2" value="测试">
16+
</div>
17+
<script type="text/javascript">
18+
function btn() {
19+
document.getElementById("button-1").onclick=function(){
20+
var reg1 =/0?(13|15|18)\d{9}$/;
21+
var value1=document.getElementById("value-1").value;
22+
if(value1.match(reg1)===null || value1.length!==11){
23+
alert("不是手机号码。");}
24+
else{
25+
alert("是手机号码。");}
26+
27+
}
28+
document.getElementById("button-2").onclick=function(){
29+
var reg2=/\b([a-zA-Z]+)\s+\1\b/g;
30+
var value2=document.getElementById("value-2").value;
31+
if(value2.match(reg2)===null){
32+
alert("没有相邻重复单词");}
33+
else{
34+
alert("有相邻重复单词");}
35+
}
36+
}
37+
btn();
38+
</script>
39+
</body>
40+
</html>

‎Task39/Task39.css

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
@charset "utf-8";
2+
body,div,span,ul,li,a,h2,h3,h4,input,select,table{
3+
padding:0;
4+
margin:0;
5+
list-style:none;}
6+
body{
7+
font: 16px/24px "微软雅黑";
8+
color:#666;}
9+
/*********************以上是预设*****************************/
10+
.container{
11+
display: -webkit-flex;
12+
display: flex;
13+
flex-flow: row nowrap;
14+
justify-content: space-around;
15+
width:100%;}
16+
.container > div{
17+
-webkit-flex: 1 1 auto;
18+
flex: 1 1 auto;
19+
width: 50%;
20+
-webkit-transition: width 0.7s ease-out;
21+
transition: width 0.7s ease-out;
22+
box-sizing:content-box;
23+
height:100%;}
24+
/*.container > div:hover{ width: 200px;}*/
25+
.edit{
26+
background-color:#333;
27+
color:#FFF;
28+
border-right:5px dotted #999999;
29+
}
30+
.edit textarea{
31+
padding:5%;
32+
width:100%;
33+
height:100%;
34+
background-color:#333;
35+
color:#FFF;
36+
font: 16px/24px "微软雅黑";
37+
}
38+
.edit textarea:focus{
39+
outline:none;
40+
}
41+
.show{
42+
border-left:5px dotted #999999;
43+
background-color:#F99;
44+
color:#333;}
45+
.showbox{padding:5%;
46+
width:100%;
47+
height:100%;}

‎Task39/Task39.html

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>正则表达式之简易markdown文件解析器</title>
6+
<link type="text/css" href="Task39.css" rel="stylesheet" />
7+
</head>
8+
<body>
9+
<div class="container">
10+
<div class="edit" id="edit">
11+
<textarea style="border:0;overflow:auto" name="description" >这是编辑区，请输入：</textarea>
12+
</div>
13+
<div class="show" id="show">
14+
<div class="showbox" id="showbox">fsdftewrtwetr</div>
15+
</div>
16+
</div>
17+
<script type="text/javascript">
18+
function btn() {
19+
document.getElementById("button-1").onclick=function(){
20+
var reg1 =/0?(13|15|18)\d{9}$/;
21+
var value1=document.getElementById("value-1").value;
22+
if(value1.match(reg1)===null || value1.length!==11){
23+
alert("不是手机号码。");}
24+
else{
25+
alert("是手机号码。");}
26+
27+
}
28+
document.getElementById("button-2").onclick=function(){
29+
var reg2=/\b([a-zA-Z]+)\s+\1\b/g;
30+
var value2=document.getElementById("value-2").value;
31+
if(value2.match(reg2)===null){
32+
alert("没有相邻重复单词");}
33+
else{
34+
alert("有相邻重复单词");}
35+
}
36+
}
37+
btn();
38+
</script>
39+
</body>
40+
</html>

0 commit comments

Comments
 (0)