<!DOCTYPE html >
<html>
<head>
<title>让你的生活充满爱</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
var i = 0;
function moveButton() {
var trueDivPx = document.getElementById("trueDiv");
var topPx = trueDivPx.style.top;
var leftPx = trueDivPx.style.left;
topPx = parseInt(topPx.substr(0, topPx.length - 2));
leftPx = parseInt(leftPx.substr(0, leftPx.length - 2));
if (i == 0 || i == 2 || i == 4) {
trueDivPx.style.top = (topPx + 100) + "px";
i++;
} else if (i == 1 || i == 3 || i == 5) {
trueDivPx.style.top = (topPx - 100) + "px";
i++;
} else {
document.getElementById("trueButton").value = "是";
document.getElementById("falseButton").value = "否";
}
}
function moveButton2() {
if (document.getElementById("falseButton").value == "否") {
document.getElementById("trueButton").value = "否";
document.getElementById("falseButton").value = "是";
i = 0;
}
}
function clickButton(){
alert("你竟然选择单身一辈子?你对生活绝望了吗?\n生活不止眼前的苟且,还有诗和远方的苟且!\n别灰心少年,生活总是起起落落,还落,再落,一直落……");
alert("所以,珍惜裆下吧,少年!即使是假装你的生活充满爱!");
}
function clickbeginButton(){
document.getElementById("beginDiv").remove();
document.getElementById("clickDiv").style.display="";
}
</script>
<style>
html {
width: 100%;
height: 100%;
}
body {
background-color: #4169E1;
font-size: 15px;
font-family: "Arial", "Tahoma", "微软雅黑", "雅黑";
line-height: 18px;
padding: 0px;
margin: 0px;
text-align: center;
}
div.div1 {
position: absolute;
width: 40%;
height: 40%;
top: 0;
font-weight: bold;
color: #fff;
left: 0;
bottom: 0;
right: 0;
margin: 300px 400px 400px 400px;
}
.button{
width: 100px;
line-height: 38px;
text-align: center;
font-weight: bold;
color: #fff;
text-shadow:1px 1px 1px #333;
border-radius: 5px;
margin:0 15px 0px 0;
position: relative;
overflow: hidden;
background-color:rgb(255, 251, 0);
}
td.td1 {
padding: 30px 0px 0px 0px;
}
.div2 {
position: absolute;
width: 40%;
height: 40%;
top: 0;
font-weight: bold;
color: #fff;
left: 0;
bottom: 0;
right: 0;
margin: 200px 400px 400px 400px;
background-color: rgb(2, 109, 36);
}
</style>
</head>
<body>
<div id="beginDiv" class="div1">
以人民的名义测试你!<br><br><br><br><br>
<input type="button" class="button" name="beginButton" id="beginButton" value="开始测试" οnclick="clickbeginButton()"> </div>
<div class="div2" style="display: none;" id="clickDiv" >
<div >
<table align="center">
<tr>
<td style="padding-top:20px ">
你是否想单身一辈子:
</td>
</tr>
<tr>
<td>
<div id="trueDiv" style="position:absolute;left:50px;top:130px">
<input type="button" class="button" name="trueButton" id="trueButton" value="否" οnmοuseοver="moveButton()" οnclick="clickButton()">
</div>
</td>
<td class="td1">
<div id="falseDiv" style="position:absolute;left:400px;top:130px">
<input type="button" class="button" name="falseButton" id="falseButton" value="是" οnmοuseοver="moveButton2()" οnclick="clickButton()">
</div>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
<html>
<head>
<title>让你的生活充满爱</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
var i = 0;
function moveButton() {
var trueDivPx = document.getElementById("trueDiv");
var topPx = trueDivPx.style.top;
var leftPx = trueDivPx.style.left;
topPx = parseInt(topPx.substr(0, topPx.length - 2));
leftPx = parseInt(leftPx.substr(0, leftPx.length - 2));
if (i == 0 || i == 2 || i == 4) {
trueDivPx.style.top = (topPx + 100) + "px";
i++;
} else if (i == 1 || i == 3 || i == 5) {
trueDivPx.style.top = (topPx - 100) + "px";
i++;
} else {
document.getElementById("trueButton").value = "是";
document.getElementById("falseButton").value = "否";
}
}
function moveButton2() {
if (document.getElementById("falseButton").value == "否") {
document.getElementById("trueButton").value = "否";
document.getElementById("falseButton").value = "是";
i = 0;
}
}
function clickButton(){
alert("你竟然选择单身一辈子?你对生活绝望了吗?\n生活不止眼前的苟且,还有诗和远方的苟且!\n别灰心少年,生活总是起起落落,还落,再落,一直落……");
alert("所以,珍惜裆下吧,少年!即使是假装你的生活充满爱!");
}
function clickbeginButton(){
document.getElementById("beginDiv").remove();
document.getElementById("clickDiv").style.display="";
}
</script>
<style>
html {
width: 100%;
height: 100%;
}
body {
background-color: #4169E1;
font-size: 15px;
font-family: "Arial", "Tahoma", "微软雅黑", "雅黑";
line-height: 18px;
padding: 0px;
margin: 0px;
text-align: center;
}
div.div1 {
position: absolute;
width: 40%;
height: 40%;
top: 0;
font-weight: bold;
color: #fff;
left: 0;
bottom: 0;
right: 0;
margin: 300px 400px 400px 400px;
}
.button{
width: 100px;
line-height: 38px;
text-align: center;
font-weight: bold;
color: #fff;
text-shadow:1px 1px 1px #333;
border-radius: 5px;
margin:0 15px 0px 0;
position: relative;
overflow: hidden;
background-color:rgb(255, 251, 0);
}
td.td1 {
padding: 30px 0px 0px 0px;
}
.div2 {
position: absolute;
width: 40%;
height: 40%;
top: 0;
font-weight: bold;
color: #fff;
left: 0;
bottom: 0;
right: 0;
margin: 200px 400px 400px 400px;
background-color: rgb(2, 109, 36);
}
</style>
</head>
<body>
<div id="beginDiv" class="div1">
以人民的名义测试你!<br><br><br><br><br>
<input type="button" class="button" name="beginButton" id="beginButton" value="开始测试" οnclick="clickbeginButton()"> </div>
<div class="div2" style="display: none;" id="clickDiv" >
<div >
<table align="center">
<tr>
<td style="padding-top:20px ">
你是否想单身一辈子:
</td>
</tr>
<tr>
<td>
<div id="trueDiv" style="position:absolute;left:50px;top:130px">
<input type="button" class="button" name="trueButton" id="trueButton" value="否" οnmοuseοver="moveButton()" οnclick="clickButton()">
</div>
</td>
<td class="td1">
<div id="falseDiv" style="position:absolute;left:400px;top:130px">
<input type="button" class="button" name="falseButton" id="falseButton" value="是" οnmοuseοver="moveButton2()" οnclick="clickButton()">
</div>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>