(已解决)html问题大家帮忙看看 - 讨论/求助

已掉线，重新登录

首页 > 绿虎论坛 > 历史版块 > 编程 > PHP > 讨论/求助

标题: (已解决)html问题大家帮忙看看

时间: 2019-05-10发布，2019-05-10修改

点击: 19818

我网上找了个（密码锁登录界面样式特效网页素材），我拿来做个密码登入界面，输入指定密码就能进入指定网页，但是研究了半天发现密码不知道哪里改，懂得帮忙看看，比如密码设置为123456，成功后自动跳转进入baidu.com！
1557422445.zip（11.57 KB）
上面是完整包，懒得下载的，我把重要代码贴上来
index.html文件内容：

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Password Modal with Finite State Machine</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<form id="app" class="ui-modal" data-state="idle" autocomplete="off">
<div class="ui-icon">
<div class="ui-lock"></div>
</div>
<div class="ui-title">This link is password-protected</div>
<div class="ui-subtitle">
<span data-show="idle validating">
Please enter the password to view this link.
</span>
<span data-show="error" class="ui-error">
Invalid password
</span>
<span data-show="success">
<a class="ui-link" href="https://davidkpiano.github.io/xstate" target="_blank">davidkpiano.github.io/xstate</a>
</span>
</div>
<div class="ui-password">    
<input type="password" name="" id="" class="ui-password-input" placeholder="the password is password" />
</div>
<button class="ui-submit">Submit</button>
<button class="ui-reset" type="button" title="Reset"></button>
</form>
<script src='js/xstate.js'></script>
<script  src="js/index.js"></script>
</body>
</html>

js/index.js文件内容：

console.clear();
var elApp = document.querySelector('#app');
var elButton = document.querySelector('.ui-submit');
var elPassword = document.querySelector('.ui-password-input');
var elReset = document.querySelector('.ui-reset');

var externalState = {
  password: ''
};

var actions = {
  updatePassword: function updatePassword(xs, event) {
    return {
      password: event.value
    };
  },
  validatePassword: function validatePassword(xs) {
    setTimeout(function () {
      if (xs.password === 'password') {
        send('VALID');
      } else {
        send('INVALID');
      }
    }, 2000);
  },
  'after(2s) reset': function after2sReset() {
    setTimeout(function () {
      elPassword.value = '';
      send('RESET');
    }, 2000);
  },
  clearPassword: function clearPassword() {
    elPassword.value = '';
    return { password: '' };
  }
};

var passwordMachine = xstate.Machine({
  initial: 'idle',
  states: {
    idle: {
      onEntry: ['clearPassword'],
      on: {
        SUBMIT: 'validating',
        CHANGE: {
          idle: { actions: ['updatePassword'], internal: true }
        }
      }
    },
    validating: {
      onEntry: ['validatePassword'],
      on: {
        VALID: 'success',
        INVALID: 'error'
      }
    },
    error: {
      onEntry: ['after(2s) reset']
    },
    success: {}
  },
  on: {
    RESET: '.idle'
  }
});

var state = passwordMachine.initialState;

function activate(state) {
  elApp.dataset.state = state.value;

  document.querySelectorAll('[data-active]').forEach(function (el) {
    el.removeAttribute('data-active');
  });

  document.querySelectorAll('[data-show~="' + state.value + '"]').forEach(function (el) {
    el.setAttribute('data-active', true);
  });
}

activate(state);

function send(event) {
  state = passwordMachine.transition(state, event);

  state.actions.forEach(function (action) {
    var actionFn = actions[action];
    Object.assign(externalState, actionFn(externalState, event));
  });

  activate(state);
}

elButton.addEventListener('click', function () {
  return send('SUBMIT');
});
elPassword.addEventListener('input', function (e) {
  return send({ type: 'CHANGE', value: e.target.value });
});
elApp.addEventListener('submit', function (e) {
  e.preventDefault();
  send('SUBMIT');
});
elReset.addEventListener('click', function () {
  return send('RESET');
});

[隐藏样式|查看源码]

『回复列表(23|隐藏机器人聊天)』

1 .

看不懂我猜是改这个if (xs.password === 'password')
如果不是请问楼下大佬
http://qianxun.ml