-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathphone.html
118 lines (103 loc) · 3.66 KB
/
phone.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=640" />
<title>Darfoo</title>
<style type="text/css">
body,html,p,h1{ margin: 0; padding: 0;}
a{ text-decoration: none;}
body{ font-family: Helvetica, Arial, "Microsoft YaHei";}
.container{ margin: 0 auto; background: url("images/p-body-bg.png") no-repeat; width: 640px; height: 960px;}
.email-hd{ position: relative; padding-left: 63px; height: 157px; background: #fff;}
.email-hd .lab-email{ position: absolute; top: 54px; font-size: 41px; font-style: italic; color: #ababab;}
.email-hd .email{ position: relative; margin-top: 47px; width: 400px; border: 0; background: none; outline: none; z-index: 1; font-size: 42px;}
.btn-send{ display: inline-block; width: 156px; height: 156px; line-height: 138px; text-indent: 14px; font-size: 50px; color: #fff; background: url("images/send-bg.png") no-repeat; border: 0; vertical-align: top;}
.logo{ margin: 120px auto 175px; width: 262px; height: 262px; background: url("images/p-logo.png") no-repeat; text-indent: -999px; overflow: hidden;}
.words{ margin: 0 auto; width: 340px; font-size: 33px; color: #777777; text-align: center;}
.words strong{ display: block; font-size: 50px; color: #5c5b5b;}
</style>
<!--
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn-send").on("tap",function(){
alert(0);
});
});
</script>
<script type="text/javascript" src="js/jquery.mobile-1.3.2.min.js"></script>
-->
</head>
<body>
<div class="container">
<div class="email-hd">
<label for="email" class="lab-email" id="lab-email">Your Email here...</label>
<input type="text" id="email" class="email" onfocus="FocusEmail()" onblur="BlurEmail()" />
<a href="javascript:void(0);" onclick="SendEmail()" class="btn-send" id="btn-send">Send</a>
</div>
<h1 class="logo">Darfoo Tech</h1>
<p class="words"><strong>Hi,</strong>Do you want to help your parents with us?</p>
</div>
<div id="test"></div>
<script type="text/javascript">
/*remove the space of ends*/
function trim(str){
return str.replace(/(^\s*)|(\s*$)/g, "");
}
/*click the send button*/
function SendEmail(){
if(!CheckEmail()){
return false;
}
var email = document.getElementById("email");
var url = "test.txt";
var data = "email=" + email;
AjaxRequest(url,data);
}
/*post ajax request*/
function AjaxRequest(url, data){
var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function(){
//Ajax success
if (xmlhttp.readyState==4 && xmlhttp.status==200){
alert("Ajax success!The contents in test.txt is : " + xmlhttp.responseText);
}
}
xmlhttp.open("post",url,true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(data);
}
/*focus email*/
function FocusEmail(){
var label = document.getElementById("lab-email");
label.style.color = "#fff";
}
/*blur email*/
function BlurEmail(){
var label = document.getElementById("lab-email");
var email = document.getElementById("email");
var val = trim(email.value);
if(val == ""){
label.style.color = "#ababab";
}
}
/*check email empty or invalid*/
function CheckEmail(){
var email = document.getElementById("email");
var val = trim(email.value);
if(val == ""){
alert("Please enter your Email...");
return false;
}
var reg = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if(!reg.test(val)){
alert("Invalid Email!");
return false;
}
return true;
}
</script>
</body>
</html>