地震数据JSON脚本开发求助：日期格式化与数值截断问题

嘿，我来帮你搞定这两个问题！先解决日期时间的格式化问题，再处理震级和深度的字符截断需求～

1. 日期时间格式化问题 #

你当前代码里直接用dateTime.getMonth()会得到0-11的数字（JS的月份是从0开始计数的），而且没有补零处理，显示出来会很奇怪（比如1月会显示成0）。我们可以写一个简单的格式化函数，把日期转成类似DD/MM/YYYY HH:MM的规范格式，和你参考页面的风格对齐：

function formatDateTime(dateString) {
  const date = new Date(dateString);
  // 给日、月、小时、分钟补零，确保是两位数显示
  const day = String(date.getDate()).padStart(2, '0');
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份加1修正0-based的问题
  const year = date.getFullYear();
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  
  return `${day}/${month}/${year} ${hours}:${minutes}`;
}

2. 震级和深度保留前3位字符 #

要实现这个需求，我们可以把数值转成字符串后，用slice(0,3)截取前3个字符。就算数值本身不足3个字符（比如整数6），slice也会直接返回整个字符串，不会出现错误：

// 处理震级
const truncatedMagnitude = val.properties.magnitude.toString().slice(0, 3);
// 处理深度
const truncatedDepth = val.properties.depth.toString().slice(0, 3);

修改后的完整代码 #

把上面的逻辑整合到你的代码里，最终版本如下：

JavaScript部分 #

$(document).ready(function() {
  returnQuakes(4);
});

function returnNews() {
  var url = 'https://api.geonet.org.nz/news/geonet';
  $.getJSON(url, function(data) {
    var items = [];
    $.each(data.feed, function(key, val) {
      items.push("<li>" + "<a target='_blank' " + "href='" + val.link + "'>" + val.title + "</a>" + "</li>");
    });
    $("<ul/>", {
      "class": "list",
      html: items.join("")
    }).appendTo("#news");
  });
}

// 新增日期格式化函数
function formatDateTime(dateString) {
  const date = new Date(dateString);
  const day = String(date.getDate()).padStart(2, '0');
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const year = date.getFullYear();
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  
  return `${day}/${month}/${year} ${hours}:${minutes}`;
}

function returnQuakes(greaterThan) {
  var url = 'https://api.geonet.org.nz/quake?MMI=' + greaterThan;
  $.getJSON(url, function(data) {
    var items = [];
    $.each(data.features, function(key, val) {
      // 格式化时间
      const formattedTime = formatDateTime(val.properties.time);
      // 截断震级和深度到前3位字符
      const truncatedMagnitude = val.properties.magnitude.toString().slice(0, 3);
      const truncatedDepth = val.properties.depth.toString().slice(0, 3);
      
      items.push("<li class='title'>" + val.properties.locality + "<ul>" +
        "<li>Magnitude: " + truncatedMagnitude + "</li>" +
        "<li>Depth: " + truncatedDepth + "</li>" +
        "<li>Time: " + formattedTime + "</li>" +
        "</ul></li>");
    });
    $("<ul/>", {
      "class": "list",
      html: items.join("")
    }).appendTo("#quakes");
  });
}

HTML部分 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="quakes"></div>

这样修改后，日期会显示成规范的DD/MM/YYYY HH:MM格式，震级和深度也会只保留前3个字符，和你参考的页面风格一致啦～

内容的提问来源于stack exchange，提问作者Del Harris