标签 Javascript 下的文章

2024-08-22

在 Ubuntu 20.04 上安装 Node.js 可以通过使用 NodeSource PPA 或使用 Ubuntu 默认的包管理器 apt 来完成。以下是通过 NodeSource PPA 安装 Node.js 的步骤：

首先，你需要从 NodeSource 的 GitHub 仓库中添加 Node.js 的 PPA。打开终端并运行以下命令：




curl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash -

这个命令会添加 Node.js 14.x 的 PPA。如果你想安装其他版本的 Node.js，只需更改 setup_14.x 中的版本号即可（例如，setup_12.x 为 Node.js 12.x）。

添加 PPA 后，你可以安装 Node.js 了：




sudo apt-get install -y nodejs

安装完成后，你可以通过运行以下命令来验证 Node.js 和 npm 是否成功安装：




node -v
npm -v

这将显示安装的 Node.js 和 npm 的版本号。

请注意，上述命令中的 -y 参数会在所有的提示中自动选择 'yes'，从而不需要手动干预。如果你想要安装特定版本的 Node.js，可以使用 nodejs-legacy 包来获取旧版本的 Node.js。

- 阅读更多 -

html、css、javascript快速入门

System

2024-08-22

所有,html

HTML、CSS和JavaScript是网页开发的三大支柱，以下是每种语言的简单入门示例：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例页面</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个段落。</p>
</body>
</html>

CSS:




body {
    background-color: #f0f0f0;
}
 
h1 {
    color: blue;
}
 
p {
    color: green;
}

JavaScript:




function showMessage() {
    alert('你好，欢迎访问！');
}
 
window.onload = function() {
    var btn = document.getElementById('myButton');
    btn.onclick = showMessage;
};

在HTML文件中，你可以通过<style>标签引入CSS，或者使用<link>标签链接外部CSS文件。同样，你可以在<script>标签中写入JavaScript代码，或者链接外部JavaScript文件。上面的JavaScript示例假设你的HTML中有一个按钮：




<button id="myButton">点击我</button>

点击这个按钮时，会弹出一个带有消息的对话框。

- 阅读更多 -

HTML：js应用---下拉框联动（省市二级下拉框联动，含代码）

System

2024-08-22

所有,html

以下是一个简单的HTML和JavaScript代码示例，实现了省市二级下拉框联动的功能。




<!DOCTYPE html>
<html>
<head>
<title>下拉框联动示例</title>
<script>
window.onload = function() {
    var provinces = ["省份A", "省份B", "省份C"];
    var cities = {
        "省份A": ["城市A1", "城市A2", "城市A3"],
        "省份B": ["城市B1", "城市B2", "城市B3"],
        "省份C": ["城市C1", "城市C2", "城市C3"]
    };
 
    var provinceSelect = document.getElementById("province");
    var citySelect = document.getElementById("city");
 
    // 填充省份下拉框
    for (var i = 0; i < provinces.length; i++) {
        var option = document.createElement("option");
        option.value = provinces[i];
        option.text = provinces[i];
        provinceSelect.appendChild(option);
    }
 
    // 省份下拉框变化事件
    provinceSelect.onchange = function() {
        citySelect.options.length = 0; // 清空城市下拉框
        var province = provinceSelect.value;
        var cityOptions = cities[province];
        if (cityOptions) {
            for (var i = 0; i < cityOptions.length; i++) {
                var option = document.createElement("option");
                option.value = cityOptions[i];
                option.text = cityOptions[i];
                citySelect.appendChild(option);
            }
        }
    };
};
</script>
</head>
<body>
<select id="province">
    <option value="">选择省份</option>
</select>
<select id="city">
    <option value="">选择城市</option>
</select>
</body>
</html>

这段代码在页面加载完成后，会自动填充省份下拉框，并为省份下拉框添加onchange事件监听器，当省份发生变化时，会更新城市下拉框的内容。这个例子使用了JavaScript创建了<option>元素，并动态地将它们添加到相应的<select>元素中。

System

2024-08-22

所有,html

以下是一个简单的HTML静态页面示例，使用了HTML、CSS、JavaScript、jQuery和Bootstrap来创建一个响应式的成都家乡介绍页面。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>成都家乡介绍</title>
    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <style>
        /* 自定义CSS样式 */
        body {
            padding-top: 5rem;
        }
        .hero {
            height: 200px;
            background-color: #f4f4f4;
            border-bottom: 1px solid #ddd;
        }
        /* 其他CSS样式 */
    </style>
</head>
<body>
    <header class="hero">
        <!-- 顶部导航栏 -->
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
            <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="#">首页 <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#about">关于成都</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#history">成都历史</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#culture">成都文化</a>
                    </li>
                </ul>
            </div>
        </nav>
    </header>
 
    <!-- 主体内容 -->
    <main role="main" class="container">
        <div class="row">
            <div class="col-md-8 blog-main">
                <h3 id="about">关于成都</h3>
                <p>成都，简称“成”，是四川省会城市，也是成语“成都adv. 轻易，简单”的来源。作为西南地区的政治、经济、文化和科教中心，成都拥有1300多年的历史，是西南地区最具历史文化的城市之一。</p>
                <!-- 其他内容 -->
            </div>
            <aside class="col-md-4 blog-sidebar">
                <div class="p-4 mb-3 bg-light rounded">
                    <h4 class="font-italic">关于成都</h4>

System

2024-08-22

所有,html

以下是一个简化的HTML和CSS代码示例，用于创建一个带有黑客帝国特效的导航搜索页面。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>黑客帕特效导航搜索页</title>
<style>
  body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #0b0b0b;
    font-family: Arial, sans-serif;
  }
  .searchbar {
    position: relative;
    width: 400px;
  }
  .searchbar input {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    color: white;
    background: transparent;
    border: none;
    outline: none;
  }
  .searchbar button {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 70px;
    background: #4e4e4e;
    color: white;
    border: none;
    cursor: pointer;
  }
  /* 黑客帕特效 */
  .matrix {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
  }
  .matrix-cell {
    position: absolute;
    background: #00aaff;
    opacity: 0;
    pointer-events: none;
  }
</style>
</head>
<body>
 
<div class="searchbar">
  <input type="text" id="search" placeholder="搜索..." />
  <button onclick="search()">搜索</button>
</div>
 
<script>
function search() {
  const input = document.getElementById('search').value;
  // 在这里添加搜索逻辑，例如使用 AJAX 请求搜索 API
  console.log('搜索:', input);
}
 
// 模拟黑客帕特效的代码
const matrix = document.createElement('div');
matrix.className = 'matrix';
document.body.appendChild(matrix);
 
const numCells = 100; // 单元格数量
for (let i = 0; i < numCells; i++) {
  const cell = document.createElement('div');
  cell.className = 'matrix-cell';
  matrix.appendChild(cell);
 
  // 初始化单元格的位置和大小
  cell.style.width = `${Math.random() * 5 + 1}px`;
  cell.style.height = cell.style.width;
  cell.style.top = `${Math.random() * 100}px`;
  cell.style.left = `${Math.random() * 100}px`;
}
 
// 动画逻辑，这里省略，可以添加更多细节
 
</script>
 
</body>
</html>

这个示例提供了一个简单的搜索页面，并在页面上添加了一个黑客帕特效（这里称为"Matrix"）。搜索功能需要进一步实现，可以通过 AJAX 请求与搜索引擎或后端服务器进行交互。同时，黑客帕特效的完整动画逻辑和细节需要进一步填充，以达到预期的视觉效果。

- 阅读更多 -

html圆盘钟表纯js有解释【搬代码】

System

2024-08-22

所有,html

以下是一个使用纯JavaScript创建HTML圆盘仪表的示例代码。这个示例提供了一个简单的圆盘仪表，可以显示时间，并且会随着时间的变化更新。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circular Clock</title>
<style>
  .clock {
    width: 300px;
    height: 300px;
    position: relative;
    margin: 50px auto;
    border: 10px solid #333;
    border-radius: 50%;
    background-color: #f0f0f0;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1);
  }
 
  .clock .plate {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    border-radius: 50%;
    background-color: #444;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.4);
  }
 
  .clock .dial {
    width: 80%;
    height: 80%;
    position: absolute;
    top: 10%;
    left: 10%;
    z-index: 2;
    border-radius: 50%;
    background-color: #f0f0f0;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.4);
  }
 
  .hand {
    width: 2px;
    height: 100px;
    position: absolute;
    top: 50%;
    transform-origin: 50% -100px;
    transition: all 0.05s;
    z-index: 3;
  }
 
  .hand.hour {
    background: #333;
  }
 
  .hand.minute {
    background: #f00;
  }
 
  .hand.second {
    background: #ff0;
  }
</style>
</head>
<body>
<div class="clock">
  <div class="plate"></div>
  <div class="dial"></div>
  <div class="hand hour"></div>
  <div class="hand minute"></div>
  <div class="hand second"></div>
</div>
 
<script>
function rotateElement(element, angle) {
  element.style.transform = 'rotate(' + angle + 'deg)';
}
 
function updateClock() {
  var now = new Date();
  var seconds = now.getSeconds();
  var minutes = now.getMinutes() + seconds / 60;
  var hours = (now.getHours() % 12) + minutes / 60;
  
  rotateElement(secondHand, seconds * 6);
  rotateElement(minuteHand, minutes * 6);
  rotateElement(hourHand, hours * 30);
}
 
var secondHand = document.querySelector('.hand.second');
var minuteHand = document.querySelector('.hand.minute');
var hourHand = document.querySelector('.hand.hour');
 
setInterval(updateClock, 1000);
updateClock();
</script>
</body>
</html>

这段代码提供了一个简单的圆盘仪表，通过CSS给它添加样式，并通过JavaScript更新指针的位置以模拟时间的流逝。这个示例可以作为创建自己时钟应用的基础，并且可以根据需要进行扩展和定制。

- 阅读更多 -

html中使用引入js文件中定义的变量

System

2024-08-22

所有,html

在HTML中引入JavaScript文件后，可以使用定义在该文件中的变量。首先，确保在HTML文件中通过<script>标签正确引入了JavaScript文件。然后，在HTML中使用JavaScript定义的变量。

以下是一个简单的示例：

JavaScript文件 (script.js):




// 定义变量
var myVariable = "Hello, World!";

HTML文件:




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <!-- 引入JavaScript文件 -->
    <script src="script.js"></script>
    <script>
        // 使用JavaScript定义的变量
        function displayVariable() {
            alert(myVariable);
        }
    </script>
</head>
<body>
 
    <!-- 触发函数，显示警告框 -->
    <button onclick="displayVariable()">Display Variable</button>
 
</body>
</html>

在这个例子中，当用户点击按钮时，会触发displayVariable函数，该函数会弹出一个包含myVariable变量值的警告框。这里的myVariable是在script.js文件中定义的，并且在HTML文件的<script>标签内定义的displayVariable函数中被使用。

System

2024-08-22

所有,html

这个插件用于Webpack构建过程中，用于智能管理HTML文件中JavaScript引用。它可以根据入口和生成的chunk自动插入正确的script标签。

以下是如何使用这个插件的基本步骤：

安装插件：




npm install --save-dev script-ext-html-webpack-plugin

在webpack配置文件中引入并使用这个插件：




// webpack.config.js
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
 
module.exports = {
  // ... 其他webpack配置
  plugins: [
    // ... 其他插件
    new ScriptExtHtmlWebpackPlugin({
      // 默认options
      custom: {
        test: /\.js$/,
        attribute: 'crossorigin',
        value: 'anonymous'
      }
    })
  ]
};

在这个例子中，插件被配置为在生成的HTML文件中为所有JavaScript文件添加一个crossorigin="anonymous"属性。这是一个常见的配置用于提高跨域资源共享（CORS）的安全性。

这个插件的灵活性很高，可以通过配置来自定义生成的script标签的行为。例如，可以修改test正则表达式来匹配特定的文件扩展名，或者修改attribute和value来添加其他自定义属性。

- 阅读更多 -

练手小案例：用js实现二级导航

System

2024-08-22

所有,css3

以下是一个简单的二级导航菜单的实现，使用JavaScript和CSS完成。

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>二级导航菜单</title>
<style>
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
  }
 
  li {
    float: left;
  }
 
  li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
 
  li a:hover, .dropdown:hover .dropbtn {
    background-color: #111;
  }
 
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
 
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
 
  .dropdown-content a:hover {background-color: #f1f1f1;}
 
  .dropdown:hover .dropdown-content {
    display: block;
  }
</style>
</head>
<body>
 
<ul>
  <li><a href="#home">首页</a></li>
  <li><a href="#news">新闻</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">更多</a>
    <div class="dropdown-content">
      <a href="#">链接1</a>
      <a href="#">链接2</a>
      <a href="#">链接3</a>
    </div>
  </li>
</ul>
 
<script>
// 这里可以添加更多的JavaScript代码来增强导航的功能，比如点击事件处理等
</script>
 
</body>
</html>

CSS:




ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
 
li {
  float: left;
}
 
li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
li a:hover, .dropdown:hover .dropbtn {
  background-color: #111;
}
 
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
 
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
 
.dropdown-content a:hover {background-color: #f1f1f1;}
 
.dropdown:hover .dropdown-content {
  display: block;
}

这个例子中，我们使用了一个简单的二级下拉菜单，当用户将鼠标悬停在“更多”选项上时，会展开显示链接。通过CSS我们定义了导

- 阅读更多 -

用HTML+CSS+JS搭建一个超简单的静态实用网站页面

System

2024-08-22

所有,css3

以下是一个简单的静态网站页面示例，包括HTML结构、CSS样式和JavaScript功能。这个页面具有导航栏、主内容区域和页脚。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Static Website</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            min-height: 100vh;
            flex-direction: column;
        }
        header, footer {
            background-color: #f2f2f2;
            padding: 20px 0;
            text-align: center;
        }
        nav {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 20px;
        }
        nav a {
            color: white;
            text-decoration: none;
            padding: 0 10px;
        }
        main {
            flex: 1;
            padding: 20px;
        }
    </style>
</head>
<body>
    <header>
        <h1>Simple Website</h1>
    </header>
    <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
    </nav>
    <main>
        <h2>Main Content Goes Here</h2>
        <p>This is where the main content of the page goes.</p>
    </main>
    <footer>
        <p>Copyright &copy; 2023 Simple Website</p>
    </footer>
    <script>
        // JavaScript code goes here
    </script>
</body>
</html>

这个示例提供了一个简单的网站页面骨架，可以根据实际需求添加更多的内容和样式。

- 阅读更多 -