jq写的随机土味情话机

最新推荐文章于 2023-11-15 17:27:49 发布

DZY_hungry

最新推荐文章于 2023-11-15 17:27:49 发布

阅读量346

点赞数

分类专栏： jq 文章标签： jquery

本文链接：https://blog.csdn.net/DZY_hungry/article/details/107948582

版权

jq 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>随机土味情话生成</title>
		<script type="text/javascript" src="jquery.js"></script>
		<style>
			div{
				border: 1px solid black;
				width: 600px;
			}
			p{
				margin-left: 10px;
			}
		</style>
	</head>
	<body>
		            <div>
					<p class="myName"><label><b>请输入自定义的名字：</b><input id="writeName" type="text" placeholder="洪飞"></label></p>
					
					<p><label><input name="choice" id="fair" value="公制" type="radio" checked="checked">公制</label>
					<label><input name="choice" id="unfair" value="美制" type="radio">美制</label></p>
					
					<p><button id="joke">随机生成笑话</button></p>
					<p id="show1" style="display: none;">“<span class="one"></span>你有闻到一些奇怪的味道吗？”
					“没有，什么味道？”
					“看到了你以后，空气都变甜了。”
					在<span class="tempreture"></span>之下，我依旧很爱你。</p>
					<p id="show2" style="display: none;">“<span class="one"></span>你知道你跟星星对于我来说有什么区别吗？”
					“星星在天上，你在我心里。”
					在<span class="tempreture"></span>之下，我依旧很爱你。</p>
					<p id="show3" style="display: none;">“<span class="one"></span>你知道牛肉要怎么吃才最好吃吗？”
					“牛肉我喂你吃最好吃。”
					在<span class="tempreture"></span>之下，我依旧很爱你。</p>
					<p id="show4" style="display: none;">“<span class="one"></span>我喜欢你已经超过两分钟了”
					“无法撤回了。”
					在<span class="tempreture"></span>之下，我依旧很爱你。</p>
					<p id="show5" style="display: none;">“<span class="one"></span>你是可爱的女孩”
					“我就是可爱本人。”
					在<span class="tempreture"></span>之下，我依旧很爱你。</p>
					<p id="show6" style="display: none;">“<span class="one"></span>你一定是碳酸饮料成精了”
					“要不然为什么我每次见到你都开心得要冒泡呢？”
					在<span class="tempreture"></span>之下，我依旧很爱你。</p>
					<p id="show7" style="display: none;">“<span class="one"></span>甜有100种方式，一种是吃糖，一种是吃蛋糕”
					“剩下98种是想你。”
					在<span class="tempreture"></span>之下，我依旧很爱你。</p>
					</div>
		<script>
			$(document).ready(function(){
				$('#joke').click(function(){
					if($('#writeName').val()==''){
					$('.one').text('洪飞');
					}else{
					let honey = $('#writeName').val();
					console.log(honey);
					$('.one').text(honey);}
					let choose = $('input:radio:checked').val();
					console.log(choose);
					if(choose == '公制'){
						$('.tempreture').text('35摄氏度');
					}else{
						$('.tempreture').text('95华氏度');
					}
					let pic;
					const num = ['1','2','3','4','5','6','7'];
					pic = num[Math.floor(Math.random()*num.length)];
					console.log(pic);
					for(let i = 1;i<8;i++){
						if(i==pic){
							$('#show'+i).css('display','block');
							$('#show'+i).css('width','400px');
							$('#show'+i).css('background','yellow');
						}else{
							$('#show'+i).css('display','none');
						}
					}
				})
			})	
		</script>
	</body>
</html>