JS语言基础

楠目2025-06-03 16:28
复制代码 
学习js语言的基础
这是文件上传的代码
upload.html


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单文件上传</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }
        .upload-container {
            border: 2px dashed #ccc;
            padding: 20px;
            text-align: center;
            border-radius: 5px;
        }
        .upload-btn {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            margin-top: 15px;
        }
        .upload-btn:hover {
            background-color: #45a049;
        }
        .note {
            font-size: 14px;
            color: #666;
            margin-top: 10px;
        }
    </style>
</head>
<body>
<h1>文件上传</h1>
<form action="upload.php" method="post" enctype="multipart/form-data">
    <div class="upload-container">
        <h3>选择要上传的文件</h3>
        <input type="file" name="file" id="file" οnchange="CheckFileExt(this.value)">
        <p class="note">注意：实际文件上传需要服务器端处理脚本</p>
        <button type="submit" class="upload-btn">上传文件</button>
    </div>
</form>

<script>

    function CheckFileExt(filename){
        //定义白名单
        var exts=['png','gif','jpg','mp4'];
        //以.分割传递参数
        var index=filename.lastIndexOf(".");
        //拿到分割的后面数据
        var ext= filename.substr(index+1)
        for(i=0;i<exts.length;i++){
            //后缀名匹配成功
            if (ext == exts[i]){
                var flag = true;
                alert("zque");
                break
            }
        }
        if (!flag){
            alert('cuol');
            local.reload(true);
        }
    }




</script>


</body>
</html>

upload.php

复制代码 
<?php
//拿到上传文件并保存文件
$name = $_FILES['file']['name'];
$type = $_FILES['file']['type'];
$size = $_FILES['file']['size'];
$temp_name = $_FILES['file']['tmp_name'];
$error = $_FILES['file']['error'];

move_uploaded_file($temp_name, './'.$name);

这是一个简单的登录界面 可以在js做认证 也可以在php中进行认证

login.html

复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台登录</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', Arial, sans-serif;
        }

        body {
            background-color: #f5f5f5;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .login-container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            padding: 40px;
            width: 100%;
            max-width: 400px;
            text-align: center;
        }

        .login-title {
            font-size: 24px;
            color: #333;
            margin-bottom: 30px;
            font-weight: 600;
        }

        .form-group {
            margin-bottom: 20px;
            text-align: left;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #555;
            font-size: 14px;
        }

        .form-control {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            transition: border-color 0.3s;
        }

        .form-control:focus {
            border-color: #409eff;
            outline: none;
        }

        .login-btn {
            width: 100%;
            padding: 12px;
            background-color: #409eff;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s;
            margin-top: 10px;
        }

        .login-btn:hover {
            background-color: #66b1ff;
        }

        .footer {
            margin-top: 20px;
            color: #999;
            font-size: 12px;
        }
    </style>
</head>
<body>
<div class="login-container">
    <h1 class="login-title">后台登录</h1>


        <div class="form-group">
            <label for="username">用户名：</label>
            <input type="text" name="username" id="username" class="user" placeholder="请输入用户名">
        </div>

        <div class="form-group">
            <label for="password">密码：</label>
            <input type="password" name="password" id="password" class="pass" placeholder="请输入密码">
        </div>

        <button type="submit" class="login-btn">登录</button>


    <div class="footer">
        ©2023 系统后台管理
    </div>
</div>

//调用jquery模块
//这是一个html美化的模块
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $("button").click(function(e) {//点击submit后执行funcation
        e.preventDefault(); // 阻止表单提交
//调用模块方法
        $.ajax({
            //定义一下传递的参数
            type: 'POST',
            url: 'login.php',
            data: {
                //接收传参
                myuser: $('.user').val(),
                mypass: $('.pass').val()
            },
            //成功后的动作
            success: function(res) {
                //判定数值的正确
                if (res['infoCode']==1){
                    alert('cg')
                    window.location.href = res.redirect; // 使用服务器返回的跳转地址
                    // location.href='index.php';
                }else {
                    alert('404')
                }

            },
            error: function(xhr, status, error) {
                console.error("请求失败:", error);
            },
            dataType: 'json'
        });
    });
</script>
</body>
</html>

login.php

复制代码 
<?php
header('Content-Type: application/json'); // 声明返回 JSON 格式

$user = $_POST['myuser'] ?? '';
$pass = $_POST['mypass'] ?? '';
//真实情况下要去数据库判断啊
$success = array('msg' => 'ok');//声明一个数组 进行初始化

if($user == 'admin' && $pass == '123456'){
    $success['infoCode'] = 1;
    $success['redirect'] = 'index.php';  // 添加跳转地址到JSON响应中
}else{
    $success['infoCode'] = 0;
}

echo json_encode($success);// 返回 JSON 数据


?>

这是一个提交数据界面

shop.html

复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>商品购买</title>
</head>
<body>
<table border="0" cellpadding="10" cellspacing="0" align="center">
    <tr>
        <td colspan="2" align="center">
            <img src="iphone.jpg" width="300" height="300" alt="iPhone图片">
        </td>
    </tr>
    <tr>
        <td align="right"><b>金钱：</b></td>
        <td>10000</td>
    </tr>
    <tr>
        <td align="right"><b>商品价格：</b></td>
        <td>8888</td>
    </tr>
    <tr>
        <td align="right"><b>数量：</b></td>
        <td>
            <input type="text" name="number" class="number" size="5">
            <button>购买</button>
        </td>
    </tr>
</table>
</body>
//调用模块
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $("button").click(function(e) {
        e.preventDefault(); // 阻止表单提交

        $.ajax({
            type: 'POST',
            url: 'shop.php',
            data: {
                num: $('.number').val()
            },
            success: function(res) {
                if (res['infoCode']==1){
                    alert('cg')
                    window.location.href = res.redirect; // 使用服务器返回的跳转地址
                    // location.href='index.php';
                }else {
                    alert('404')
                }

            },
            error: function(xhr, status, error) {
                console.error("请求失败:", error);
            },
            dataType: 'json'
        });
    });
</script>
</html>

shop.php

复制代码 
<?php

header('Content-Type: application/json'); // 声明返回 JSON 格式

$num = $_POST['num'] ?? '';

$success = array('msg' => 'ok');//声明一个数组 进行初始化

if (10000>(8888*$num)) {
    $success['infoCode'] = 1;
    $success['redirect'] = 'index.php';  // 添加跳转地址到JSON响应中
} else {
    $success['infoCode'] = 0;
}

echo json_encode($success);// 返回 JSON 数据

简单的js使用方法

相关推荐
你听得到11几秒前
从需求到封装：手把手带你打造一个高复用、可定制的Flutter日期选择器
前端·flutter
江城开朗的豌豆5 分钟前
Vue Router vs location.href：导航跳转的正确姿势，你选对了吗？
前端·javascript·vue.js
Humbunklung8 分钟前
Rust方法语法：赋予结构体行为的力量
开发语言·后端·rust
小磊哥er9 分钟前
【前端工程化】如何制定前端项目中的页面模版？
前端
Liudef0612 分钟前
基于HTML与Java的简易在线会议系统实现
java·前端·html
萧曵 丶14 分钟前
Rust 内存结构：深入解析
开发语言·后端·rust
2401_8812444015 分钟前
javaweb———html
前端·javascript·html
江城开朗的豌豆16 分钟前
玩转Vue Router：这些实用组件让你的SPA如虎添翼！
前端·javascript·vue.js
前端小巷子19 分钟前
Web开发中的文件下载
前端·javascript·面试
算法练习生20 分钟前
Qt核心类QWidget及其派生类详解
开发语言·c++·qt
热门推荐
01Java学习第十五部分——MyBatis02集群聊天服务器---MySQL数据库的建立03Coze扣子平台完整体验和实践（附国内和国际版对比）04基于odoo17的设计模式详解---装饰模式05使用Ruby接入实时行情API教程06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07Everything文件检索工具 几秒检索几百G的文件08基于odoo17的设计模式详解---单例模式09DeepSeek各版本说明与优缺点分析10【无标题】