占卜网页

最新推荐文章于 2024-06-24 10:17:56 发布

P_ning

最新推荐文章于 2024-06-24 10:17:56 发布

阅读量401

点赞数

分类专栏：作业练习小项目

本文链接：https://blog.csdn.net/P_ning/article/details/99579222

版权

作业练习小项目专栏收录该内容

4 篇文章 0 订阅

订阅专栏

该网站模仿了黑马视频的一个课程案例,json也是引用该项目的json文件

html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="修饰.css" /><!--导入css-->
		<script src="../js库/jquery-2.1.0.js"></script><!--导入jQuery-->
		<script>
			$(function(){
				var url = "http://127.0.0.1:8848/Json/JSON%E6%96%87%E4%BB%B6/data.json";//json文件地址
				$.get(url,function(data){//这里的data是一个参数,与json文件无关
					//console.log(data);//会获取到一堆数据,也就是ajax最简单的异步请求网络					
				//good
					var goodcount = Math.floor(Math.random()*3+3);//floor取整
					while(goodcount>0){
						var i = Math.floor(Math.random()*data.length);
						var obj = data[i];
						$(".td2 ul").append("<li><div class='name'>"+obj.name+"</div><div class='describe'>"+obj.good+"</div></li>");
						goodcount--;
					}
				//bad
					var badcount = Math.floor(Math.random()*3+1);//floor取整
					while(badcount>0){
						var i = Math.floor(Math.random()*data.length);
						var obj = data[i];
						$(".td4 ul").append("<li><div class='name'>"+obj.name+"</div><div class='describe'>"+obj.bad+"</div></li>");
						badcount--;
					}
				});
			})
		</script>
	</head>
	<body>
		<div class="div1">
			<div>占卜</div>
<!--空白-->	<div class="div2"></div>
			 
<!--宜-->
			<div>
	<!--开始-->
				<div>
					<table cellspacing="0">
						<tr>
							<td class="td1">宜</td>
							<td class="td2">
								<ul>
									
								</ul>
							</td>
						</tr>
					</table>
				</div>
	<!--结束-->	
			
<!--空白-->	<div class="div2"></div>
			<!--不宜-->
				<div>
					<table cellspacing="0">
						<tr>
							<td class="td3">不宜</td>
							<td class="td4">
								<ul>
									
								</ul>
							</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
	</div>

	</body>
</html>

css文件

			*{
				margin: 0;
				padding: 0;
			}
			table{
				width: 600px;
			}
			td{
				width: 200px;
			}
			li{
				list-style: none;//去掉小黑点
			}
			.td1{
				background-color: #ffee44;
			}
			.td2{
				background-color: #ffffaa;
			}
			.td3{
				background-color: #ff4444;
			}
			.td4{
				background-color: #ffddd3;
			}
/* 居中 */	.td1,.td3{
				text-align: center;
				font-size: 30px;
			}
/* 位置 */	.div1{
				margin: 20%;
			}
/* 空白 */	.div2{
				height: 10px;
				background: white;
			}
			.name{
				padding-left: 10px;
				font-size: 30px;
			}
			.describe{
				font-size: 15px;
				padding-left: 10px;
				font-color: #;
			}

json文件

[
    {
        "name": "写单元测试",
        "good": "写单元测试将减少出错",
        "bad": "写单元测试会降低你的开发效率"
    },
    {
        "name": "洗澡",
        "good": "你几天没洗澡了？",
        "bad": "会把设计方面的灵感洗掉"
    },
    {
        "name": "锻炼一下身体",
        "good": "",
        "bad": "能量没消耗多少，吃得却更多"
    },
    {
        "name": "抽烟",
        "good": "抽烟有利于提神，增加思维敏捷",
        "bad": "除非你活够了，死得早点没关系"
    },
    {
        "name": "白天上线",
        "good": "今天白天上线是安全的",
        "bad": "可能导致灾难性后果"
    },
    {
        "name": "重构",
        "good": "代码质量得到提高",
        "bad": "你很有可能会陷入泥潭"
    },
    {
        "name": "使用%t",
        "good": "你看起来更有品位",
        "bad": "别人会觉得你在装逼"
    },
    {
        "name": "跳槽",
        "good": "该放手时就放手",
        "bad": "鉴于当前的经济形势，你的下一份工作未必比现在强"
    },
    {
        "name": "招人",
        "good": "你面前这位有成为牛人的潜质",
        "bad": "这人会写程序吗？"
    },
    {
        "name": "面试",
        "good": "面试官今天心情很好",
        "bad": "面试官不爽，会拿你出气"
    },
    {
        "name": "提交辞职申请",
        "good": "公司找到了一个比你更能干更便宜的家伙，巴不得你赶快滚蛋",
        "bad": "鉴于当前的经济形势，你的下一份工作未必比现在强"
    },
    {
        "name": "申请加薪",
        "good": "老板今天心情很好",
        "bad": "公司正在考虑裁员"
    },
    {
        "name": "晚上加班",
        "good": "晚上是程序员精神最好的时候",
        "bad": ""
    },
    {
        "name": "在妹子面前吹牛",
        "good": "改善你矮穷挫的形象",
        "bad": "会被识破"
    },
    {
        "name": "命名变量\"%v\"",
        "good": "",
        "bad": ""
    },
    {
        "name": "写超过%l行的方法",
        "good": "你的代码组织的很好，长一点没关系",
        "bad": "你的代码将混乱不堪，你自己都看不懂"
    },
    {
        "name": "提交代码",
        "good": "遇到冲突的几率是最低的",
        "bad": "你遇到的一大堆冲突会让你觉得自己是不是时间穿越了"
    },
    {
        "name": "代码复审",
        "good": "发现重要问题的几率大大增加",
        "bad": "你什么问题都发现不了，白白浪费时间"
    },
    {
        "name": "开会",
        "good": "写代码之余放松一下打个盹，有益健康",
        "bad": "小心被扣屎盆子背黑锅"
    },
    {
        "name": "打lol",
        "good": "你将有如神助",
        "bad": "你会被虐的很惨"
    },
    {
        "name": "晚上上线",
        "good": "晚上是程序员精神最好的时候",
        "bad": "你白天已经筋疲力尽了"
    },
    {
        "name": "修复BUG",
        "good": "你今天对BUG的嗅觉大大提高",
        "bad": "新产生的BUG将比修复的更多"
    },
    {
        "name": "设计评审",
        "good": "设计评审会议将变成头脑风暴",
        "bad": "人人筋疲力尽，评审就这么过了"
    },
    {
        "name": "需求评审",
        "good": "",
        "bad": ""
    },
    {
        "name": "上微博",
        "good": "今天发生的事不能错过",
        "bad": "今天的微博充满负能量"
    },
    {
        "name": "上B站",
        "good": "还需要理由吗？",
        "bad": "满屏兄贵亮瞎你的眼"
    },
    {
        "name": "玩跳一跳",
        "good": "今天破纪录的几率很高",
        "bad": "除非你想玩到把手机砸了"
    }
]

P_ning

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
占卜网页

该网站模仿了黑马视频的一个课程案例html文件<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="修饰.css" />...
复制链接

扫一扫

专栏目录