标签 Javascript 下的文章

前端项目共读！50个项目50天之02：进度步骤条的HTML、CSS和JavaScript实现

2024-08-15




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>进度步骤条</title>
<style>
  .progress-container {
    width: 100%;
    margin: 40px 0;
    overflow: hidden;
    counter-reset: step;
  }
  .step {
    float: left;
    position: relative;
    text-align: center;
    width: 10%;
    border-right: 1px solid #eee;
    counter-increment: step;
  }
  .step:before {
    content: counter(step);
    display: block;
    margin: 0 auto 4px;
    background-color: #fff;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    border: 1px solid #ddd;
    box-shadow: 0 0 4px rgba(0,0,0,0.2);
  }
  .step:last-child {
    border-right: none;
  }
  .step-label {
    display: block;
    font-size: 13px;
    color: #666;
    margin-top: 8px;
  }
</style>
</head>
<body>
<div class="progress-container">
  <div class="step">
    <div class="step-label">步骤一</div>
  </div>
  <div class="step">
    <div class="step-label">步骤二</div>
  </div>
  <!-- 更多步骤... -->
</div>
</body>
</html>

这个简单的HTML代码展示了如何使用CSS伪元素和CSS计数器来创建一个进度步骤条。每个.step都会有一个带有step-label的数字标记，这个数字代表了进度。通过CSS样式，我们可以自定义这个进度条的外观，并且可以通过在.progress-container内添加更多的.step元素来增加步骤数。

- 阅读更多 -

vue中格式化json数据输出到html中

System

2024-08-15

所有,html

在Vue中，你可以使用计算属性来格式化JSON数据并将其输出到HTML中。以下是一个简单的例子：




<template>
  <div>
    <pre>{{ formattedJson }}</pre>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      jsonData: {
        name: "Vue.js",
        type: "JavaScript Framework",
        year: 2014
      }
    };
  },
  computed: {
    formattedJson() {
      // 使用JSON.stringify将对象转换为字符串，并格式化输出
      return JSON.stringify(this.jsonData, null, 2);
    }
  }
};
</script>

在这个例子中，jsonData 是组件的数据属性，包含了待格式化的JSON对象。formattedJson 是一个计算属性，使用 JSON.stringify 方法将 jsonData 转换为字符串，并通过指定 null 和缩进级别 2 来进行格式化。在模板中，使用 {{ formattedJson }} 将格式化后的JSON数据直接输出到HTML中，使用 <pre> 标签来保持格式化。

- 阅读更多 -

如何将 JavaScript 添加到 HTML 页面

System

2024-08-15

所有,html

将JavaScript添加到HTML页面可以通过以下几种方式：

内联JavaScript：在HTML文件中直接写JavaScript代码。




<!DOCTYPE html>
<html>
<body>
 
<h2>我的第一个 JavaScript 程序</h2>
 
<button type="button" onclick="alert('Hello World!')">点击我！</button>
 
</body>
</html>

内部JavaScript：在<script>标签内编写JavaScript代码。




<!DOCTYPE html>
<html>
<body>
 
<h2>我的第一个 JavaScript 程序</h2>
 
<button type="button" id="myButton">点击我！</button>
 
<script>
document.getElementById("myButton").onclick = function() {
    alert("Hello World!");
}
</script>
 
</body>
</html>

外部JavaScript：创建一个单独的.js文件，并在HTML文件中通过<script>标签引入。




// 假设这是你的 index.js 文件
function showMessage() {
    alert("Hello World!");
}




<!DOCTYPE html>
<html>
<body>
 
<h2>我的第一个 JavaScript 程序</h2>
 
<button type="button" onclick="showMessage()">点击我！</button>
 
<script src="index.js"></script>
 
</body>
</html>

在实际开发中，通常推荐使用外部JavaScript文件来组织和管理代码，这样可以提高代码的可维护性和可复用性。

- 阅读更多 -

教你用JavaScript实现键盘控制小方块移动

System

2024-08-15

所有,css3




// 获取canvas元素并设置绘图上下文
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
 
// 定义小方块类
class Box {
    constructor(x, y, w, h, color) {
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
        this.color = color;
    }
 
    // 绘制方块
    draw() {
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, this.w, this.h);
    }
 
    // 根据按键移动方块
    move(keyCode) {
        switch (keyCode) {
            case 'LEFT':
                this.x -= 10;
                break;
            case 'RIGHT':
                this.x += 10;
                break;
            case 'UP':
                this.y -= 10;
                break;
            case 'DOWN':
                this.y += 10;
                break;
        }
    }
}
 
// 创建一个小方块实例
var box = new Box(50, 50, 20, 20, 'blue');
 
// 绘制初始方块
box.draw();
 
// 为window添加键盘按下事件监听
window.addEventListener('keydown', function(e) {
    // 根据按下的键盘键移动方块
    box.move(e.key.toUpperCase());
    // 清除canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // 重新绘制移动后的方块
    box.draw();
});

这段代码定义了一个Box类，包含了绘制方法和移动方法。在keydown事件监听器中，我们根据按下的键来调用move方法，并重绘canvas以显示小方块的移动。这个例子教导了如何使用JavaScript来响应键盘事件，并对画布上的对象进行交互式操作。

System

2024-08-15

所有,css3

在HTML中，超链接由<a>标签定义。超链接可以是一个字词或者一张图片，点击它可以从一个页面跳转到另外一个页面。

超链接的创建：




<a href="https://www.example.com">Visit Example.com</a>

在这个例子中，"Visit Example.com"是一个超链接，点击它会跳转到www.example.com。

target属性：

target属性用于定义被链接的文档在何处显示。例如，如果你想在新的浏览器窗口打开链接，你可以使用"\_blank"作为target的值。




<a href="https://www.example.com" target="_blank">Visit Example.com</a>

scrolling属性：

scrolling属性定义了在点击链接时，浏览器的滚动条的行为。它可以取三个值："auto"、"yes"和"no"。如果你想让浏览器记住用户的滚动位置，你可以使用"auto"。




<a href="https://www.example.com" scrolling="auto">Visit Example.com</a>

marginwidth和marginheight属性：

这两个属性定义了内嵌框架的边距。marginwidth属性定义了内容与框架边框的上下距离，marginheight属性定义了内容与框架边框的左右距离。




<iframe src="demo_iframe.htm" marginwidth="50" marginheight="50"></iframe>

以上就是HTML中关于超链接，target，scrolling，margin的一些基本知识。

- 阅读更多 -

手把手教你：CSS+JS 打造一个有个性的滚动条

System

2024-08-15

所有,css3

在这个示例中，我们将创建一个自定义的滚动条，使其具有个性化的设计。这个自定义滚动条将使用CSS来控制外观，并使用JavaScript来添加交互功能。

首先，我们需要创建一个容器，并为它设置一些样式，以隐藏浏览器默认的滚动条。

HTML:




<div id="scrollable-container">
  <!-- Your content goes here -->
</div>

CSS:




#scrollable-container {
  width: 300px;
  height: 200px;
  overflow: auto;
}
 
/* 自定义滚动条样式 */
#scrollable-container::-webkit-scrollbar {
  width: 12px;
}
 
#scrollable-container::-webkit-scrollbar-track {
  background: #f1f1f1;
}
 
#scrollable-container::-webkit-scrollbar-thumb {
  background: #888;
}
 
#scrollable-container::-webkit-scrollbar-thumb:hover {
  background: #555;
}

接下来，我们将添加JavaScript代码，以便能够通过拖动自定义滚动条的滑块来控制内容的滚动。

JavaScript:




const container = document.getElementById('scrollable-container');
 
container.addEventListener('scroll', function() {
  const scrollPercent = container.scrollTop / (container.scrollHeight - container.clientHeight);
  // 更新自定义滚动条的位置
});
 
// 监听自定义滚动条的事件，并更新容器的滚动位置

这个示例展示了如何创建一个具有个性化设计的自定义滚动条。你可以通过调整CSS中的样式来进一步定制它的外观，并通过JavaScript来处理滚动逻辑。

System

2024-08-15

所有,css3

以下是一个使用原生JavaScript手动实现的多级树状菜单效果，模仿了Element UI的el-menu组件的简单样式和功能：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tree Menu</title>
<style>
  ul.el-menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
 
  .el-menu-item {
    cursor: pointer;
    padding: 5px 10px;
    position: relative;
  }
 
  .el-menu-item:hover {
    background-color: #eee;
  }
 
  .el-submenu {
    position: relative;
  }
 
  .el-submenu ul {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
  }
 
  .el-submenu:hover ul {
    display: block;
  }
 
  .el-submenu__title:hover {
    background-color: #eee;
  }
</style>
</head>
<body>
 
<ul id="menu" class="el-menu">
  <li class="el-submenu">
    <div class="el-submenu__title">菜单1</div>
    <ul>
      <li class="el-menu-item">子菜单1-1</li>
      <li class="el-menu-item">子菜单1-2</li>
    </ul>
  </li>
  <li class="el-submenu">
    <div class="el-submenu__title">菜单2</div>
    <ul>
      <li class="el-menu-item">子菜单2-1</li>
      <li class="el-submenu">
        <div class="el-submenu__title">子菜单2-2</div>
        <ul>
          <li class="el-menu-item">子菜单2-2-1</li>
          <li class="el-menu-item">子菜单2-2-2</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
 
<script>
  // 原生JS实现多级树状菜单效果
  const menu = document.getElementById('menu');
 
  // 为每个菜单项添加点击事件
  menu.addEventListener('click', function(event) {
    const target = event.target;
    // 如果点击的是子菜单的标题，则切换子菜单的显示状态
    if (target.classList.contains('el-submenu__title')) {
      const submenu = target.nextElementSibling;
      const isVisible = submenu.style.display === 'block';
      submenu.style.display = isVisible ? 'none' : 'block';
    }
  });
</script>
 
</body>
</html>

这段代码实现了一个简单的多级树状菜单，当鼠标悬停在子菜单的标题上时，相应的子菜单项会显示出来。这个例子只是一个基础实现，没有包含所有Element UIel-menu组件的功能（例如路由导航、激活状态等），但它展示了如何使用原生JavaScript来创建类似组件的交互效果。

System

2024-08-15

所有,css3

以下是一个简单的可互动响应式登录注册表单的HTML和CSS代码示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login/Register Form</title>
<style>
  body {
    font-family: Arial, sans-serif;
    padding: 24px;
  }
  form {
    display: flex;
    flex-direction: column;
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  input[type="text"], input[type="password"] {
    margin: 10px 0;
    padding: 8px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  input[type="submit"] {
    margin-top: 10px;
    padding: 10px 20px;
    font-size: 16px;
    background: #333;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  input[type="submit"]:hover {
    background: #555;
  }
  @media (max-width: 600px) {
    form {
      max-width: none;
      width: 90%;
    }
  }
</style>
</head>
<body>
 
<form action="">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
  
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>
  
  <input type="submit" value="Login">
  
  <hr>
  
  <input type="checkbox" id="register" name="register">
  <label for="register">No account? Register here.</label>
</form>
 
</body>
</html>

这个简单的登录注册表单包括了基本的HTML结构、CSS样式和一些响应式布局的调整。在移动设备上，表单宽度会自适应屏幕宽度。用户可以通过点击复选框来选择是直接登录还是注册一个新账号。这个例子旨在展示如何结合HTML、CSS和基本的JavaScript来创建一个基本的用户认证流程。

- 阅读更多 -

vue中判断应该import 哪个js或css

System

2024-08-15

所有,css

在Vue中，你可以使用JavaScript的逻辑操作符来动态决定导入哪个JavaScript或CSS文件。这通常通过在<script>或<style>标签中使用require语句，并结合条件语句实现。

以下是一个例子，展示了如何根据条件动态导入CSS或JavaScript文件：




// 在Vue组件中
<template>
  <!-- 你的模板内容 -->
</template>
 
<script>
export default {
  name: 'DynamicImportComponent',
  created() {
    // 动态导入JavaScript文件
    if (someCondition) {
      import('./some-module.js').then((module) => {
        // 使用导入的模块
      }).catch((error) => {
        // 处理错误
      });
    }
 
    // 动态导入CSS文件
    if (someOtherCondition) {
      const cssLink = document.createElement('link');
      cssLink.rel = 'stylesheet';
      cssLink.href = './some-style.css';
      document.head.appendChild(cssLink);
    }
  }
}
</script>
 
<style>
/* 你的样式 */
</style>

在这个例子中，someCondition和someOtherCondition是你的条件判断，它们决定是否导入some-module.js和some-style.css。动态导入JavaScript模块使用import()语法，而动态导入CSS则通过创建并添加<link>标签到文档的<head>部分。

- 阅读更多 -

html+js+css登录注册界面

System

2024-08-15

所有,css

以下是一个简单的HTML、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>Login & Register Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
 
<section class="container">
  <div class="login-box">
    <form id="login-form" autocomplete="off">
      <h2>Login</h2>
      <div class="input-group">
        <input type="text" required>
        <label>Username</label>
      </div>
      <div class="input-group">
        <input type="password" required>
        <label>Password</label>
      </div>
      <button type="submit" class="btn">Login</button>
    </form>
    
    <form id="register-form" autocomplete="off">
      <h2>Register</h2>
      <div class="input-group">
        <input type="text" required>
        <label>Username</label>
      </div>
      <div class="input-group">
        <input type="email" required>
        <label>Email</label>
      </div>
      <div class="input-group">
        <input type="password" required>
        <label>Password</label>
      </div>
      <button type="submit" class="btn">Register</button>
    </form>
  </div>
</section>
 
<script src="script.js"></script>
</body>
</html>

CSS (style.css):




body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #28a745;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.container {
  width: 100%;
  max-width: 400px;
}
 
.login-box {
  width: 100%;
  max-width: 400px;
  background-color: #fff;
  padding: 30px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  position: relative;
}
 
.input-group {
  margin: 10px 0;
}
 
.input-group input {
  width: calc(100% - 10px);
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 16px;
}
 
.input-group label {
  position: absolute;
  top: 0;
  left: 10px;
  padding: 10px;
  pointer-events: none;
  transition: 0.5s;
  font-size: 16px;
}
 
.input-group input:focus ~ label,
.input-group input:valid ~ label {
  top: -20px;
  color: #28a745;
  font-size: 12px;
}
 
.btn {
  width: calc(100% - 20px);
  padding: 10px;
  margin: 10px 0;
  background-color: #28a745;

- 阅读更多 -