javascript如何连接html的实例【实测成功】

最新推荐文章于 2024-04-02 02:00:00 发布

captain飞虎大队

最新推荐文章于 2024-04-02 02:00:00 发布

阅读量1.2k

点赞数 3

分类专栏： html

本文链接：https://blog.csdn.net/weixin_41529093/article/details/115125624

版权

html 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

（关于html如何使用css文件的实例，参考博主文章传送门）

仅作为记录，大佬请跳过

用<script type="text/javascript" src="ajavascript.js"></script>，在body标签里面的最后一行里写

在这里插入图片描述

1、文件夹和文件

在一个文件夹里，建立a.html，acss.css和ajavascript.js：

在这里插入图片描述

2、a.html完整代码（vs code软件)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="acss.css">
    
</head>
<body>
  <script src="https://api.map.baidu.com/api?v=2.0&ak=1a3c89ddb9bcfaf5b9dc4b62e3f2a05b"></script>

  <h2>联系表单 - 响应式</h2>
  <p>重置浏览器窗口大小，查看效果</p>
  
  <div class="container">
    <div style="text-align:center">
      <h2>联系我们</h2>
      <p>请填写信息:</p>
    </div>
    <div class="row">
      <div class="column">
        <div id="allmap" style="width:100%;height:500px"></div>
      </div>
      <div class="column">
        <form action="/action_page.php">
          <label for="name">姓名</label>
          <input type="text" id="fname" name="name" placeholder="您的称呼..">
          <label for="phone">联系电话</label>
          <input type="text" id="phone" name="phone" placeholder="联系电话..">
          <label for="country">测试</label>
          <select id="country" name="country">
            <option value="bj">北京</option>
            <option value="sh">上海</option>
            <option value="sz">深圳</option>
          </select>
          <label for="subject">留言</label>
          <textarea id="subject" name="subject" placeholder="写入一些信息.." style="height:170px"></textarea>
          <input type="submit" value="提交">
        </form>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="ajavascript.js"></script>
</body>
</html>

3、acss.css完整代码（vs code软件）

body {
    font-family: Arial, Helvetica, sans-serif;
  }
  
  * {
      box-sizing: border-box;
  }
  
  /* Style inputs */
  input[type=text], select, textarea {
      width: 100%;
      padding: 12px;
      border: 1px solid #ccc;
      margin-top: 6px;
      margin-bottom: 16px;
      resize: vertical;
  }
  
  input[type=submit] {
      background-color: #4CAF50;
      color: white;
      padding: 12px 20px;
      border: none;
      cursor: pointer;
  }
  
  input[type=submit]:hover {
      background-color: #45a049;
  }
  
  /* Style the container/contact section */
  .container {
      border-radius: 5px;
      background-color: #f2f2f2;
      padding: 10px;
  }
  
  /* Create two columns that float next to eachother */
  .column {
      float: left;
      width: 50%;
      margin-top: 6px;
      padding: 20px;
  }
  
  /* Clear floats after the columns */
  .row:after {
      content: "";
      display: table;
      clear: both;
  }
  
  /* 响应式布局 */
  @media screen and (max-width: 600px) {
      .column, input[type=submit] {
          width: 100%;
          margin-top: 0;
      }
  }

4、ajavascript.js完整代码（vs code软件）

// 百度地图API功能
var map = new BMap.Map("allmap");    // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
//添加地图类型控件
map.addControl(new BMap.MapTypeControl({
  mapTypes:[
          BMAP_NORMAL_MAP,
          BMAP_HYBRID_MAP
      ]}));   
map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩

5、运行

在a.html里，用vs code软件的alt和b快捷键运行：

在这里插入图片描述

注：

1、本文是html如何外部连接javascript（即单独设置一个.js文件，在.html里、引入（而不是直接在.html里直接写javascript的代码））

2、本文代码完全参考菜鸟教程

参考：

传送门

在这里插入图片描述

captain飞虎大队

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
javascript如何连接html的实例【实测成功】

（关于html如何使用css文件的实例，参考博主文章传送门）仅作为记录，大佬请跳过用<script type="text/javascript" src="ajavascript.js"></script>，在body标签里面的最后一行里写1、文件夹和文件在一个文件夹里，建立a.html，acss.css和ajavascript.js：2、a.html完整代码（vs code软件)<!DOCTYPE html><html lang="en">
复制链接

扫一扫