首页 » 前端笔记 » 如何利用明文密码,设置密码框,输入密码显示前端内容?

如何利用明文密码,设置密码框,输入密码显示前端内容?

admin 2019-06-06 185 views 0

扫一扫用手机浏览

如何利用明文密码,设置密码框,输入密码显示前端内容?

如何利用明文密码,设置密码框,输入密码显示前端内容?

有的时候,我们的网站前端页面,只需要设置一个简单的明文密码。那么该如何实现这个要求呢?请看下方代码。

第一、编写一个密码框,并且用display: none隐藏需要密码确认的内容:

<div class="Password"><input type="Password" id="Password" placeholder="请输入密码" /><input id="submit" type="submit" value="确认" /></div>
<div style="display: none;" class="pro_index_sc">这里是需要密码输入后,才能显示的内容</div>

第二、JavaScript里面写入判定语句:

<script type="text/javascript">
	$('#submit').click(function(){
		var password=$('#Password').val();
			if(password == 1234){
			$(".Password").hide();
			$(".pro_index_sc").show();
		}
	});
</script>

第三、经过上面两步,可是发现仍然还是无法实现其功能,那是因为还需要引入一个jQuery:

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>


赞(4 打赏
  • 微信
  • 支付宝
  • QQ钱包

您的支持,是我继续努力的动力!

本文由晨美工作室原创并发布于晨美博客,若需转载请设置版权!

转载请注明本文地址:https://www.chenmei.cn/26.html

最后编辑于:2019/06/06作者: admin

相关文章

阿里云如何申请配置ssl证书

阿里云SSL证书,在云上签发各品牌数字证书,实现网站HTTPS化,使网站可信,防劫持、防篡改、防监听。并进行统一生命周期管理,简化...

前端笔记 2019-07-04 阅读130 评论0

使用CSS3实现表格隔行/隔列变色

废话少说,先看效果,如果不是你想要的,你可以撤了。这些都是css控制的,然后我们看下样式:table tr:nth-ch...

前端笔记 2019-05-17 阅读99 评论0

发表评论