今日箴言-使用jQuery.ajax进行一个简单的页面交互的设计

作者: Jancaelm 分类: HTML,CSS,jQuery 发布时间: 2017-08-05 15:23

jQuery库具有一个完整的Ajax功能套装。这些函数和方法允许我们从服务器载入数据,而不需要浏览器刷新网页。
今天使用它以及以及今日名言api来制作一个“今日箴言”页面.使用boostrap开快速构建页,并引入谷歌在线字体进行适当美化.

    1. 首先观察api取回的数据:
      {
          "success": {
              "total": 1
          },
          "contents": {
              "quotes": [
                  {
                      "quote": "Predicting Rain Doesn't Count. Building Arks Does.",
                      "length": null,
                      "author": "Warren Buffett",
                      "tags": [
                          "action",
                          "execution",
                          "inspire"
                      ],
                      "category": "inspire",
                      "date": "2017-08-05",
                      "permalink": "https://theysaidso.com/quote/f8OgfJ6bJErYE620jTNSyweF/warren-buffett-predicting-rain-doesnt-count-building-arks-does",
                      "title": "Inspiring Quote of the day",
                      "background": "https://theysaidso.com/img/bgs/man_on_the_mountain.jpg",
                      "id": "f8OgfJ6bJErYE620jTNSyweF"
                  }
              ],
              "copyright": "2017-19 theysaidso.com"
          }
      }
    2. 可知我们需要的是quote箴言数据,author作者数据,background背景图片,以及date今日日期.
      var author = data.contents.quotes[0].author;
      var quote = data.contents.quotes[0].quote;
      var date = data.contents.quotes[0].date;
      var imgsrc = data.contents.quotes[0].background;
    3. 最后将其赋值给页面上的DOM元素.
      $(“#text”).text(quote);
      $(“#author”).html(author);
      $(“#date”).html(date);
      $(“body”).css(‘background’,’url(‘+imgsrc+’)’);
      $(“body”).css(‘background-size’,’cover’);

    效果如下:

  1. 源代码参考:



  
  
  Quote Of The day
  
  


Today's Quote

-

发表评论

电子邮件地址不会被公开。 必填项已用*标注

更多阅读
标签云