Home  >  Article  >  Web Front-end  >  jQuery Old Almanac Complete Implementation Method_jquery

jQuery Old Almanac Complete Implementation Method_jquery

WBOY
WBOYOriginal
2016-05-16 16:20:013269browse

The example in this article describes the jQuery old almanac implementation method. Share it with everyone for your reference. The specific implementation method is analyzed as follows:

Let’s take a look at the running effect of the program:

The html page part is as follows:

Copy code The code is as follows:





jquery old almanac special effects -








Programmer Lao Huanglibeta






                                                                                       











                                                                                              









      Seat orientation: Face and write programs with the least bugs.


      Today’s drink:


      Goddess proximity index:

       





      style.css style is as follows:

      Copy code The code is as follows:

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

      almanac.js代码如下:

      复制代码 代码如下:

      /*
      * Note: The "random" in this program is a pseudo-random concept, with the current day as the seed.
      */
      function random(dayseed, indexseed) {
      var n = dayseed % 11117;
      for (var i = 0; i < 100 indexseed; i ) {
      n = n * n;
      n = n % 11117; // 11117 is a prime number
      }
      return n;
      }

      var today = new Date();
      var iday = today.getFullYear() * 10000 (today.getMonth() 1) * 100 today.getDate();

      var weeks = ["日","一","二","三","四","五","六"];
      var directions = ["North","Northeast","East","Southeast","South","Southwest","West","Northwest"];
      var activities = [
      {name: "Writing unit tests", good: "Writing unit tests will reduce errors", bad: "Writing unit tests will reduce your development efficiency"},
      {name: "Take a shower", good: "How many days have you not showered?", bad: "It will wash away the design inspiration"},
      {name:"Exercise your body", good:"",bad:"You don’t consume much energy, but you eat more"},
      {name: "Smoking", good: "Smoking is good for refreshing your mind and increasing your mental agility", bad: "Unless you have lived enough, it doesn't matter if you die early"},
      {name: "Online during the day", good: "It is safe to go online during the day today", bad: "It may lead to catastrophic consequences"},
      {name:"Refactoring", good:"Code quality is improved", bad:"You are likely to get stuck in the quagmire"},
      {name: "Use %t", good: "You look more classy", bad: "Others will think you are showing off"},
      {name:"Job hopping", good:"Let go when it's time to let go", bad:"Given the current economic situation, your next job may not be better than your current one"},
      {name:"Recruiting people", good:"The possibility of you meeting a Chollima is greatly increased", bad:"You will only recruit one or two laymen who are just trying to make ends meet"},
      {name: "Interview", good: "The interviewer is in a good mood today", bad: "The interviewer is unhappy and will take it out on you"},
      {name: "Submit your resignation application", good: "The company has found a guy who is more capable and cheaper than you, and I hope you get out of here as soon as possible", bad: "Given the current economic situation, your next job may not be better than your current one. "},
      {name: "Apply for a salary increase", good: "The boss is in a good mood today", bad: "The company is considering layoffs"},
      {name: "Work overtime at night", good: "Programmers are at their best at night", bad: ""},
      {name: "Bragging in front of girls", good: "Improve your short and poor image", bad: "You will be seen through"},
      {name:"Masturbation", good:"Avoid buffer overflow",bad:"Small masturbation is pleasurable, big masturbation is harmful to the body, and forced masturbation is wiped out"},
      {name:"Browsing adult websites", good:"Regain confidence in life", bad:"You will be restless"},
      {name:"Named variable "%v"", good:"",bad:""},
      {name: "Write more than %l lines of method", good: "Your code is well organized, it doesn't matter if it is longer", bad: "Your code will be so confusing that you can't even understand it"},
      {name: "Submit code", good: "The chance of encountering conflicts is the lowest", bad: "A lot of conflicts you encounter will make you feel like you have traveled through time"},
      {name: "Code Review", good: "The chance of finding important problems is greatly increased", bad: "You can't find any problems and waste your time"},
      {name: "Meeting", good: "It's good for your health to relax and take a nap after writing code", bad: "You will be blamed"},
      {name: "Playing DOTA", good: "You will be like a divine help", bad: "You will be tortured miserably"},
      {name: "Online at night", good: "Programmers are at their best at night", bad: "You are exhausted during the day"},
      {name: "Fix BUG", good: "Your sense of smell for bugs has been greatly improved today", bad: "There will be more new bugs generated than fixed"},
      {name:"Design Review", good:"Design review meetings will turn into brainstorming", bad:"Everyone is exhausted and the review just goes by"},
      {name:"Requirements Review", good:"",bad:""},
      {name: "Go to Weibo", good: "What happened today cannot be missed", bad: "The boss will see it"},
      {name: "Go to AB site", good: "Do you still need a reason?", bad: "The boss will see it"}
      ];

      var specials = [
      {date:20130221, type:'good', name:'Nuclear Defense Exercise', description:'What if some lunatic drops a nuclear bomb...'}
      ];

      var tools = ["Eclipse writes programs", "MSOffice writes documents", "Notepad writes programs", "Windows8", "Linux", "MacOS", "IE", "Android devices", "iOS devices "];

      var varNames = ["jieguo", "huodong", "pay", "expire", "zhangdan", "every", "free", "i1", "a", "virtual", "ad" , "spider", "mima", "pass", "ui"];

      var drinks = ["water","tea","black tea","green tea","coffee","milk tea","coke","milk","soy milk","juice","fruity" "Soda", "soda", "sports drink", "yoghurt", "wine"];

      function getTodayString() {
      return "Today is" today.getFullYear() "Year" (today.getMonth() 1) "Month" today.getDate() "Day Week" weeks[today.getDay()];
      }

      // 生成今日运势
      function pickTodaysLuck() {
       var numGood = random(iday, 98) % 3 2;
       var numBad = random(iday, 87) % 3 2;
       var eventArr = pickRandomActivity(numGood numBad);
       var specialSize = pickSpecials();
       for (var i = 0; i < numGood; i ) {
        addToGood(eventArr[i]);
       }
       for (var i = 0; i < numBad; i ) {
        addToBad(eventArr[numGood i]);
       }
      }

      // 添加预定义事件
      function pickSpecials() {
       var specialSize = [0,0];
       
       for (var i = 0; i < specials.length; i ) {
        var special = specials[i];
        
        if (iday == special.date) {
         if (special.type == 'good') {
          specialSize[0] ;
          addToGood({name: special.name, good: special.description});
         } else {
          specialSize[1] ;
          addToBad({name: special.name, bad: special.description});
         }
        }
       }
       return specialSize;
      }

      // 从 activities 中随机挑选 size 个
      function pickRandomActivity(size) {
       var picked_events = pickRandom(activities, size);
       for (var i = 0; i < picked_events.length; i ) {
        picked_events[i] = parse(picked_events[i]);
       }
       return picked_events;
      }

      // 从数组中随机挑选 size 个
      function pickRandom(array, size) {
       var result = [];
       for (var i = 0; i < array.length; i ) {
        result.push(array[i]);
       }
       for (var j = 0; j < array.length - size; j ) {
        var index = random(iday, j) % result.length;
        result.splice(index, 1);
       }
       return result;
      }

      // 解析占位符并替换成随机内容
      function parse(event) {
       var result = {name: event.name, good: event.good, bad: event.bad};  // clone
       if (result.name.indexOf('%v') != -1) {
        result.name = result.name.replace('%v', varNames[random(iday, 12) % varNames.length]);
       }
       if (result.name.indexOf('%t') != -1) {
        result.name = result.name.replace('%t', tools[random(iday, 11) % tools.length]);
       }
       if (result.name.indexOf('%l') != -1) {
        result.name = result.name.replace('%l', (random(iday, 12) % 247 30).toString());
       }
       return result;
      }

      // 添加到“宜”
      function addToGood(event) {
       $('.good .content ul').append('

    • ' event.name '
      ' event.good '
    • ');
      }

      // 添加到“不宜”
      function addToBad(event) {
       $('.bad .content ul').append('

    • ' event.name '
      ' event.bad '
    • ');
      }

      $(function(){
       $('.date').html(getTodayString());
       $('.direction_value').html(directions[random(iday, 2) % directions.length]);
       $('.drink_value').html(pickRandom(drinks,2).join());
       $('.goddes_value').html(random(iday, 6) % 50 / 10.0);
       pickTodaysLuck();
      });

      希望本文所述对大家的jQuery程序设计有所帮助。

      Statement:
      The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn