标签 Javascript 下的文章

[HTML]Web前端开发技术9（HTMLCSSJavaScript ）——喵喵画网页

2024-08-07

在Web前端开发中，使用HTML5、CSS3和JavaScript可以创建出丰富多样的页面效果。以下是一个简单的示例，展示了如何使用这些技术创建一个简单的喵喵画页面：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shiba Inu Drawing Page</title>
    <style>
        body {
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .shiba {
            width: 200px;
            height: 200px;
            background-image: url('shiba.png');
            background-size: cover;
            border-radius: 50%;
            animation: rotate 5s linear infinite;
        }
        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="shiba"></div>
</body>
</html>

这个示例中，我们使用了CSS3的@keyframes规则来创建一个无限循环的旋转动画，让喵喵画能够不停地旋转。这个简单的页面展示了如何将静态设计转变为动态的交互式体验，这是Web开发中一个重要的发展方向。

- 阅读更多 -

js实现的简易轮播图，适合初学者

System

2024-08-07

所有,css3

以下是一个使用原生JavaScript实现的简易轮播图示例，适合初学者学习和实践。

HTML部分：




<div id="carousel">
  <div class="carousel-image" style="background-image: url('image1.jpg');"></div>
  <div class="carousel-image" style="background-image: url('image2.jpg');"></div>
  <div class="carousel-image" style="background-image: url('image3.jpg');"></div>
  <!-- 更多图片可以继续添加 -->
</div>
<button id="prevBtn">Previous</button>
<button id="nextBtn">Next</button>

CSS部分：




#carousel {
  position: relative;
  width: 300px; /* 设置轮播图的宽度 */
  height: 200px; /* 设置轮播图的高度 */
  overflow: hidden;
}
.carousel-image {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease-in-out;
}

JavaScript部分：




const carousel = document.getElementById('carousel');
const images = document.querySelectorAll('.carousel-image');
const nextBtn = document.getElementById('nextBtn');
const prevBtn = document.getElementById('prevBtn');
let currentIndex = 0;
 
function showImage(index) {
  images.forEach((image, i) => {
    image.style.transform = `translateX(${i - index}00%)`;
  });
}
 
nextBtn.addEventListener('click', function() {
  currentIndex = (currentIndex + 1) % images.length;
  showImage(currentIndex);
});
 
prevBtn.addEventListener('click', function() {
  currentIndex = (currentIndex - 1 + images.length) % images.length;
  showImage(currentIndex);
});
 
showImage(currentIndex); // 初始显示第一张图片

这段代码实现了一个简单的轮播图功能，通过左右按钮控制当前显示的图片。轮播图使用绝对定位来叠加图片，并通过改变transform属性的translateX值来切换不同的图片。代码注释清晰，方便理解。

System

2024-08-07

所有,css3




// 定义一个简单的函数来模拟 CSS3 calc() 函数的功能
function calc(expression) {
  // 使用正则表达式来匹配 calc() 函数中的运算符和操作数
  const regex = /(-?\d+(\.\d+)?)(px|em|rem|vh|vw|%)?\s?([+-])\s?(-?\d+(\.\d+)?)(px|em|rem|vh|vw|%)?/;
  const match = regex.exec(expression);
 
  if (!match) {
    throw new Error('Invalid expression');
  }
 
  // 提取出操作数和单位，并转换为相应的数字
  const [, num1, unit1, operator, num2, unit2] = match;
  const value1 = parseFloat(num1) + (unit1 || '');
  const value2 = parseFloat(num2) + (unit2 || '');
 
  // 根据不同的运算符执行不同的运算
  switch (operator) {
    case '+':
      return parseFloat(value1) + parseFloat(value2);
    case '-':
      return parseFloat(value1) - parseFloat(value2);
    default:
      throw new Error('Unsupported operator');
  }
}
 
// 使用示例
console.log(calc("10px + 5px")); // 输出: 15px
console.log(calc("10em - 2em")); // 输出: 8em

这段代码提供了一个简单的JavaScript函数 calc，它接收一个字符串表达式，并尝试解析它以执行加法或减法运算。它使用正则表达式来匹配数字和单位，并根据提供的运算符进行计算。这个函数可以作为一个简单的模拟工具，帮助理解CSS calc() 函数的工作原理和JavaScript的正则表达式处理能力。

- 阅读更多 -

【Vue】Mock.js介绍和使用与首页导航栏左侧菜单搭建

System

2024-08-07

所有,vue.js

Mock.js是一款用于前后端分离开发的模拟数据工具，它可以模拟各种HTTP请求，比如GET、POST等，以及相应的响应数据。下面是如何使用Mock.js来模拟首页导航栏左侧菜单数据的示例代码：




// 引入Mock
const Mock = require('mockjs')
 
// 定义模拟数据
const data = Mock.mock({
  'nav|1-5': [
    {
      'id|+1': 1, // 自增ID
      'name': '@ctitle' // 随机中文标题
    }
  ]
})
 
// 导出模拟数据
module.exports = data

在Vue组件中，你可以使用axios等HTTP客户端来发起请求，并渲染模拟的数据。




<template>
  <div>
    <ul>
      <li v-for="item in navList" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>
 
<script>
import axios from 'axios'
import data from './mock/data' // 假设mock/data是模拟数据的路径
 
export default {
  data() {
    return {
      navList: data.nav
    }
  },
  created() {
    // 实际项目中，这里会发起真实的HTTP请求
    // axios.get('/api/nav').then(response => {
    //   this.navList = response.data.nav
    // })
  }
}
</script>

在上述代码中，我们首先使用Mock.js定义了一组模拟数据，然后在Vue组件的created钩子中，我们将模拟数据赋值给navList，并渲染到页面上。实际项目中，你会用axios或其他HTTP客户端发起真实的HTTP请求，并在请求成功后处理数据。

- 阅读更多 -

7.17 npm（nodejs 包管理器）安装软件、安装vue及练习

System

2024-08-07

所有,javascript

在命令行中，您可以使用以下步骤安装npm和Vue.js。

安装Node.js和npm：
访问Node.js官方网站（https://nodejs.org/）下载并安装最新版本的Node.js，这将同时安装npm。
通过npm安装Vue.js：
打开命令行工具（例如终端、命令提示符或PowerShell），然后运行以下命令：
```
npm install -g @vue/cli
```
这将全局安装Vue CLI，它是一个用于快速Vue.js开发的命令行工具。
创建一个新的Vue项目：
```
vue create my-vue-app
```
将my-vue-app替换为您想要的项目名称。
运行你的Vue项目：
```
cd my-vue-app
npm run serve
```
这将启动一个本地服务器，并且您可以在浏览器中查看您的Vue应用。
学习Vue.js：
您可以通过Vue.js官方文档（https://vuejs.org/）或其他在线资源来学习Vue.js。

以上步骤为您展示了如何安装npm和Vue.js，并创建一个简单的Vue项目。在实践中，您可以进一步开发和实践Vue应用。

- 阅读更多 -

Surely Vue Table表格css、js方法去除水印

System

2024-08-07

所有,css

Vue Table 通常不会自动生成水印，如果您在使用某个Vue Table组件时遇到了水印问题，这可能是由于以下原因：

水印是由浏览器插件或者其他前端库（如水印生成库）添加的。
水印是作为背景图片嵌入表格的单元格中。

要解决这个问题，您可以手动检查并移除水印。以下是一些可能的解决方法：

检查CSS样式：如果水印是通过背景图片实现的，您可以检查CSS样式，找到设置背景图片的规则，并将其移除。




/* 假设有如下背景图片规则 */
.table-class .watermark {
    background-image: url('path/to/watermark.png');
}
 
/* 移除该规则 */
.table-class .watermark {
    background-image: none;
}

检查HTML结构：如果水印是通过内联HTML元素实现的，比如<div>或<span>，直接在HTML中删除这些元素。




<!-- 假设有如下水印标签 -->
<div class="watermark">Confidential</div>
 
<!-- 直接删除该标签 -->
<!-- <div class="watermark">Confidential</div> -->

如果是通过JavaScript动态添加水印的，您需要找到添加水印的代码，并在Vue的生命周期钩子或相应的方法中将其移除。




// 假设有如下代码添加水印
document.querySelector('.table-class .watermark').style.backgroundImage = 'url(path/to/watermark.png)';
 
// 移除水印的代码
document.querySelector('.table-class .watermark').style.backgroundImage = 'none';

确保在移除水印之前了解其影响，以及是否有其他方式（如角色权限管理）来控制水印的显示。如果这是一个商业项目，确保您有权限修改代码，并且不违反使用协议。

- 阅读更多 -

制作京东购物车，包含html+js+css完整代码

System

2024-08-07

所有,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>JD Cart</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="cart">
  <h2>Your Cart</h2>
  <div class="item">
    <button class="remove-item">&times;</button>
    <img src="item-image.jpg" alt="Item">
    <h3>Item Name</h3>
    <p class="price">$99.99</p>
    <input class="quantity" type="number" value="1">
    <p class="subtotal">$99.99</p>
  </div>
  <!-- More items can be added here -->
  <button id="checkout">Checkout ($0)</button>
</div>
 
<script src="script.js"></script>
</body>
</html>

CSS (style.css):




#cart {
  width: 300px;
  margin: 20px;
  padding: 10px;
  border: 1px solid #ccc;
}
 
.item {
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
  padding-bottom: 10px;
}
 
.item img {
  width: 50px;
  height: 50px;
  float: left;
}
 
.item .remove-item {
  float: right;
  cursor: pointer;
}
 
.price, .subtotal {
  font-weight: bold;
  margin-left: 60px;
}
 
.quantity {
  width: 40px;
  margin-left: 60px;
}
 
#checkout {
  float: right;
  background-color: #000;
  color: #fff;
  border: none;
  padding: 10px;
  margin-top: 10px;
  cursor: pointer;
}

JavaScript (script.js):




document.addEventListener('DOMContentLoaded', function() {
  let checkoutButton = document.getElementById('checkout');
  let items = document.getElementsByClassName('item');
  let subtotals = document.getElementsByClassName('subtotal');
  let quantities = document.getElementsByClassName('quantity');
  let total = 0;
 
  // Update subtotal for each item
  function updateSubtotal(itemIndex) {
    let price = parseFloat(items[itemIndex].querySelector('.price').innerText.replace('$', ''));
    let quantity = parseInt(quantities[itemIndex].value, 10);
    subtotals[itemIndex].innerText = '$' + (price * quantity).toFixed(2);
  }
 
  // Calculate total and update checkout button
  function calculateTotal() {
    total = 0;
    for (let i = 0; i < items.length; i++) {
      total += parseFloat(subtotals[i].innerText.replace('$', ''));
    }
    checkoutButton.innerText = 'Checkout ($' + total.toFixed(2) + ')';
  }
 
  // Event listeners
  for (let i = 0; i < items.length; i++) {
    quantities[i].addEventListener('change', funct

- 阅读更多 -

【JavaScript】JavaScript日期和时间的格式化：

System

2024-08-07

所有,javascript




// 定义一个函数，用于将日期转换为YYYY-MM-DD格式
function formatDate(date) {
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');
    return `${year}-${month}-${day}`;
}
 
// 定义一个函数，用于将日期和时间转换为YYYY-MM-DD HH:MM:SS格式
function formatDateTime(date) {
    const datePart = formatDate(date);
    const hours = date.getHours().toString().padStart(2, '0');
    const minutes = date.getMinutes().toString().padStart(2, '0');
    const seconds = date.getSeconds().toString().padStart(2, '0');
    return `${datePart} ${hours}:${minutes}:${seconds}`;
}
 
// 使用示例
const now = new Date();
console.log(formatDate(now)); // 输出日期
console.log(formatDateTime(now)); // 输出日期和时间

这段代码定义了两个函数formatDate和formatDateTime，分别用于将日期和日期时间对象格式化为"YYYY-MM-DD"和"YYYY-MM-DD HH:MM:SS"的格式。这是一个简单的日期格式化示例，可以教会初学者如何进行日期和时间的组合与格式化。

- 阅读更多 -

html+js+css做的扫雷

System

2024-08-07

所有,css

要使用HTML、CSS和JavaScript制作一个简单的扫雷游戏，您可以参考以下示例代码：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mine Sweeper</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="game">
    <table>
        <!-- Table rows and cells will be added dynamically using JavaScript -->
    </table>
</div>
<button id="restart">Restart Game</button>
 
<script src="script.js"></script>
</body>
</html>

CSS (styles.css):




#game {
    margin: 10px auto;
    border-collapse: collapse;
}
 
#game table {
    border: 1px solid #000;
}
 
#game td {
    width: 20px;
    height: 20px;
    border: 1px solid #000;
    text-align: center;
    line-height: 20px;
}
 
#game td.mine {
    color: red;
}
 
#game td.swept {
    background-color: #ccc;
}
 
#game td.swept-safe {
    background-color: #bada55;
}
 
#restart {
    display: block;
    margin: 20px auto;
    padding: 5px 10px;
    cursor: pointer;
}

JavaScript (script.js):




const ROWS = 10;
const COLS = 10;
const MINES = 10;
 
let gameOver = false;
let mines = [];
let safeCells = [];
 
function initGame() {
    let table = document.createElement('table');
    document.getElementById('game').appendChild(table);
    for (let i = 0; i < ROWS; i++) {
        let row = table.insertRow();
        for (let j = 0; j < COLS; j++) {
            let cell = row.insertCell();
            cell.dataset.row = i;
            cell.dataset.col = j;
            cell.addEventListener('click', sweep);
        }
    }
    placeMines();
}
 
function placeMines() {
    mines = [];
    for (let i = 0; i < MINES; i++) {
        let row = Math.floor(Math.random() * ROWS);
        let col = Math.floor(Math.random() * COLS);
        if (!mines.includes(`${row}-${col}`)) {
            mines.push(`${row}-${col}`);
            document.querySelector(`td[data-row="${row}"][data-col="${col}"]`).classList.add('mine');
        }
    }
}
 
function sweep(e) {
    if (gameOver) return;
    let cell = e.target;
    if (cell.classList.contains('mine')) {
        alert('Game over!');
        gameOver = true;
        mines.forEach(mine => {
            document.querySelector(`td[data-row="${mine.split('-')[0]}"][data-col="${mine.split('-')[1]}"]`).classList.add('swept');
        });
        cell.classList.add('swept');
    }

- 阅读更多 -

“艾在救援” 登录、查药功能实现（Ajax，Jason，javascript）

System

2024-08-07

所有,ajax

以下是一个简化的示例，展示了如何使用JavaScript、Ajax和JSON实现登录和查药的功能：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Medical Rescue</title>
    <script>
        function login() {
            var username = document.getElementById('username').value;
            var password = document.getElementById('password').value;
            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/login', true);
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    alert('Login result: ' + response.message);
                }
            };
            xhr.send(JSON.stringify({ username: username, password: password }));
        }
 
        function searchMedicine() {
            var medicineName = document.getElementById('medicineName').value;
            var xhr = new XMLHttpRequest();
            xhr.open('GET', '/search?medicineName=' + encodeURIComponent(medicineName), true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    alert('Search result: ' + response.medicineInfo);
                }
            };
            xhr.send();
        }
    </script>
</head>
<body>
    <h1>Medical Rescue</h1>
    <h2>Login</h2>
    <input type="text" id="username" placeholder="Username" />
    <input type="password" id="password" placeholder="Password" />
    <button onclick="login()">Login</button>
 
    <h2>Search Medicine</h2>
    <input type="text" id="medicineName" placeholder="Medicine Name" />
    <button onclick="searchMedicine()">Search</button>
</body>
</html>

在这个例子中，我们定义了两个函数login()和searchMedicine()，它们通过Ajax请求与服务器交互。login()函数使用POST方法发送JSON格式的登录信息，而searchMedicine()函数使用GET方法发送搜索请求。服务器应响应这些请求并返回JSON格式的响应。

请注意，这个代码示例假定服务器端已经实现了相应的路由和逻辑来处理这些请求。此外，实际应用中应该使用HTTPS来保护用户数据，并对输入进行验证和清理以避免XSS攻击和其他安全问题。

- 阅读更多 -