JQ实现程序员老黄历 

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title>程序员老黄历</title>
  6         <style>
  7             .time{
  8                 color: black;
  9                 font-size: 20px;
 10                 font-weight: 600;
 11                 line-height: 40px;
 12             }
 13             
 14             #good,#bad{
 15                 list-style: none;
 16                 margin: 0;
 17                 padding: 0;
 18             }
 19             
 20             .name{
 21                 color: black;
 22                 font-weight: bold;
 23                 size: 25px;
 24             }
 25             
 26             .item{
 27                 color: darkgray;
 28                 font-size: 13px;
 29             }
 30             
 31         </style>
 32         <script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
 33         <script>
 34             $(function(){
 35                 var now = new Date();
 36                 var day;
 37                 switch(now.getDay()){
 38                     case 0:
 39                         day = "星期天";
 40                         break;
 41                         case 1:
 42                         day = "星期一";
 43                         break;
 44                         case 2:
 45                         day = "星期二";
 46                         break;
 47                         case 3:
 48                         day = "星期三";
 49                         break;
 50                         case 4:
 51                         day = "星期四";
 52                         break;
 53                         case 5:
 54                         day = "星期五";
 55                         break;
 56                         case 6:
 57                         day = "星期六";
 58                         break;
 59                 }
 60                 $("#nowTime").append("<font class='time'>" + "今天是" + now.getFullYear() + "年" + (now.getMonth()+1) + "月" + now.getDate() + "日 " + day + "</font>");
 61                 
 62                 var url = "http://127.0.0.1:8020/JQuery/json/data.json";
 63                 $.get(url,function(data){
 64                     var goodLength = Math.floor(Math.random()*2+3);
 65                     var badLength = Math.floor(Math.random()*2+3);
 66                     var good = new Array(goodLength);
 67                     var bad = new Array(badLength);
 68                     for(var i=0;i<goodLength;i++){
 69                         var flag = true;
 70                         good[i] = Math.floor(Math.random()*29);
 71                         //防止适宜各项内部重复
 72                         for(var j=0;j<i;j++){
 73                             if(good[i] == good[j]){
 74                                 i--;
 75                                 flag = false;
 76                             }
 77                         }
 78                         if(flag){
 79                             $("#good").append("<li><font class='name'>" + data[good[i]].name + "</font></br><font class='item'>" + data[good[i]].good + "</font></li>");
 80                         }
 81                     }
 82                     for(var i=0;i<badLength;i++){
 83                         bad[i] = Math.floor(Math.random()*29);
 84                         var flag1 = true;
 85                         var flag2 = true;
 86                         //防止适宜和不适宜重复
 87                         for(var j=0;j<good.length;j++){
 88                             if(good[j] == bad){
 89                                 flag1 = false;
 90                                 i--;
 91                             }
 92                         }
 93                         if(flag1){
 94                             //防止不适宜内部各项重复
 95                             for(var p=0;p<i;p++){
 96                                 if(bad[i] == bad[p]){
 97                                     i--;
 98                                     flag2 = false;
 99                                 }
100                             }
101                         }
102                         if(flag1&&flag2){
103                          $("#bad").append("<li><font class='name'>" + data[bad[i]].name + "</font></br><font class='item'>" + data[bad[i]].bad + "</font></li>");    
104                         }
105                     }
106                     
107                 var height1 = $("body>div>div:eq(2)>div:eq(1)").height() + 20;
108                 $("div>div:eq(2)>div:first").css("height",height1);
109                 $("div>div:eq(2)>div:first").css("line-height",(height1+"px"));
110                 
111                 var height2 = $("body>div>div:eq(3)>div:eq(1)").height() + 20;
112                 $("body>div>div:eq(3)>div:first").css("height",height2);
113                 $("body>div>div:eq(3)>div:first").css("line-height",(height2+"px"));
114                 
115                 });
116                 
117             });
118         </script>
119     </head>
120     <body>
121         <div style="width: 300px; background-color: antiquewhite; margin: 1px auto;">
122             <div style="width: 290px; height: 28px; background-color: gray; padding-left: 10px;">
123                 <font style="color: darkgray; font-size: 20px; font-weight: 600;">程序员老黄历</font>
124             </div>
125             <div id="nowTime" style="background-color: white; width: 280px; height: 40px; padding: 0px 10px;">
126             </div>
127             <div style="float: left;">
128                 <div style="background-color: yellow; width: 100px; float: left; text-align: center;">
129                     <font style="color: black; font-weight: bold; font-size: 30px;">宜</font>
130                 </div>
131                 <div style="background-color: #FFFF99; float: left; width: 180px; padding: 10px 10px;">
132                     <ul id="good">
133                     </ul>
134                 </div>
135             </div>
136             <div style="width: 100%; float: left;">
137                 <div style="background-color: red; width: 100px; float: left; text-align: center;">
138                     <font style="color: white; font-weight: bold; font-size: 30px;">不宜</font>
139                 </div>
140                 <div style="background-color: #FF9999; float: left; width: 200px; width: 180px; padding: 10px 10px;">
141                     <ul id="bad">
142                     </ul>
143                 </div>
144             </div>
145         </div>
146     </body>
147 </html>
  1 [
  2     {
  3         "name": "写单元测试",
  4         "good": "写单元测试将减少出错",
  5         "bad": "写单元测试会降低你的开发效率"
  6     },
  7     {
  8         "name": "洗澡",
  9         "good": "你几天没洗澡了？",
 10         "bad": "会把设计方面的灵感洗掉",
 11         "weekend": true
 12     },
 13     {
 14         "name": "锻炼一下身体",
 15         "good": "身体好，吃嘛嘛香",
 16         "bad": "能量没消耗多少，吃得却更多",
 17         "weekend": true
 18     },
 19     {
 20         "name": "抽烟",
 21         "good": "抽烟有利于提神，增加思维敏捷",
 22         "bad": "除非你活够了，死得早点没关系",
 23         "weekend": true
 24     },
 25     {
 26         "name": "白天上线",
 27         "good": "今天白天上线是安全的",
 28         "bad": "可能导致灾难性后果"
 29     },
 30     {
 31         "name": "重构",
 32         "good": "代码质量得到提高",
 33         "bad": "你很有可能会陷入泥潭"
 34     },
 35     {
 36         "name": "使用%t",
 37         "good": "你看起来更有品位",
 38         "bad": "别人会觉得你在装逼"
 39     },
 40     {
 41         "name": "跳槽",
 42         "good": "该放手时就放手",
 43         "bad": "鉴于当前的经济形势，你的下一份工作未必比现在强"
 44     },
 45     {
 46         "name": "招人",
 47         "good": "你面前这位有成为牛人的潜质",
 48         "bad": "这人会写程序吗？"
 49     },
 50     {
 51         "name": "面试",
 52         "good": "面试官今天心情很好",
 53         "bad": "面试官不爽，会拿你出气"
 54     },
 55     {
 56         "name": "提交辞职申请",
 57         "good": "公司找到了一个比你更能干更便宜的家伙，巴不得你赶快滚蛋",
 58         "bad": "鉴于当前的经济形势，你的下一份工作未必比现在强"
 59     },
 60     {
 61         "name": "申请加薪",
 62         "good": "老板今天心情很好",
 63         "bad": "公司正在考虑裁员"
 64     },
 65     {
 66         "name": "晚上加班",
 67         "good": "晚上是程序员精神最好的时候",
 68         "bad": "困得不行还被老板发现偷懒",
 69         "weekend": true
 70     },
 71     {
 72         "name": "在妹子面前吹牛",
 73         "good": "改善你矮穷挫的形象",
 74         "bad": "会被识破",
 75         "weekend": true
 76     },
 77     {
 78         "name": "撸管",
 79         "good": "避免缓冲区溢出",
 80         "bad": "强撸灰飞烟灭",
 81         "weekend": true
 82     },
 83     {
 84         "name": "浏览成人网站",
 85         "good": "重拾对生活的信心",
 86         "bad": "你会心神不宁",
 87         "weekend": true
 88     },
 89     {
 90         "name": "命名变量\"%v\"",
 91         "good": "你看起来更有品位",
 92         "bad": "别人会觉得你在装逼"
 93     },
 94     {
 95         "name": "写超过%l行的方法",
 96         "good": "你的代码组织的很好，长一点没关系",
 97         "bad": "你的代码将混乱不堪，你自己都看不懂"
 98     },
 99     {
100         "name": "提交代码",
101         "good": "遇到冲突的几率是最低的",
102         "bad": "你遇到的一大堆冲突会让你觉得自己是不是时间穿越了"
103     },
104     {
105         "name": "代码复审",
106         "good": "发现重要问题的几率大大增加",
107         "bad": "你什么问题都发现不了，白白浪费时间"
108     },
109     {
110         "name": "开会",
111         "good": "写代码之余放松一下打个盹，有益健康",
112         "bad": "小心被扣屎盆子背黑锅"
113     },
114     {
115         "name": "打DOTA",
116         "good": "你将有如神助",
117         "bad": "你会被虐的很惨",
118         "weekend": true
119     },
120     {
121         "name": "晚上上线",
122         "good": "晚上是程序员精神最好的时候",
123         "bad": "你白天已经筋疲力尽了"
124     },
125     {
126         "name": "修复BUG",
127         "good": "你今天对BUG的嗅觉大大提高",
128         "bad": "新产生的BUG将比修复的更多"
129     },
130     {
131         "name": "设计评审",
132         "good": "设计评审会议将变成头脑风暴",
133         "bad": "人人筋疲力尽，评审就这么过了"
134     },
135     {
136         "name": "需求评审",
137         "good": "需求用到的技术我全会",
138         "bad": "完全没有完成这个需求的头绪"
139     },
140     {
141         "name": "上微博",
142         "good": "今天发生的事不能错过",
143         "bad": "今天的微博充满负能量",
144         "weekend": true
145     },
146     {
147         "name": "上AB站",
148         "good": "还需要理由吗？",
149         "bad": "满屏兄贵亮瞎你的眼",
150         "weekend": true
151     },
152     {
153         "name": "玩FlappyBird",
154         "good": "今天破纪录的几率很高",
155         "bad": "除非你想玩到把手机砸了",
156         "weekend": true
157     }
158 ]

 

posted @ 2020-04-13 16:43  yxfyg  阅读(603)  评论(0)    收藏  举报