[JQuery实现] 测测你今天的运势如何？（程序猿老黄历）

本文链接：https://blog.youkuaiyun.com/SolarL/article/details/89884343

本文介绍如何利用JQuery、JSON和ajax实现程序猿版的老黄历。内容涉及JSON数据格式、ajax异步请求以及JQuery的DOM操作。通过案例详细讲解了从页面初始化到事件绑定的JQuery开发步骤，最后提供了实现老黄历的代码示例和CSS样式。适合有一定JavaScript基础的读者学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用程序猿老黄历，来测测你的运势吧

写在前面
结束语

写在前面

本篇文章主要内容是通过 JQuery 的方式来实现 DOM 操作，将会向大家介绍 JQuery 的简单开发，相比 JavaScript 更加方便快捷，提高代码的简洁性，JavaScript 的入门参照文章 https://blog.youkuaiyun.com/SolarL/article/details/89852420
本案例的实现还用到了 JSON 和 ajax 最简单的异步请求网络。

1. 什么是 JSON ？

JSON([JavaScript Object Notation) 是一种轻量级的数据交换格式。当然 XML 也是一种数据交换格式，大家可以了解一下。
JSON格式

JSON对象
{ key1:value}   
{"username":"SolarL","password":"123456"}

JSON数组
[{ key1:value},{ key1:value},{ key1:value}]

2. 什么是 ajax 请求？

概述
通过远程 HTTP GET 请求载入信息。
这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。
函数调用格式
jQuery.get(url, [data], [callback], [type])
返回值:XMLHttpRequestjQuery.get(url, [data], [callback], [type])
参数列表
urlString待载入页面的URL地址。
data (可选)Map待发送 Key/value 参数。
callback (可选)Function载入成功时回调函数。
type (可选)String返回内容格式，xml, html, script, json, text, _default。

3. JQuery 简单开发

什么是 JQuery
JQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。JQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
JQuery的核心特性
具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。JQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等.
JQuery的作用
1.写更少的代码,做更多的事情: write Less ,Do more；
2. 将我们页面的JS代码和HTML页面代码进行分离。
JQuery 入门开发

<script>
   		//js文档加载完成的事件
   		window.onload = function(){
   			alert("window.onload   111");
   		}
   		
   		window.onload = function(){
   			alert("window.onload   222");
   		}
   		
   		/*文档加载完成的事件*/
   		jQuery(document).ready(function(){
   		 	alert("jQuery(document).ready(function()");
   		});
   		/*
   		 	jQuery  简写成 $
   		 */
   		$(document).ready(function(){
   		 	alert("$(document).ready(function()");
   		});
   		
   		/*
   			最简单的写法 (常用写法)
   		*/
   		$(function(){
   			alert("$(function(){");
   		});
   		
   	</script>

JQ的开发步骤 (将页面的JS代码和HTML页面代码进行分离)

导入JQ相关的文件
文档加载完成事件: $(function) : 页面初始化的操作: 绑定事件, 启动页面定时器
确定相关操作的事件
事件触发函数
函数里面再去操作相关的元素

JQ 中的DOM操作

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM操作</title>
    <script src="../js/jquery-1.11.0.js" type="text/javascript"></script>
    <script>
        //文档加载完成事件
        $(function () {
            $("#btn1").click(function () {
                //$("#dv1").append("<font color='red' size='7'>来，搞点事吧</font>");
                //$("#dv1").prepend("<font color='#ffd700' size='7'>来，搞点事吧</font>")
                //$("#dv1").after("<font color='#ffd700' size='7'>来，搞点事吧</font>")
                $("<font color='#ffd700' size='7'>来，搞点事吧</font>").appendTo("#dv1");
            })
        })
    </script>
</head>
<body>
<input type="button" value="来啊，点我啊！！" id="btn1"/><br/>
<div id="dv1">
    添加内容！！
</div>

</body>
</html>

4. 程序猿老黄历实现

实现页面效果展示
具体实现过程请大家参照代码中的注释理解，阅读代码之前，请先学习以上三部分知识，这样才能更好理解代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>程序员老黄历</title>
     <!--外部引入CSS样式-->
    <link href="../css/laohuangli.css" rel="stylesheet"/>
    <!--导入JQuery-->
    <script src="../js/jquery-1.11.0.js" type="text/javascript"></script>

    <script>
        $(function () {
            //涉及到请求链接, 动态显示数据
            var url = "data.json";
            //ajax  最简单异步请求网络
            $.get(url, function (jsonArr) {
                var goodCount = Math.floor(Math.random() * 3 + 4);
                while (goodCount > 0) {
                    //取几条数据
                    //随机去取一条数据
                    var index = Math.floor(Math.random() * jsonArr.length);
                    var obj = jsonArr[index];

                    $(".good ul").append("<li>" +
                        "<div class='name'>" + obj.name + "</div><div class='description'>" + obj.good + "</div></li>")
                    goodCount--;
                }
                var badCount = Math.floor(Math.random() * 3 + 3);
                while (badCount > 0) {
                    //取几条数据
                    //随机去取一条数据
                    var index = Math.floor(Math.random() * jsonArr.length);
                    var obj = jsonArr[index];

                    $(".bad ul").append("<li>" +
                        "<div class='name'>" + obj.name + "</div><div class='description'>" + obj.bad + "</div></li>")
                    badCount--;
                }
            });
        })
    </script>
</head>
<body>
<div class="container">
    <div class="title">
        程序员老黄历&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://blog.youkuaiyun.com/SolarL/article/details/89884343">详情</a>
    </div>
    <div class="good">
        <div class="title">
            <table>
                <tr>
                    <td>宜</td>
                </tr>
            </table>
        </div>
        <div class="content">
            <ul>

            </ul>
        </div>
        <div class="clear"></div>
    </div>

    <div class="split"></div>

    <div class="bad">
        <div class="title">
            <table>
                <tr>
                    <td>忌</td>
                </tr>
            </table>
        </div>
        <div class="content">
            <ul>

            </ul>
        </div>
        <div class="clear"></div>
    </div>
</div>
</body>
</html>

案例中的 css 样式请参照以下的代码

//laohuangli.css
body * {
	font-family:"Consolas","Microsoft Yahei", Arial, sans-serif;
}

body {
	background: white;
	margin: 0;
	padding: 0;
}

.container {
	width: 320px;
	margin: 0 auto 50px;
}

.container>.title {
	color: #bbb;
	font-weight: bold;
	margin-bottom: 10px;
	background: #555;
	padding: 5px 15px;
}

.split, .clear {
	clear: both;
	height: 1px;
	overflow-y: hidden;
}

.good, .bad {
	clear: both;
	position: relative;
}

.bad {
	/*top: -1px;*/
}

.good .title, .bad .title {
	float: left;
	width: 100px;
	font-weight: bold;
	text-align: center;
	font-size: 30pt;
	position:absolute;
	top:0;
	bottom:0;
}

.good .title>table, .bad .title>table {
	position:absolute;
	width:100%;
	height:100%;
	border:none;
}

.good .title {
	background: #ffee44;
}


.bad .title {
	background: #ff4444;
	color: #fff;
}

.good .content, .bad .content {
	margin-left: 115px;
	padding-right: 10px;
	padding-top: 1px;
	font-size:15pt;
}

.good {
	background: #ffffaa;
}

.bad {
	background: #ffddd3;
}

.content ul {
	list-style: none;
	margin:10px 0 0;
	padding:0;
}

.content ul li {
	line-height:150%;
	font-size: 15pt;
	font-weight: bold;
	color: #444;
}

.content ul li div.description {
	font-size: 11pt;
	font-weight: normal;
	color: #777;
	line-height: 110%;
	margin-bottom: 10px;
}

需要用到的 data.json 文件，当然内容也可自己实现和更改，制作属于自己的老黄历

[
    {
        "name": "写单元测试",
        "good": "写单元测试将减少出错",
        "bad": "写单元测试会降低你的开发效率"
    },
    {
        "name": "洗澡",
        "good": "你几天没洗澡了？",
        "bad": "会把设计方面的灵感洗掉",
        "weekend": true
    },
    {
        "name": "锻炼一下身体",
        "good": "",
        "bad": "能量没消耗多少，吃得却更多",
        "weekend": true
    },
    {
        "name": "抽烟",
        "good": "抽烟有利于提神，增加思维敏捷",
        "bad": "除非你活够了，死得早点没关系",
        "weekend": true
    },
    {
        "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": "",
        "weekend": true
    },
    {
        "name": "在妹子面前吹牛",
        "good": "改善你矮穷挫的形象",
        "bad": "会被识破",
        "weekend": true
    },
    {
        "name": "撸管",
        "good": "避免缓冲区溢出",
        "bad": "强撸灰飞烟灭",
        "weekend": true
    },
    {
        "name": "浏览成人网站",
        "good": "重拾对生活的信心",
        "bad": "你会心神不宁",
        "weekend": true
    },
    {
        "name": "命名变量\"%v\"",
        "good": "",
        "bad": ""
    },
    {
        "name": "写超过%l行的方法",
        "good": "你的代码组织的很好，长一点没关系",
        "bad": "你的代码将混乱不堪，你自己都看不懂"
    },
    {
        "name": "提交代码",
        "good": "遇到冲突的几率是最低的",
        "bad": "你遇到的一大堆冲突会让你觉得自己是不是时间穿越了"
    },
    {
        "name": "代码复审",
        "good": "发现重要问题的几率大大增加",
        "bad": "你什么问题都发现不了，白白浪费时间"
    },
    {
        "name": "开会",
        "good": "写代码之余放松一下打个盹，有益健康",
        "bad": "小心被扣屎盆子背黑锅"
    },
    {
        "name": "打DOTA",
        "good": "你将有如神助",
        "bad": "你会被虐的很惨",
        "weekend": true
    },
    {
        "name": "晚上上线",
        "good": "晚上是程序员精神最好的时候",
        "bad": "你白天已经筋疲力尽了"
    },
    {
        "name": "修复BUG",
        "good": "你今天对BUG的嗅觉大大提高",
        "bad": "新产生的BUG将比修复的更多"
    },
    {
        "name": "设计评审",
        "good": "设计评审会议将变成头脑风暴",
        "bad": "人人筋疲力尽，评审就这么过了"
    },
    {
        "name": "需求评审",
        "good": "",
        "bad": ""
    },
    {
        "name": "上微博",
        "good": "今天发生的事不能错过",
        "bad": "今天的微博充满负能量",
        "weekend": true
    },
    {
        "name": "上AB站",
        "good": "还需要理由吗？",
        "bad": "满屏兄贵亮瞎你的眼",
        "weekend": true
    },
    {
        "name": "玩FlappyBird",
        "good": "今天破纪录的几率很高",
        "bad": "除非你想玩到把手机砸了",
        "weekend": true
    }
]

结束语

以上就是程序猿老黄历的全部实现内容，感兴趣的小伙伴可以参照以上代码实现自己的老黄历，当然，对于以后准备从事 Java 后台开发的对css样式以及老黄历的部分代码只要能看懂就好，明白其实现逻辑和原理就好，更好的掌握 JQuery 的简单实现。
小哥哥，小姐姐们，觉得文章还不错就给我点个赞吧，鼓励一下我吧，哈哈哈哈哈…