master

分支 (1)

管理

管理

master

bing-no-server
/
bing.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="Access-Control-Allow-Origin" content="*" />
    <meta name="referrer" content="no-referrer" />
    <title>title</title>
    <style type="text/css">
      #web_bg {
        width: 100%;
        height: 100%;
        object-fit: cover;
        vertical-align: middle;
      }

      #desc {
        width: 99%;
        position: fixed;
        bottom: 0;
        color: #70f3ff;
        font-size: bolder;
        font-family: "微软雅黑";
        background: black;
        text-align: left;
      }

      #clock {
        position: absolute;
        right: 5px;
        bottom: 0;
        color: #70f3ff;
        font-size: bolder;
        font-family: "微软雅黑";
      }

      .loading {
        background-color: transparent;
        width: 520px;
        height: 520px;
        border-radius: 50%;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      .loading:before {
        content: "";
        box-sizing: border-box;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 21px solid #ccc;
        border-top-color: red;
        border-bottom-color: red;
        border-left-color: yellow;
        border-right-color: yellow;
        animation: loading 1s ease-in-out infinite;
      }

      @keyframes loading {
        0% {
          transform: rotate(0);
        }

        100% {
          transform: rotate(360deg);
        }
      }
    </style>
  </head>

  <body style="background-color: black; text-align: center">
    <div class="loading"></div>
    <img id="web_bg" style="cursor: pointer" onclick="freshImg()" />
    <div id="desc"></div>
    <div id="clock"></div>
  </body>
  <script src="./jquery.min.js"></script>
  <script src="./moment.min.js"></script>
  <script src="./lunarCal.js"></script>
  <script type="text/javascript">
    let timer;
    let dateTimer;
    let freshInterval = 300000;
    let count = 0;
    $(function () {
      freshImg();
      updateDateTime();
      document.onkeydown = function (event) {
        var e = event || window.event || arguments.callee.caller.arguments[0];
        if (e && e.keyCode == 32) {
          // backspace
          freshImg();
        }
      };
    });

    function updateDateTime() {
      clearInterval(dateTimer);
      let lunar = calendar.solar2lunar(
        moment(new Date()).format("YYYY"),
        moment(new Date()).format("MM"),
        moment(new Date()).format("DD")
      );
      let festival = lunar.festival ? lunar.festival : "";
      dateTimer = setInterval(function () {
        $("#clock").html(
          "(公历)[ " +
            lunar.date +
            " ][ " +
            lunar.ncWeek +
            " ](农历)[ " +
            lunar.gzYear +
            "年" +
            lunar.gzMonth +
            "月" +
            lunar.gzDay +
            "日 ][ " +
            lunar.lunarDate +
            " ]" +
            festival +
            "[ " +
            moment(new Date()).format("HH:mm:ss") +
            " ]"
        );
      }, 1000);
    }

    function freshImg() {
      count = 0;
      updateDateTime();
      loadBing();
    }

    function loadBing() {
      clearTimeout(timer);
      const img = $("#web_bg");
      const url = "https://bing.open.apith.cn/random";
      // const ranInt = Math.floor(Math.random() * 7) + 1;
      // const url = "https://bing.biturl.top/?index=" + ranInt;
      $.ajax({
        url: url,
        async: false,
        success: function (imgObj) {
          console.log(imgObj);
          /* $("title").html(imgObj.copyright);
          let src = imgObj.url;
          let con = imgObj.copyright;
          con += "<br/>DATE@" + imgObj.start_date + "-" + imgObj.end_date;
          loadImgProxy(img, src, con);
          timer = setTimeout(function () {
            freshImg();
          }, freshInterval); */
          if (imgObj.msg == "ok") {
            let ig = imgObj.data[0];
            $("title").html(ig.title == "" ? ig.copyright : ig.title);
            let src = "http:" + ig.url;
            let con = ig.desc == "" ? ig.copyright : ig.desc;
            con += "<br/>DATE@" + ig.date;
            loadImgProxy(img, src, con);
            timer = setTimeout(function () {
              freshImg();
            }, freshInterval);
          }
        },
      });
    }
    //加载图片本体函数
    function loadImg(img, src, desc, flag) {
      $(img).attr("src", src);
      $("#desc").html(desc);
      if (flag) {
        $(".loading").css("display", "block");
        $("#web_bg").css("display", "none");
      } else {
        $("#web_bg").height($(window).height() - $("#desc").height() - 10);
        $(".loading").css("display", "none");
        $("#web_bg").css("display", "block");
      }
    }

    function loadImgProxy(img, src, desc) {
      count += 1;
      let imgCache = new Image();
      imgCache.onload = function () {
        count = 0;
        loadImg(img, src, desc);
      };
      loadImg(img, "loading_circle.gif", "", true);
      imgCache.src = src;
      imgCache.onerror = function (err) {
        if (count < 5) {
          loadImgProxy(img, src, desc);
        } else {
          freshImg();
        }
      };
    }
  </script>
</html>