分类前端技术下的文章

2024-08-07

在HTML和JavaScript的帮助下，你可以轻松地创建一个按钮，在点击后开始60秒倒计时。以下是一个简单的实现示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>验证码倒计时</title>
<script>
function startCountdown() {
    var seconds = 60;
    var countdownButton = document.getElementById('countdownButton');
    countdownButton.disabled = true;
    countdownButton.value = seconds + '秒';
    
    var timer = setInterval(function() {
        seconds -= 1;
        countdownButton.value = seconds + '秒';
        
        if (seconds <= 0) {
            clearInterval(timer);
            countdownButton.value = '重新发送验证码';
            countdownButton.disabled = false;
        }
    }, 1000);
}
</script>
</head>
<body>
 
<input type="button" id="countdownButton" value="发送验证码" onclick="startCountdown()">
 
</body>
</html>

在这个例子中，当按钮被点击时，startCountdown函数被触发。这个函数将按钮设置为不可点击，并开始一个60秒倒计时。每秒都会更新按钮上显示的时间，并检查是否到达0秒。当倒计时结束时，按钮将重新启用，并将文本重置为原始状态。

System

2024-08-07

所有,html

以下是一个简单的使用Bootstrap创建的响应式网站的示例，该网站包含了一个简单的首页和关于页面，以及一个联系表单。

首先，确保在HTML文件中包含了Bootstrap CSS和JavaScript文件：




<!-- 引入Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
 
<!-- 其他CSS样式 -->
<style>
  /* 自定义样式 */
</style>
 
<!-- 引入jQuery和Bootstrap JavaScript -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

接下来是HTML部分：




<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">甜甜屋</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="index.html">首页 <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="about.html">关于我们</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="contact.html">联系我们</a>
        </li>
      </ul>
    </div>
  </nav>
 
  <!-- 首页内容 -->
  <div class="jumbotron">
    <h1 class="display-4">甜甜屋欢迎您!</h1>
    <p class="lead">这里有最甜的蛋糕，最甜的回忆。</p>
    <hr class="my-4">
    <p>更多甜甜的故事，请点击下面的按钮。</p>
    <p class="lead">
      <a class="btn btn-primary btn-lg" href="about.html" role="button">了解更多</a>
    </p>
  </div>
 
  <!-- 关于页面内容 -->
  <div class="container">
    <h1>关于甜甜屋</h1>
    <p>甜甜屋成立于2014年，是一个专注于提供美味蛋糕和精致服务的小甜屋。我们的目标是提供最美味的蛋糕，最温馨的环境，和最热情的服务。</p>
    <!-- 省略其他关于页面内容 -->
  </div>
 
  <!-- 联系页面内容 -->
  <div class="container">
    <h1>联系甜甜屋</h1>
    <form>
      <!-- 省略表单字段 -->
      <button type="submit" class="btn btn-primary">发送</button>
    </form>
  </div>
 
  <!-- 页脚 -->
  <footer class="footer">
    <div class="container">
      <span class="text-muted">甜甜屋版权所有 © 2023</span>
    </div>
  </footer>
</body>

这个简单的示例展示了如何使用Bootstrap创建

- 阅读更多 -

HTML基本标签使用详解

System

2024-08-07

所有,html

HTML基本标签包括：<!DOCTYPE>, <html>, <head>, <body>, <h1>至<h6>, <p>, <a>, <img>, <div>, <span>等。

以下是一些常用HTML标签的简单示例：




<!-- 文档类型声明，用于浏览器解析 -->
<!DOCTYPE html>
 
<!-- html根元素开始 -->
<html lang="en">
 
<!-- 头部信息，包含元数据、标题、脚本、样式等 -->
<head>
    <meta charset="UTF-8">
    <title>示例页面</title>
</head>
 
<!-- 页面的主体部分，包含网页上显示的内容 -->
<body>
 
    <!-- 标题1 -->
    <h1>这是一级标题</h1>
 
    <!-- 段落 -->
    <p>这是一个段落。</p>
 
    <!-- 链接 -->
    <a href="https://www.example.com">这是一个链接</a>
 
    <!-- 图片 -->
    <img src="image.jpg" alt="描述性文本">
 
    <!-- 分区 -->
    <div>这是一个分区</div>
 
    <!-- 行内分隔 -->
    <span>这是行内文本</span>
 
</body>
 
</html>
<!-- html根元素结束 -->

这些标签是构建基本网页结构的基础，每个标签都有其特定的用途和属性。在实际开发中，可以根据需要选择合适的标签和属性来创建复杂的页面布局。

- 阅读更多 -

html中button的立体效果圆角，前端开发学习

System

2024-08-07

所有,html

在HTML中，要创建一个具有立体效果的圆角按钮，你可以使用CSS来实现。以下是一个简单的例子，展示了如何使用CSS为button元素添加立体效果和圆角样式：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Button Example</title>
<style>
  .button {
    background-color: #4CAF50; /* Green background */
    border: none;
    color: white; /* White text */
    padding: 10px 20px; /* Some padding */
    text-align: center; /* Center the text */
    text-decoration: none; /* Remove underline */
    display: inline-block; /* Display as block */
    font-size: 16px; /* Set a font-size */
    margin: 4px 2px; /* Add margin */
    cursor: pointer; /* Add a pointer on hover */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); /* Simulate a 3D effect */
  }
 
  .button:hover {
    background-color: #3e8e41; /* Darker green on hover */
  }
</style>
</head>
<body>
 
<button class="button">Click Me</button>
 
</body>
</html>

在这个例子中，.button 类定义了按钮的背景颜色、文本颜色、边距、阴影等样式。box-shadow 属性用于创建立体效果，通过不同方向的阴影和透明度，模拟出按钮的三维效果。当鼠标悬停在按钮上时，:hover 伪类会改变按钮的背景颜色，增加了交互效果。

- 阅读更多 -

HTML 超链接

System

2024-08-07

所有,html

在HTML中，超链接由 <a> 标签定义。<a> 标签的最重要的属性是 href 属性，它指定链接的目标地址。

以下是一些创建超链接的基本方法：

创建指向另一个网页的超链接：




<a href="https://www.example.com">访问Example网站</a>

创建指向同一页面中其他部分的超链接：




<a href="#section2">跳转到第二部分</a>
...
<div id="section2">第二部分的内容</div>

创建电子邮件链接：




<a href="mailto:someone@example.com">发送电子邮件</a>

在新窗口/标签页中打开链接：




<a href="https://www.example.com" target="_blank">在新窗口打开Example网站</a>

创建下载链接：




<a href="files/example.pdf" download>下载PDF文件</a>

使用JavaScript创建链接：




<a href="javascript:alert('你点击了链接！');">点击我！</a>

请注意，target="_blank" 属性会导致链接在新窗口或标签页中打开，而 download 属性会导致链接指向的文件被下载，而不是在浏览器中打开。

- 阅读更多 -

python爬虫 - 爬取Ajax获取的Json格式数据（个人微博）

System

2024-08-07

所有,ajax




import requests
import json
 
# 微博个人主页的URL
url = 'https://m.weibo.cn/api/container/getIndex?type=uid&value=2830678474&containerid=1076032830678474'
 
# 设置请求头，模拟浏览器访问
headers = {
    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3',
    'X-Requested-With': 'XMLHttpRequest',
    'Cookie': '你的微博Cookies'
}
 
# 发送请求
response = requests.get(url, headers=headers)
 
# 解析JSON数据
data = json.loads(response.text)
 
# 提取微博数据
cards = data['data']['cards']
for card in cards:
    if 'mblog' in card:
        mblog = card['mblog']
        created_at = mblog['created_at']
        text = mblog['text']
        attitudes_count = mblog['attitudes_count']
        comments_count = mblog['comments_count']
        reposts_count = mblog['reposts_count']
 
        print(f"发布时间: {created_at}")
        print(f"微博内容: {text}")
        print(f"赞: {attitudes_count}")
        print(f"评论: {comments_count}")
        print(f"转发: {reposts_count}")
        print("\n")
 
# 注意：此代码未完全测试，可能需要根据实际情况进行调整。
# 例如，你需要替换'你的微博Cookies'为实际的登录Cookies，以及可能需要处理分页等情况。

这段代码使用了Python的requests库来发送HTTP请求，并使用json库来解析JSON数据。它提取了用户微博的发布时间、内容、赞、评论和转发数等信息，并打印出来。需要注意的是，你需要替换'你的微博Cookies'为实际的登录Cookies，以及可能需要处理分页等情况。

- 阅读更多 -

【HMWeb】HTML使用Leaflet实现本地离线地图Gis应用

System

2024-08-07

所有,html




<!DOCTYPE html>
<html>
<head>
  <title>HMWeb 地图应用</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
  <style>
    #mapid { height: 500px; }
  </style>
</head>
<body>
  <div id="mapid"></div>
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
  <script>
    var map = L.map('mapid').setView([51.505, -0.09], 13);
 
    L.tileLayer('http://localhost:8080/leaflet-{z}/{x}/{y}.png', {
      maxZoom: 18,
      attribution: '地图数据 &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
    }).addTo(map);
 
    L.marker([51.505, -0.09]).addTo(map)
      .bindPopup('Hello World!')
      .openPopup();
  </script>
</body>
</html>

这段代码展示了如何使用Leaflet在HTML页面中嵌入一个地图，并且设置了地图的中心点、缩放级别以及一个标记和弹窗。在本地服务器上，它假设有一个提供离线地图切片的服务运行在端口8080。请注意，这只是一个示例，并且需要根据实际部署的服务进行相应的调整。

System

2024-08-07

所有,html

报错解释：

这个错误表明在尝试执行位于/usr/local/bin/docker-compose的脚本时，脚本的第一行尝试访问一个名为html的文件或目录，但是没有找到。

解决方法：

检查/usr/local/bin/docker-compose文件的第一行，确认它指向的html文件或目录是否确实存在。
如果html应该是一个URL，确保有正确的网络连接，并且URL是可访问的。
如果docker-compose脚本是通过软链接方式链接到docker-compose可执行文件的，请确保软链接指向的目标文件存在。
如果docker-compose是通过某种安装脚本生成的，请重新运行安装脚本，确保所有必要的文件都被正确地复制到了/usr/local/bin/目录中。
如果以上步骤无法解决问题，可能需要重新安装Docker Compose。可以从官方网站下载最新版本的Docker Compose，并按照官方指南重新安装。

2024-08-07

要实现文本超出部分隐藏，鼠标悬停时显示全部内容，可以使用CSS的text-overflow属性结合hover伪类。以下是实现这个效果的CSS代码示例：




/* 设置容器的宽度和省略样式 */
.text-container {
  width: 200px; /* 定义容器宽度 */
  white-space: nowrap; /* 确保文本在一行内显示 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  cursor: pointer; /* 将鼠标样式改为手指形状，提示可点击 */
}
 
/* 鼠标悬停时移除文本省略样式 */
.text-container:hover {
  overflow: visible; /* 悬停时文本不隐藏 */
  text-overflow: inherit; /* 悬停时不使用省略号 */
  white-space: normal; /* 悬停时文本换行 */
}

接下来是HTML部分：




<div class="text-container">
  这是一段很长的文本，需要超出部分隐藏，鼠标悬停时显示全部内容。
</div>

将上述CSS添加到您的样式表中，并在您的HTML中使用text-container类的div元素，当文本超出容器宽度时，会以省略号显示，鼠标悬停时会显示全文。

- 阅读更多 -

三种canvas星空背景效果

System

2024-08-07

所有,css3

以下是一个简单的HTML和JavaScript代码示例，用于创建一个带有星空背景的画布：




<!DOCTYPE html>
<html>
<head>
<style>
body, html {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
canvas {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
</style>
</head>
<body>
<canvas id="starfield"></canvas>
 
<script>
function Starfield() {
  this.stars = [];
  this.width = window.innerWidth;
  this.height = window.innerHeight;
  this.maxStars = 1000; // 可根据需要调整星星数量
 
  this.init = function() {
    for (var i = 0; i < this.maxStars; i++) {
      this.stars.push({
        x: Math.random() * this.width,
        y: Math.random() * this.height,
        size: Math.random() * 2,
        speed: Math.random() * .05
      });
    }
  };
 
  this.render = function() {
    var canvas = document.getElementById('starfield');
    var ctx = canvas.getContext('2d');
 
    ctx.globalAlpha = 0.5; // 设置全局透明度
    ctx.fillRect(0, 0, this.width, this.height);
    ctx.globalAlpha = 1.0;
 
    for (var i = 0; i < this.maxStars; i++) {
      var star = this.stars[i];
      ctx.fillRect(star.x, star.y, star.size, star.size);
 
      star.x += Math.cos(i + this.width) * star.speed;
      star.y += Math.sin(i + this.height) * star.speed;
 
      if (star.x > this.width) {
        star.x = 0;
      }
      if (star.y > this.height) {
        star.y = 0;
      }
    }
  };
 
  this.init();
  setInterval(this.render.bind(this), 33); // 每33毫秒重绘一次
}
 
new Starfield();
</script>
</body>
</html>

这段代码创建了一个星场背景，其中包含了1000颗随机大小和速度的星星。星星会随机移动，如果移出画布边界，它们会重新出现在画布的另一侧。这个示例使用了setInterval来周期性地重绘画布，创建动态的星空效果。

- 阅读更多 -