标签 Javascript 下的文章

2024-08-25

以下是一个简单的实现整屏滚动fullpage功能的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>Fullpage Scroll Example</title>
<style>
  * {
    margin: 0;
    padding: 0;
  }
  html, body {
    height: 100%;
  }
  .fullpage {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .section {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
</style>
</head>
<body>
<div class="fullpage">
  <div class="section" style="background-color: #f0f0f0;">Section 1</div>
  <div class="section" style="background-color: #e0e0e0;">Section 2</div>
  <div class="section" style="background-color: #d0d0d0;">Section 3</div>
  <div class="section" style="background-color: #c0c0c0;">Section 4</div>
</div>
 
<script>
  document.body.addEventListener('wheel', (event) => {
    const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    const scrollHeight = document.documentElement.scrollHeight;
    const innerHeight = window.innerHeight;
    const isScrollingDown = event.deltaY > 0;
    const isScrollTop = scrollTop === 0;
    const isScrollBottom = scrollTop + innerHeight >= scrollHeight;
 
    if ((isScrollingDown && isScrollTop) || (!isScrollingDown && isScrollBottom)) {
      event.preventDefault();
    }
  }, { passive: false });
</script>
</body>
</html>

这段代码使用了HTML定义了一个包含四个部分的全屏滚动容器，CSS用于设置布局和样式，JavaScript用于处理滚动事件，确保了在到达顶部或底部时阻止滚动事件，实现了全屏滚动的效果。

System

2024-08-25

所有,css




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面信息验证</title>
    <style>
        .error {
            color: red;
            margin-left: 5px;
        }
    </style>
</head>
<body>
    <form id="registrationForm">
        用户名: <input type="text" id="username" name="username"><br><br>
        密码: <input type="password" id="password" name="password"><br><br>
        确认密码: <input type="password" id="confirm_password" name="confirm_password"><br><br>
        邮箱: <input type="email" id="email" name="email"><br><br>
        <input type="submit" value="注册">
    </form>
 
    <script>
        document.getElementById('registrationForm').onsubmit = function(e) {
            e.preventDefault();
 
            var username = document.getElementById('username').value;
            var password = document.getElementById('password').value;
            var confirm_password = document.getElementById('confirm_password').value;
            var email = document.getElementById('email').value;
 
            // 验证用户名
            if (username.length < 6) {
                showError('用户名长度必须大于6个字符。');
                return;
            }
 
            // 验证密码
            if (password !== confirm_password) {
                showError('密码和确认密码不匹配。');
                return;
            }
 
            // 验证邮箱
            if (!email.includes('@')) {
                showError('请输入有效的邮箱地址。');
                return;
            }
 
            // 验证通过，提交表单
            this.submit();
        };
 
        function showError(errorMessage) {
            alert(errorMessage);
        }
    </script>
</body>
</html>

这段代码实现了一个简单的注册页面，并在用户尝试提交表单时进行验证。如果任何验证规则失败，它将显示一个错误消息，并取消表单的提交。如果所有验证都通过，它将提交表单。这个例子教会了如何使用JavaScript进行简单的表单验证，并展示了如何通过alert函数显示错误消息。

System

2024-08-25

所有,css

在CSS中，我们可以使用通配选择器（*）来清除所有元素的默认样式，但这种做法并不推荐，因为它会影响性能。在实际开发中，我们通常只会重置必要的样式，以确保跨浏览器的一致性。

以下是一个示例，展示了如何重置边距和填充：




/* 重置边距和填充 */
* {
  margin: 0;
  padding: 0;
}
 
/* 其他样式规则 */
body {
  font-family: Arial, sans-serif;
  background-color: #f8f8f8;
}
 
/* 更多样式 */

在这个例子中，我们使用通配选择器将所有元素的margin设置为0，将所有元素的padding设置为0。然后，我们为body设置了一个基本的字体和背景颜色，并且可以添加更多的样式规则来完善整个网页的样式。

- 阅读更多 -

【核心代码】JS+ajax无刷新验证短信验证码和缓存中的是否一致提交表单

System

2024-08-25

所有,ajax




// 发送短信验证码并验证的函数
function sendSMSAndVerify(phoneNumber, formData) {
    $.ajax({
        url: '/api/sms/send', // 发送短信验证码的API接口
        type: 'POST',
        data: { phone: phoneNumber },
        dataType: 'json',
        success: function(response) {
            if (response.status === 'success') {
                // 短信发送成功，缓存验证码
                sessionStorage.setItem('smsCode', response.code);
                // 开始验证短信验证码
                verifySMSCode(phoneNumber, response.code, formData);
            } else {
                alert('短信发送失败，请稍后重试。');
            }
        },
        error: function() {
            alert('请求失败，请检查网络连接。');
        }
    });
}
 
// 验证短信验证码的函数
function verifySMSCode(phoneNumber, code, formData) {
    $.ajax({
        url: '/api/sms/verify', // 验证短信验证码的API接口
        type: 'POST',
        data: { phone: phoneNumber, code: code },
        dataType: 'json',
        success: function(response) {
            if (response.status === 'success') {
                // 验证成功，提交表单
                $('#yourForm').submit();
            } else {
                alert('验证码错误。');
            }
        },
        error: function() {
            alert('请求失败，请检查网络连接。');
        }
    });
}
 
// 假设你有一个表单的id为yourForm，电话号码字段为phone
// 当用户提交表单时，执行以下操作：
$('#yourForm').submit(function(e) {
    e.preventDefault(); // 阻止表单默认提交行为
    var phoneNumber = $('#phone').val(); // 获取电话号码
    var formData = $(this).serialize(); // 序列化表单数据
    sendSMSAndVerify(phoneNumber, formData); // 发送短信并验证
});

这段代码首先定义了sendSMSAndVerify函数，该函数通过AJAX调用发送短信验证码的API接口，并在成功获取验证码后调用verifySMSCode函数进行验证。verifySMSCode函数则用于验证用户输入的验证码是否与缓存中的验证码一致，一致则提交表单，不一致则给出错误提示。最后，当用户尝试提交表单时，我们阻止了表单的默认提交行为，并调用sendSMSAndVerify函数进行操作。

- 阅读更多 -

jsp页面上传图片后不显示，页面控制台报404（最新解决）

System

2024-08-25

所有,ajax

报错解释：

HTTP 404 错误表示客户端能够与服务器通信，但服务器找不到请求的资源。在 JSP 页面上传图片后不显示且控制台报 404 错误，可能的原因通常有：

图片上传成功，但没有正确地显示在页面上。可能是因为图片的路径不正确，或者图片标签的属性设置有误。
上传的图片没有保存在预期的目录中，或者保存后的路径不正确。
服务器配置问题，如 web.xml 中的servlet映射错误，或者servlet没有正确处理图片上传的请求。
文件权限问题，上传的图片文件可能没有正确的读取权限。

解决方法：

确认图片上传成功，检查图片是否已保存在预期目录。
检查图片标签的路径是否正确，确保路径指向正确的文件夹和文件。
检查服务器配置，包括 web.xml 中的servlet配置和相关的servlet代码。
确认文件权限设置正确，确保服务器有权限访问上传的图片文件。
如果使用框架（如Spring MVC），确保相关的controller方法能正确处理图片上传请求。

如果以上步骤无法解决问题，可以进一步检查服务器日志文件，查看更详细的错误信息，以便进行针对性的排查。

System

2024-08-25

所有,ajax

在这个系列中，我们将使用AJAX、Node.js、Webpack和Git来构建一个简单的前后端分离的应用程序。这个应用程序将使用RESTful API进行数据交换。

系列目标：

了解AJAX的基本使用。
学习Node.js的基本知识，并使用Express框架。
使用Webpack进行前端资源的管理和打包。
学习Git的基本用法，用于版本控制。

系列教程：

准备工作：安装Node.js和npm，并创建一个新的项目文件夹。
使用npm初始化Node.js项目，并安装Express框架。
创建一个简单的RESTful API服务器。
使用Webpack设置开发环境和模块打包。
使用AJAX发送HTTP请求并处理响应。
实现前端的用户界面和事件处理。
使用Git进行版本控制。
部署应用程序到生产环境。

示例代码：




// 安装依赖
npm install express webpack webpack-cli webpack-dev-server html-webpack-plugin -D
 
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
 
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist',
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
  devServer: {
    contentBase: './dist',
  },
};
 
// index.js (入口文件)
const express = require('express');
const app = express();
const port = 3000;
 
app.get('/api/greeting', (req, res) => {
  const name = req.query.name || 'World';
  res.setHeader('Content-Type', 'application/json');
  res.send(JSON.stringify({ message: `Hello, ${name}!` }));
});
 
app.listen(port, () => {
  console.log(`Server running on http://localhost:${port}`);
});
 
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AJAX App</title>
</head>
<body>
  <input type="text" id="name" placeholder="Enter your name">
  <button id="send">Send</button>
  <div id="response"></div>
 
  <script>
    document.getElementById('send').addEventListener('click', function () {
      const name = document.getElementById('name').value;
      const xhr = new XMLHttpRequest();
      xhr.open('GET', `/api/greeting?name=${encodeURIComponent(name)}`, true);
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          const response = JSON.parse(xhr.responseText);
          document.getElementById('response').textContent = response.message;
        }
      };
      xhr.send();
    });
  </script>
</body>
</html>

在这个示例中，我们创建了一个简单的Express服务器，它提供了一个API端点/api/greeting，当用户在输入框中输入名字并点击按钮时，会通过AJAX请求这个API并显示响应。

注意：

这只是一个简化的示例，实际应用程序会更复杂。
为了安全起见，任何用

- 阅读更多 -

JavaScript前端Dom节点转Base64发给后端

System

2024-08-25

所有,ajax

要将前端的DOM节点转换为Base64编码图片并发送给后端，你可以使用HTML5 Canvas来实现。以下是一个简单的示例：




function domToImage(domNode, callback) {
    // 创建一个空的canvas元素
    var canvas = document.createElement('canvas');
    // 如果DOM节点有定义宽度和高度，则canvas大小应该与之匹配
    canvas.width = domNode.offsetWidth;
    canvas.height = domNode.offsetHeight;
    // 绘制domNode到canvas上
    var ctx = canvas.getContext('2d');
    // 如果节点有背景图片，需要等背景图片加载完成后再进行转换
    ctx.drawImage(domNode, 0, 0);
 
    // 转换canvas为Base64图片
    canvas.toDataURL('image/png', 1.0).then(function(base64Image) {
        // 发送Base64编码给后端
        fetch('your-backend-endpoint', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                image: base64Image
            })
        }).then(response => response.json())
        .then(data => callback(data))
        .catch(error => console.error('Error:', error));
    });
}
 
// 使用示例
domToImage(document.getElementById('your-dom-node-id'), function(responseData) {
    console.log('Image sent to backend:', responseData);
});

在上面的代码中，domToImage 函数接受两个参数：domNode 是需要转换的DOM节点，callback 是一个回调函数，用于处理后端响应。函数首先创建一个canvas元素，然后将DOM节点绘制到canvas上，并最终将canvas转换为Base64编码的图片，并通过fetch API发送到后端。

请确保替换 'your-backend-endpoint' 为你的实际后端API地址，并根据实际需求调整图片质量（canvas.toDataURL('image/png', 1.0)中的1.0是图片质量，范围从0.0到1.0，1.0是最高质量）。

- 阅读更多 -

学习使用js实现数字转大写和大额数字转换万、千万、亿、万亿等单位的方法

System

2024-08-25

所有,javascript




function toCapital(n) {
    const fraction = ['角', '分'];
    const digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
    const unit = [
        ['元', '万', '亿'], 
        ['', '拾', '佰', '仟']
    ];
    let head = n < 0 ? '负' : '';
    n = Math.abs(n);
    let s = '';
 
    function toWan(n) {
        let wan = Math.floor(n / 10000);
        let yi = n % 10000;
        if (wan) {
            s += (digit[wan] + unit[0][0])
                .replace('零', '')
                .replace('一', '十')
                .replace(/零$/, '');
            s += (yi ? toYi(yi) : unit[0][0]) + unit[1][1];
        } else {
            s += toYi(yi) || '零';
        }
        return s;
    }
 
    function toYi(n) {
        let qian = Math.floor(n / 1000);
        let bai = n % 1000;
        s += (qian ? (digit[qian] + unit[0][2]).replace('零', '') : '');
        s += toBai(bai);
        return s;
    }
 
    function toBai(n) {
        let shi = Math.floor(n / 100);
        let ge = n % 100;
        s += (shi ? (digit[shi] + unit[1][2]).replace('零', '') : '');
        s += (ge ? (digit[ge] + unit[1][0]).replace('零', '') : '');
        return s;
    }
 
    s = toBai(Math.floor(n / 100)).replace('零', '');
    s += (n % 100 ? (digit[Math.floor(n % 100 / 10)] + fraction[0]).replace('零', '') : '');
    s += (n % 10 ? digit[n % 10] + fraction[1] : '整');
    return head + s;
}
 
// 使用示例
console.log(toCapital(0.11)); // 零角壹分
console.log(toCapital(123456789.99)); // 壹亿贰仟叁佰肆拾伍万陆仟伍拾拾元玖分

这段代码实现了将一个小数转换为中文大写金额的功能。代码中定义了toCapital函数，它接受一个数字作为参数，并返回该数字的中文大写形式。函数首先处理负数，然后将数值转为绝对值，并使用递归函数toWan、toYi和toBai来处理万、亿、和百亿以下的金额单位。最后，将结果拼接并返回。

- 阅读更多 -

推荐项目：轻量级JavaScript YAML解析器 —— YAML.js

System

2024-08-25

所有,javascript

YAML.js 是一个轻量级的纯 JavaScript 实现，用于解析和生成 YAML 字符串。以下是如何使用 YAML.js 进行 YAML 字符串的解析和生成的简单示例：

解析 YAML 字符串：




// 引入 YAML.js
const YAML = require('yamljs');
 
// 定义 YAML 字符串
const yamlString = `
name: Example
version: 1.0.0
`;
 
// 解析 YAML 字符串
const parsedYAML = YAML.parse(yamlString);
console.log(parsedYAML); // 输出: { name: 'Example', version: '1.0.0' }

生成 YAML 字符串：




// 引入 YAML.js
const YAML = require('yamljs');
 
// 定义 JSON 对象
const jsonObject = {
  name: 'Example',
  version: '1.0.0'
};
 
// 生成 YAML 字符串
const yamlString = YAML.stringify(jsonObject);
console.log(yamlString); // 输出: name: Example\nversion: '1.0.0'\n

这个示例展示了如何使用 YAML.js 来解析和生成 YAML 字符串。在实际应用中，你需要确保 YAML.js 已经被正确安装到你的项目中，通常可以通过 npm 安装：




npm install yamljs

- 阅读更多 -

HTML＋CSS＋JS 登录页面的代码结构入门_登录页面js代码

System

2024-08-25

所有,javascript




// 页面加载完成后执行的函数
window.onload = function() {
    // 获取登录按钮
    var loginButton = document.getElementById('login-button');
    // 为登录按钮添加点击事件监听器
    loginButton.addEventListener('click', function() {
        // 获取用户名和密码输入框的值
        var username = document.getElementById('username').value;
        var password = document.getElementById('password').value;
 
        // 简单的验证，如果用户名和密码都不为空，则提示登录成功
        if (username !== '' && password !== '') {
            alert('登录成功！');
            // 在这里可以添加登录成功后的代码，例如跳转到另一个页面
        } else {
            // 否则提示用户输入不能为空
            alert('用户名和密码不能为空！');
        }
    });
};

这段代码在用户点击登录按钮时，会检查用户名和密码是否为空。如果不为空，则提示登录成功；如果为空，则提示用户输入不能为空。这是一个非常基础的登录验证例子，实际应用中需要根据需求进行扩展和完善，比如加入表单验证、异步请求后端接口等。

- 阅读更多 -