jQuery老黄历完整实现方法

前端技术 2023/09/09 JavaScript

本文实例讲述了jQuery老黄历实现方法。分享给大家供大家参考。具体实现方法分析如下：

先来看看程序运行效果：

html页面部分如下：

复制代码 代码如下:

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">
  <title>jquery老黄历特效 -</title>
 <script id=\"jquery_183\" type=\"text/javascript\" class=\"library\" src=\"js/jquery-1.8.3.min.js\"></script>
 </head>
 <script type=\"text/javascript\" class=\"library\" src=\"js/almanac.js\"></script>
 </head>
 <link rel=\"stylesheet\" href=\"css/style.css\" type=\"text/css\" media=\"all\" />
 <body>
  <div class=\"container\">
   <div class=\"title\">
    程序员老黄历<sup>beta</sup>
   </div>
   <div class=\"date\">
   </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 class=\"split\"></div>
   <div class=\"line-tip\">
    <strong>座位朝向：</strong>面向<span class=\"direction_value\"></span>写程序，BUG 最少。
   </div>
   <div class=\"line-tip\">
    <strong>今日宜饮：</strong><span class=\"drink_value\"></span>
   </div>
   <div class=\"line-tip\">
    <strong>女神亲近指数：</strong><span class=\"goddes_value\"></span>
   </div>
   
  </div>
 </body>
</html>

style.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;
}

.date{
 font-size:17pt;
 font-weight: bold;
 line-height: 30pt;
 text-align: center;
}

.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: 10pt;
 font-weight: normal;
 color: #777;
 line-height: 110%;
 margin-bottom: 10px;
}

.line-tip {
 font-size: 11pt;
 margin-top: 10px;
 margin-left: 10px;
}

.direction_value {
 color:#4a4;
 font-weight: bold;
}

.comment {
 margin-top: 50px;
 font-size: 11pt;
 margin-left: 10px;
}

.comment ul {
 margin-left: 0;
 padding-left: 20px;
 color: #999;
}

本文地址：https://www.stayed.cn/item/24293

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案