JS与Bootstrap在Codepen正常运行，本地打开却失效的问题排查

这个问题太常见了——Codepen后台会自动帮你加载项目依赖的外部资源，但下载的index.html只包含了你手动编写的代码部分，漏掉了datetimepicker插件和Bootstrap框架的关键资源，所以本地打开时这些功能直接罢工了。

问题根源 #

你使用的datetimepicker（大概率是Eonasdan Bootstrap DateTimePicker插件）需要三个核心依赖才能正常工作：

• jQuery（你已经在代码里引入了）
• Bootstrap的CSS样式文件和JS脚本文件
• DateTimePicker自身的CSS样式和JS脚本

下载的HTML里只加了jQuery，其他依赖全缺失，浏览器找不到这些文件，自然无法渲染样式、执行交互逻辑。

修复步骤 #

把缺失的资源链接补充到你的index.html里，注意加载顺序非常重要：先加载CSS样式，再加载jQuery，接着是Bootstrap JS，最后是DateTimePicker JS。

修改后的完整代码示例：

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>A Pen by L</title>
  <!-- 引入Bootstrap核心样式 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
  <!-- 引入DateTimePicker专属样式 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/eonasdan-bootstrap-datetimepicker@4.17.47/build/css/bootstrap-datetimepicker.min.css">
  <!-- 引入jQuery -->
  <script src="https://code.jquery.com/jquery-2.1.0.min.js" integrity="sha256-8oQ1OnzE2X9v4gpRVRMb1DWHoPHJilbur1LP9ykQ9H0=" crossorigin="anonymous"></script>
  <!-- 引入Bootstrap核心脚本 -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  <!-- 引入DateTimePicker核心脚本 -->
  <script src="https://cdn.jsdelivr.net/npm/eonasdan-bootstrap-datetimepicker@4.17.47/build/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
  <!-- 这里补充datetimepicker的HTML结构（你之前可能漏掉了） -->
  <div class="container">
    <div class="row">
      <div class='col-sm-6'>
        <div class="form-group">
          <div class='input-group date' id='datetimepicker1'>
            <input type='text' class="form-control" />
            <span class="input-group-addon">
              <span class="glyphicon glyphicon-calendar"></span>
            </span>
          </div>
        </div>
      </div>
      <div class='col-sm-6'>
        <div class="form-group">
          <div class='input-group date' id='datetimepicker2'>
            <input type='text' class="form-control" />
            <span class="input-group-addon">
              <span class="glyphicon glyphicon-calendar"></span>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    $('#datetimepicker1').datetimepicker();
    $('#datetimepicker2').datetimepicker();
  </script>
</body>
</html>

额外提示 #

1. 上面用的是CDN链接，本地打开时浏览器会直接从CDN获取资源，不需要你下载到本地；如果想离线使用，可以把这些资源下载到本地，然后把链接改成本地文件路径（比如./css/bootstrap.min.css）。
2. 我选的版本都是和Codepen常用环境兼容的版本，尽量避免版本冲突导致的新问题。

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