HTML登录跳转

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>登录系统</title>
  </head>
  <body> 
      <input type="text" id="name" value="" placeholder="账号"/> 
      <input type="password" id="password" value="" placeholder="密码"/> 
      <button onclick="sendMsg1()">注册</button>
      <button onclick="sendChat1()">登录</button>

    <script>
      function sendMsg1(){
          alert("注册成功");
      }

      function sendChat1(){
         alert("正在登录点击确定跳转");
         let isConfirmed = confirm("确定要跳转到空白页面吗？");
         if (isConfirmed) {
            window.open("about:blank", "_blank");
         } else {
            console.log("用户取消了操作");
         }
      }
    </script>
  </body>
</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>
    <!-- 引入 Tailwind CSS 进行快速样式开发 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* 自定义动画效果 */
        .fade-in {
            animation: fadeIn 0.5s ease-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        /* 输入框聚焦时的过渡效果 */
        .input-transition {
            transition: all 0.3s ease;
        }
    </style>
</head>
<body class="bg-gradient-to-br from-blue-500 to-purple-600 min-h-screen flex items-center justify-center font-sans">

    <!-- 登录卡片容器 -->
    <div class="bg-white p-8 rounded-2xl shadow-2xl w-full max-w-md fade-in relative overflow-hidden">
        <!-- 装饰性背景圆 -->
        <div class="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-blue-400 to-purple-500"></div>
        
        <div class="text-center mb-8">
            <h1 class="text-3xl font-bold text-gray-800 mb-2">欢迎回来</h1>
            <p class="text-gray-500 text-sm">请输入您的账号和密码以继续</p>
        </div>

        <!-- 表单区域 -->
        <div class="space-y-6">
            <!-- 账号输入 -->
            <div>
                <label for="name" class="block text-sm font-medium text-gray-700 mb-1">账号</label>
                <input 
                    type="text" 
                    id="name" 
                    placeholder="请输入用户名" 
                    class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none input-transition bg-gray-50 focus:bg-white"
                >
            </div>

            <!-- 密码输入 -->
            <div>
                <label for="password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                <input 
                    type="password" 
                    id="password" 
                    placeholder="请输入密码" 
                    class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none input-transition bg-gray-50 focus:bg-white"
                >
            </div>

            <!-- 按钮组 -->
            <div class="flex gap-4 pt-2">
                <button 
                    onclick="handleRegister()" 
                    class="flex-1 py-3 px-4 border border-gray-300 rounded-lg text-gray-700 font-medium hover:bg-gray-50 hover:border-gray-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-200"
                >
                    注册
                </button>
                <button 
                    onclick="handleLogin()" 
                    class="flex-1 py-3 px-4 bg-blue-600 rounded-lg text-white font-medium hover:bg-blue-700 shadow-lg shadow-blue-500/30 transition-all duration-200 transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                >
                    登录
                </button>
            </div>
        </div>

        <!-- 底部提示 -->
        <div class="mt-6 text-center text-xs text-gray-400">
            &copy; 2026 登录系统演示. All rights reserved.
        </div>
    </div>

    <script>
        /**
         * 处理注册逻辑
         * 简单提示注册成功
         */
        function handleRegister() {
            const name = document.getElementById('name').value;
            if (!name) {
                alert("请输入账号后再注册");
                return;
            }
            // 模拟注册成功
            alert("注册成功！欢迎加入，" + name);
        }

        /**
         * 处理登录逻辑
         * 1. 检查输入
         * 2. 弹出确认框
         * 3. 确认后跳转到空白页
         */
        function handleLogin() {
            const name = document.getElementById('name').value;
            const password = document.getElementById('password').value;

            // 简单的前端验证
            if (!name || !password) {
                alert("请填写完整的账号和密码");
                return;
            }

            // 模拟登录加载状态（可选优化体验）
            const loginBtn = document.querySelector('button[onclick="handleLogin()"]');
            const originalText = loginBtn.innerText;
            loginBtn.innerText = "验证中...";
            loginBtn.disabled = true;
            loginBtn.classList.add('opacity-75', 'cursor-not-allowed');

            setTimeout(() => {
                // 恢复按钮状态
                loginBtn.innerText = originalText;
                loginBtn.disabled = false;
                loginBtn.classList.remove('opacity-75', 'cursor-not-allowed');

                // 核心逻辑：弹出确认框
                let isConfirmed = confirm("登录验证通过！\n\n确定要跳转到空白页面吗？");

                if (isConfirmed) {
                    // 用户点击“确定”：在新标签页打开空白页
                    // about:blank 是浏览器内置的空白页面地址
                    window.open("about:blank", "_blank");
                    
                    // 如果希望当前页也变空白，可以使用:
                    // window.location.href = "about:blank";
                } else {
                    // 用户点击“取消”：停留在当前页，不做跳转
                    console.log("用户取消了跳转操作");
                }
            }, 500); // 模拟500ms网络延迟
        }
    </script>
</body>
</html>