html求助

查看 52|回复 3
作者:菜鸟天堂   
求大佬做一下以下代码,输入指定邀请码:123 点注册跳转到a.html,不用邀请码点击游客访问跳到b.html,不同意条款的勾不打无法游客访问跟注册,就算输入邀请码。
[XHTML] 纯文本查看 复制代码
H5

[url=]返回[/url]
用户注册
[url=]登录[/url]
       
        邀请码
        
        
   
    [url=]同意条款[/url]
   

游客, 大佬

gc588   

您可以尝试使用以下 JavaScript 代码来实现输入指定邀请码后跳转到 a.html,否则点击“游客访问”按钮跳转到 b.html,且必须勾选同意条款才能进行注册或游客访问:
[JavaScript] 纯文本查看 复制代码// 获取页面元素
var input = document.querySelector('.input');
var btn = document.querySelector('.yzm');
var checkbox = document.querySelector('input[type="checkbox"]');
var submitBtn = document.querySelector('.btndl input[type="submit"]');
// 点击“游客访问”按钮时跳转到 b.html
btn.onclick = function() {
    window.location.href = 'b.html';
};
// 监听表单提交事件
submitBtn.onclick = function(event) {
    // 如果未勾选同意条款,则阻止提交
    if(!checkbox.checked) {
        event.preventDefault();
        alert('请先同意条款!');
    }
    // 如果输入的邀请码为 123,则继续提交表单并跳转到 a.html,否则阻止提交
    else if(input.value !== '123') {
        event.preventDefault();
        alert('邀请码不正确!');
    }
    // 否则,直接提交表单
    else {
        submitBtn.disabled = true; // 防止多次提交
    }
};
在上述代码中,我们首先通过 `document.querySelector()` 方法获取了页面中的相关元素,然后给“游客访问”按钮和注册表单提交按钮分别绑定了 `onclick` 事件处理函数。在表单提交时,我们判断是否勾选了同意条款和输入的邀请码是否正确,如果都正确则继续提交表单并禁用提交按钮防止多次提交。否则,我们使用 `event.preventDefault()` 方法取消默认的提交行为并弹出相应的提示信息。
gc588   

[XHTML] 纯文本查看 复制代码
    H5
   
   
   
   
   
   

   
        [url=]返回[/url]
        用户注册
        [url=]登录[/url]
   
   
        
            
                邀请码
               
               
            
            同意条款
            
        
   
   

在 XHTML 中,需要在文档开头声明 XML 版本和编码方式,以及 DOCTYPE 的声明。此外,XHTML 要求所有标签必须有相应的闭合标签,并使用小写字母表示标签名和属性名。此外,所有属性值都必须使用引号括起来。在上述代码中,我们针对这些要求进行了相应的修改。
另外,针对表单提交事件的处理,我们使用了一个名为 `submitForm()` 的 JavaScript 函数来实现。在该函数中,我们首先获取了输入邀请码的文本框和同意条款的复选框的状态,然后根据这些状态进行相应的判断和操作。如果勾选了同意条款并输入了正确的邀请码,则跳转到 a.html;否则,弹出相应的提示信息。
菜鸟天堂
OP
  


gc588 发表于 2023-5-13 19:58
[mw_shl_code=xhtml,true]

css 是这样的,现在用上你改好的代码不对齐了
@charset "utf-8";
/* CSS Document */
* {
        margin: 0px;
        padding: 0px;
}
body {
        font-family: "Microsoft Yahei", "Calibri";
        font-size: 14px;
        background-color: #FFF;
        color:#777;
}
a {
        /*-webkit-transition: all 0.3s ease-in;
        -moz-transition: all 1s ease-in;
        -o-transition: all 1s ease-in;*/
}
a {
        cursor: pointer;
        text-decoration: none;
        color: #777;
}
a:hover {
        color: #09C;
}
li {
        list-style: none
}
img {
        border: 0;
}
textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="button"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-input:focus {
        border-color: rgba(82,168,236,0.8);
        outline: 0;
}
/*头部*/
.head {
        width: 100%;
        height: 50px;
        background: rgba(100,207,250,1);
        /*background:#093;*/
        text-align: center;
        color: #fff;
        line-height: 50px;
        position: fixed;
        top: 0;
}
.head_lf
{
        width:20%;
        float:left;
}
.head_lf img
{
        vertical-align:middle;
}
.head_ct
{
        width:65%;
        float:left;
}
.head a
{
        color:#fff;
}
.head_rg
{
        width:15%;
        float:right;
}
/*登录*/
.login
{
        width:100%;
        margin-top:100px;
}
.text
{
        padding:0px 40px;
        border-bottom:1px solid #ddd;
}
.login .name
{
        background:url(../images/name.png) no-repeat;
        background-position:9px
}
.login .pwd
{
        background:url(../images/pwd.png) no-repeat;
        background-position:9px
}
.login .text input
{
        width:100%;
        height:42px;
        line-height:42px;
        font-family:"Microsoft Yahei", "Calibri";
        border:0;
        color:#434343;
}
.tip
{
        width:100%;
        margin-top:15px;
        overflow:hidden;
}
.tip a
{
        float:right;
        padding:0px 15px;
        color:#09C;
}
.tip a input
{
        margin-right:5px;
        vertical-align: -1.5px;
}
.btndl
{
        width:100%;
        text-align:center;
        margin-top:40px;
}
.btndl input
{
        width:88%;
        height:42px;
        color:#fff;
        border:0;
        font-family:"Microsoft Yahei", "Calibri";
        cursor:pointer;
        font-size:16px;
        background:rgba(51,153,255,1);
        border-radius:5px;
}
/*注册*/
.zhuce
{
        width:100%;
        margin-top:100px;
}
.zhuce .text
{
        line-height:42px;
        padding:3px 10px;
        border-bottom:1px solid #ddd;
        display:block;
        overflow:hidden;
}
.zhuce .text span
{
        width:20%;
        float:left;
        text-align:center;
}
.zhuce .text .input
{
        width:80%;
        height:42px;
        font-family:"Microsoft Yahei", "Calibri";
        border:0;
        float:left;
        text-indent:20px;
}
.zhuce .text .yzm
{
        width:25%;
        text-align:left;
}
.zhuce .text .yzm input
{
        border:0;
        padding:3px;
        font-family:"Microsoft Yahei", "Calibri";
        background-color:rgba(255,153,0,1);
        color:#fff;
        cursor:pointer;
        font-size:12px;
}
/*底部*/
.foot {
        width: 100%;
        height: 50px;
        background: rgba(218,218,218,1);
        /*background:#D0D0D0;*/
        text-align: center;
        color: #666;
        position: fixed;
        bottom: 0;
}
.foot a {
        width: 20%;
        text-align: center;
        float: left;
        display: block;
}
.foot a:hover{
        color:#F30
}
.now {
        color: #F30;
}
.foot span{
        width:100%;
        display:block;
}
.foot span img{
        width:20px;
        padding-top:5px;
}
您需要登录后才可以回帖 登录 | 立即注册