每日60秒新闻早报单页文字版HTML源码

admin

每日60秒新闻早报单页文字版的，这个很早就有了，最近有用户问我这个怎么实现，其实很简单的只是一个单页而已，这个是PHP版的会将头部图片缓存到本地然后在展示可防止接口信息泄露。

HTML代码

1. <?php
   
2. $url = 'https://api.afx5.cn/api/mrzb';
   
3. $response = file_get_contents($url);
   
4. $data = json_decode($response, true);
   
5. if ($data['code'] == 200) {
   
6.     $headImage = $data['data']['head_image'];
   
7.     $date = $data['data']['date'];
   
8.     $news = $data['data']['news'];
   
9.     $weiyu = $data['data']['weiyu'];
   
10.     $cacheDir = '60s';
    
11.     $headImageFile = $cacheDir . '/' . basename($headImage);
    
12.     if (!file_exists($cacheDir)) {
    
13.         mkdir($cacheDir, 0777, true);
    
14.     }
    
15.     if (!file_exists($headImageFile)) {
    
16.         $ch = curl_init($headImage);
    
17.         curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    
18.         curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3');
    
19.         $imageData = curl_exec($ch);
    
20.         curl_close($ch);
    
21.         file_put_contents($headImageFile, $imageData);
    
22.     }
    
23. } else {
    
24.     echo "<p>获取数据失败，请稍后再试。</p>";
    
25.     exit;
    
26. }
    
27. ?>
    
28. <!DOCTYPE html>
    
29. <html lang="zh-CN">
    
30. <head>
    
31.     <meta charset="UTF-8">
    
32.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
33.     <title>每日新闻早报</title>
    
34.     <style>
    
35.         body {
    
36.             font-family: Arial, sans-serif;
    
37.             margin: 0;
    
38.             padding: 0;
    
39.             display: flex;
    
40.             flex-direction: column;
    
41.             align-items: center;
    
42.         }
    
43.         .container {
    
44.             width: 90%;
    
45.             max-width: 800px;
    
46.             margin: 20px auto;
    
47.             padding: 20px;
    
48.             border-radius: 8px;
    
49.             box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    
50.         }
    
51.         .header img {
    
52.             width: 100%;
    
53.             height: auto;
    
54.             border-radius: 8px;
    
55.         }
    
56.         h1 {
    
57.             text-align: center;
    
58.             margin: 20px 0;
    
59.         }
    
60.         ul {
    
61.             list-style-type: none;
    
62.             padding: 0;
    
63.         }
    
64.         li {
    
65.             background-color: #fff;
    
66.             padding: 10px;
    
67.             border-radius: 8px;
    
68.         }
    
69.         .weiyu {
    
70.             text-align: center;
    
71.             font-style: italic;
    
72.             margin-top: 20px;
    
73.         }
    
74.     </style>
    
75. </head>
    
76. <body>
    
77.     <div class="container">
    
78.         <div class="header">
    
79.             <img src="<?php echo $headImageFile; ?>">
    
80.         </div>
    
81.         <h1><?php echo $date; ?> 新闻早报</h1>
    
82.         <ul>
    
83.             <?php foreach ($news as $newsItem): ?>
    
84.                 <li><?php echo $newsItem; ?></li>
    
85.             <?php endforeach; ?>
    
86.         </ul>
    
87.         <p class="weiyu"><?php echo $weiyu; ?></p>
    
88.     </div>
    
89. </body>
    
90. </html>

复制代码