01.png
02.png
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#t1{
border: 2px palevioletred solid;
width: 670px;
height: 590px;
}
#t2{
border: 2px palevioletred solid;
width: 610px;
height: 590px;
position: absolute;
left: 700px;
top: 60px;
}
.common{
border: 1px solid palevioletred;
}
#title{
text-align: center;
font-family: collegiate-normal;
color: palevioletred;
font-size: x-large;
}
#intxt{
color: gray;
height: 25px;
width: 140px;
border-radius: 5px;
border: 2px solid darkgray;
}
#btn{
color: whitesmoke;
height: 30px;
width: 121px;
border-radius: 5px;
border: 2px solid palevioletred;
background-color: palevioletred;
font-size: medium;
font: elephant;
}
#rimg{
border: solid 2px palevioletred;
}
</style>
<script type="text/javascript">
function mouseon(img,num){//this传参获取对象，不用$获取
img.style.border="6px solid pink";
img.style.borderRadius="10px";
var bigimg=document.getElementById("bigimg");
var rightimg=document.getElementById("rightimg");
bigimg.src="img/"+"pic"+num+".jpg";
rightimg.src="img/"+"img"+num+".png";
}
function mouseout(img){
img.style.border="";
img.className="common";
}
function rand1(){
var temp1=Math.random();
var temp2=temp1*10%4;
var picnum=Math.floor(temp2)+1;//1-4
var rimg=document.getElementById("rimg");
if(picnum==3){
rimg.src="img/pic03.png";
}
else{
rimg.src="img/pic0"+picnum+".jpg";
}
var temp3=temp1*100;
/*js保留两位小数的方法：
toFixed(2);//保留2位但结果为String类型
parseFloat(a);//将结果转换为float
*/
var txtnum=parseFloat(temp3.toFixed(2));
if(txtnum<50.00){
txtnum+=50;
}
var fon=document.getElementById("fon");
fon.innerHTML=txtnum+"%";
var hp=document.getElementById("hp");
hp.style.visibility="visible"
}
function getName(){
var nm=document.getElementById("intxt");
var who=document.getElementById("who");
who.innerHTML=nm.value;
}
</script>
</head>
<body>
<div id="title">❤Love You All！ My Xianrou Brothers ！❤</div><br />
<table id="t1">
<tr>
<td colspan="4" >
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table id="t2">
<tr>
<td><p align="center" style="font: larger elephant;color: palevioletred;"> 亲~请在框框内输入你的名字，由系统来匹配你最适合的男神哦~<br />(* ￣3)(ε￣ *)</p>
<div id="indiv" align="center">
<input type="text" name="intxt" id="intxt" value="" />
<input type="button" name="btn" id="btn" value="一键定制男神" onclick="rand1();getName();"/>
</div>
</td>
</tr>
<tr>
<td>
<div id="" align="center">
<img id="rimg" src=""/>
</div>
<p id="hp" style="font: larger elephant;color: palevioletred;visibility: hidden;text-align: center;"> 哇！原来<font id="who" style="color: lightblue;"></font>命中注定的男神是Ta！<br />经精确测算，你们的契合度是<br />
<font id="fon" style="color: hotpink;"></font>
</p>
</td>
</tr>
</table>
</body>
</html>
