Spaces:
Running
Running
| <html><head><base href="https://websim.ai"><title>Sina Daily Funny GIFs - WebSim</title> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |
| <style type="text/css"> | |
| * { | |
| padding: 0; | |
| margin: 0; | |
| } | |
| body { | |
| background: #333; | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; | |
| } | |
| ul { | |
| list-style: none; | |
| } | |
| li { | |
| text-align: center; | |
| border: 1px solid #d8d5d5; | |
| margin: 18px 8px; | |
| padding: 16px 0px; | |
| border-radius: 10px; | |
| background: #fff; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.1); | |
| transition: transform 0.2s ease-in-out; | |
| } | |
| li:hover { | |
| transform: translateY(-5px); | |
| } | |
| img { | |
| width: 100%; | |
| border-radius: 5px; | |
| } | |
| h1 { | |
| font-size: 16px; | |
| text-align: left; | |
| margin: 10px 20px 20px; | |
| font-weight: 500; | |
| color: #333; | |
| } | |
| h2 { | |
| text-align: right; | |
| font-size: 12px; | |
| font-weight: 400; | |
| margin: 9px 12px -7px 0; | |
| color: #666; | |
| } | |
| @media screen and (min-width:440px) { | |
| body { | |
| width: 440px; | |
| margin: 0 auto; | |
| } | |
| } | |
| section { | |
| position: fixed; | |
| bottom: 30px; | |
| right: 20px; | |
| display: flex; | |
| gap: 10px; | |
| } | |
| a { | |
| background: #598263; | |
| color: #fff; | |
| padding: 10px 20px; | |
| border-radius: 10px; | |
| font-size: 14px; | |
| text-decoration: none; | |
| transition: background-color 0.2s ease-in-out; | |
| cursor: pointer; | |
| } | |
| a:hover { | |
| background: #4a6e53; | |
| } | |
| .page { | |
| position: fixed; | |
| right: 8px; | |
| top: 8px; | |
| font-size: 14px; | |
| padding: 4px 8px; | |
| color: #fff; | |
| background: rgba(89, 130, 99, 0.8); | |
| border-radius: 8px; | |
| } | |
| .container { | |
| padding-bottom: 60px; | |
| } | |
| .header { | |
| background: #598263; | |
| color: #fff; | |
| padding: 20px; | |
| text-align: center; | |
| margin-bottom: 20px; | |
| } | |
| .header h1 { | |
| font-size: 24px; | |
| margin: 0; | |
| color: #fff; | |
| } | |
| .loading { | |
| text-align: center; | |
| color: #fff; | |
| padding: 20px; | |
| font-size: 18px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="header"> | |
| <h1>Sina Daily Funny GIFs</h1> | |
| </div> | |
| <span class="page"></span> | |
| <ul></ul> | |
| <section> | |
| <a onclick="prePage()">Previous</a> | |
| <a onclick="nextPage()">Next</a> | |
| </section> | |
| </div> | |
| <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> | |
| <script type="text/javascript"> | |
| var refresh = function (page) { | |
| $('ul').html('<div class="loading">Loading...</div>'); | |
| $.ajax({ | |
| type: 'GET', | |
| url: 'https://interface.sina.cn/tech/gif/album.d.json?num=' + 20 + '&page=' + page + '&jsoncallback=jsonp1&_=' + new Date().getTime(), | |
| async: true, | |
| dataType: "jsonp", | |
| jsonp: "callback", | |
| jsonpCallback: "jsonp1", | |
| success: function (msg) { | |
| $('ul').empty(); | |
| msg.data.forEach(function (currentValue, index, arr) { | |
| $('ul').append('<li><h1>' + msg.data[index].name + '</h1><img src="' + msg.data[index].img_url.replace(/^http:/, 'https:') + '" alt="' + msg.data[index].name + '"/><h2>' + msg.data[index].createtime + '</h2></li>') | |
| }) | |
| }, | |
| error: function() { | |
| $('ul').html('<div class="loading">Loading failed, please try again</div>'); | |
| } | |
| }) | |
| $('.page').html('Current Page: ' + page); | |
| } | |
| refresh(1); | |
| var page = 1; | |
| var prePage = function () { | |
| if (page == 1) { | |
| alert('This is the first page'); | |
| } else { | |
| page--; | |
| refresh(page); | |
| } | |
| } | |
| var nextPage = function () { | |
| page++; | |
| refresh(page); | |
| } | |
| </script> | |
| </body></html> |