缘分测试 纯属娱乐
利用刚学到的知识 做了一个缘分测试 娱乐一下 
判断输入字符是否为空 还没加进去 后期会添加的
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>缘分测试</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
font-size: 22px;
}
.ceshi{
width: 600px;
height: 230px;
border: 2px solid #000;
margin: 0 auto;
}
#boy{
width: 180px;
height: 40px;
}
#girl{
width: 180px;
height: 40px;
}
input[type=button]{
width: 600px;
height: 40px;
}
#yuanfen{
width: 600px;
height: 120px;
background-color: #FFE4C4;
}
p{
width: 600px;
height: 30px;
background-color: #000000;
color: #fff;
line-height: 30px;
}
</style>
</head>
<body>
<script>
function yuan(){
//缘分测试思路：需要将双方名字转换成数值 根据不同数值随机生成不同的缘分语句
//获取男生名字
var boyname=document.getElementById("boy").value;
//获取女生名字
var girlname=document.getElementById("girl").value;
//将男生名字的每一个字转换成数值 一个字要转换一次，字数不确定，可以利用循环。用charCodeAt()函数将字符转换成Unicode编码
var boysum=0;//用来存放男孩名字的数值之和
for(var i=0;i<boyname.length;i++){
boysum=boysum+boyname.charCodeAt(i);
}
//将女生名字的每一个字转换成数值
var girlsum=0;//用来存放n女孩名字的数值之和
for(var k=0;k<girlname.length;k++){
girlsum=girlsum+girlname.charCodeAt(k);
}
//两个名字的数值相加 ，谁也不知道两个名字数值相加会是多少，
//要有一个数值范围 ，否则不好控制 控制在0~100之间 要用到取余 %100
//有了数值 下一步进行判断 划分数值段 满足不同的条件 出现不同的结果
var he=(boysum+90+girlsum*2)%100; //计算公式 可以变通 但是结果不要超过0~100
if(90<=he){
document.getElementById("yuanfen").innerHTML="你们的缘分是:"+he+"两情相悦！";
}
else if(70<=he){
document.getElementById("yuanfen").innerHTML="你们的缘分是:"+he+"爱就大胆去追！";
}
else if(50<=he){
document.getElementById("yuanfen").innerHTML="你们的缘分是:"+he+"主动就会有故事！";
}
else{
document.getElementById("yuanfen").innerHTML="你们的缘分是:"+he+"阿西吧！";
}
}
</script>
<div class="ceshi">
男生姓名：<input type="text" id="boy"/>
女生姓名：<input type="text" id="girl"/>
<input type="button" value="开始测试" onclick="yuan()">
<div id="yuanfen">
是否一直喜欢那个人，不敢开口? 缘分从这里开始！
</div>
<p>本页功能纯属娱乐，不要当真哈 最终解释权归本人所有</p>
</div>
</body>
</html>