master

分支 (1)

管理

管理

master

fate
/
x3.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>缘分测试</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				font-family: "华文中宋";
				text-decoration: none;
				list-style: none;
				box-sizing: border-box;
			}
			body{
				background-image: url(img/bj02.jpeg);
				background-repeat: no-repeat;
				background-size: cover;
				width: 100vw;
				height:100vh;
			}

			.box {
				width: 500px;
				height: 530px;
				background-color: wheat;
				margin: 50px auto;
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
				padding: 30px;
				border-radius: 20px;
				color:brown;
			}

			.box .title {
				font-size: 40px;
				color: palevioletred;
				font-weight: bold;
				text-align: center;
				margin-bottom: 20px;
			}

			.box .info p {
				line-height: 30px;
				font-size: 18px;
			}

			.form {
				margin-top: 20px;
			}

			.form input {
				width: 100%;
				height: 40px;
				margin-bottom: 10px;
				outline: none;
				border-radius: 100px;
				border: 1px solid #87CEEB;
				padding: 12px;
			}

			.form button {
				display: block;
				width:80px;
				height: 40px;
				margin: auto;
				outline: none;
				cursor: pointer;
				border: none;
				font-size: 20px;
				background-color: palevioletred;
				border-radius: 20px;
				margin-top: 15px;
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
				color:white;
			}
			.form button:hover{
				transform: scale(1.1);
			}
			.box #res{
				margin-top: 10px;
				line-height: 30px;
				margin-top: 15px;

			}
		</style>
	</head>
	<body>
		<div class="box">
			<p class="title">缘 分 测 试</p>
			<div class="info">
				<p>说明：姓名缘分测试</p>
				<p>1、输入双方姓名点击测试</p>
				<p>2、缘分测试结果属于系统测算</p>
				<p>3、建议遵循内心想法，放手一搏</p>
				<p>4、信息仅供参考</p>
			</div>
			<div class="form">
				<input tupe="text" id="boy" placeholder="请输入男孩子的名字" />
				<input tupe="text" id="girl" placeholder="请输入女孩子的名字" />
				<button id="test">测 试</button>
			</div>
			<p id="res">测算结果</p>
		</div>
		<script>
			var oboy = document.getElementById("boy");
			var ogirl = document.getElementById("girl");
			var otest = document.getElementById("test");
			var ores = document.getElementById("res");
			otest.onclick = function(){
			var boy = 0;
			var girl = 0;
				for(var i = 0; i<oboy.value.length; i++){
					boy +=oboy.value.charCodeAt(i);
				}
				for(var j = 0; j<ogirl.value.length; j++){
					girl +=ogirl.value.charCodeAt(j);
				}
				var res = (boy+girl)%100;
				if(res >= 0 && res<30){
					ores.innerHTML=oboy.value+"和"+ogirl.value+"的缘分值为："+res+"分。"+"上辈子相爱相杀，这辈子就彼此放过吧！";
				}else if(res >= 30 && res<60){
					ores.innerHTML=oboy.value+"和"+ogirl.value+"的缘分值为："+res+"分。"+"强扭的瓜甜不甜你们自己看嘛！就不说啥了。";
				}else if(res >= 60 && res<90){
					ores.innerHTML=oboy.value+"和"+ogirl.value+"的缘分值为："+res+"分。"+"男方记得多让一让你的女朋友，不要惹她生气，才能幸幸福福甜甜蜜蜜。";
					}
					else if(res >= 90 && res<100){
						ores.innerHTML=oboy.value+"和"+ogirl.value+"的缘分值为："+res+"分。"+"在一起！在一起！在一起！";
						}else{
						ores.innerHTML="系统出错了！程序员小姐姐正在抢休！";
					}
			}
		</script>
	</body>
</html>