体彩排列五:JS实现点击按钮可实现编辑功能

江西多乐彩11选5走势图 www.ptdvv.cn  更新时间:2018年07月03日 17:12:34   作者:錢先生   我要评论

本文通过一段实例代码给大家介绍了基于js实现点击按钮可编辑效果,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的的朋友参考下吧

具体代码如下所示:

<script type="text/javascript">
//修改密码
//抓取到的数据
function edit() {
document.getElementById("ps").style.display = "none";
document.getElementById("pw").style.display = "";
document.getElementById("of").style.display = "";
var butt = document.getElementById("btt");
butt.value = "修 改";
butt.onclick = function () {
save();//第二次单击的时候执行这个函数
};
}
//取消健
function off() {
var pass = document.getElementById('ps');
var pws = document.getElementById("pw");
var butt = document.getElementById("btt");
document.getElementById("of").style.display = "none",
butt.value = "编 辑";
pws.style.display = "none";
pass.innerHTML = pws.value;
pass.style.display = "";
butt.onclick = function () {
edit();//还原第一次单击的时候执行的函数
};
}
//编辑之后的状态
function save() {
var pass = document.getElementById('ps');
var pws = document.getElementById("pw");
var butt = document.getElementById("btt");
butt.setAttribute("type","submit");
butt.value = "编 辑";
pws.style.display = "none";
pass.innerHTML = pws.value;
pass.style.display = "";
butt.onclick = function () {
edit();//还原第一次单击的时候执行的函数
};
}
</script>
</p>
<form action="oneself.php" method="post">
<p style="font: 16px '宋体';">姓名: <input type="text" name="name" value="张三" /></p>
<p style="font: 16px '宋体';">账号: <input type="text" name="handset" value="13888888888" /></p>
<p style="font: 16px '宋体';">密码: <span id="pass" style="border: 1px solid gray; width: 200px;">888888</span> <textarea id="ei" style="display: none;" name="newpass">888888</textarea> <input id="btt" onclick="edit();" type="button" name="btt" value="编 辑" /> <input id="of" style="display: none;" onclick="off();" type="button" name="of" value="取 消" /></p>
</form>

总结

以上所述是小编给大家介绍的JS实现点击按钮可实现编辑功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 基于javascript实现图片懒加载

    基于javascript实现图片懒加载

    这篇文章主要介绍了javascript实现图片懒加载的方法及思路,有时我们需要用懒加载,也就是延迟加载图片的方式,来提高网站的亲和力,需要的朋友可以参考下
    2016-01-01
  • js与applet相互调用的方法

    js与applet相互调用的方法

    这篇文章主要介绍了js与applet相互调用的方法,结合实例形式分析了js调用java的applet以及java调用js的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • 基于BootStrap的文本编辑器组件Summernote

    基于BootStrap的文本编辑器组件Summernote

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器。这篇文章主要介绍了基于BootStrap的文本编辑器组件Summernote的相关资料,需要的朋友可以参考下
    2017-10-10
  • js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)

    js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,00

    这篇文章主要介绍了js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000),需要的朋友可以参考下
    2014-06-06
  • js跨域请求的5中解决方式

    js跨域请求的5中解决方式

    这篇文章主要介绍了js跨域请求的5中解决方式的相关资料,需要的朋友可以参考下
    2015-07-07
  • js购物车实现思路及代码(个人感觉不错)

    js购物车实现思路及代码(个人感觉不错)

    提起购物车想必只有在一些购物网站上才可以看得到,下面为大家介绍下使用js实现的购物车,感兴趣的朋友可以参考下
    2013-12-12
  • JS实现超简洁网页title标题跑动闪烁提示效果代码

    JS实现超简洁网页title标题跑动闪烁提示效果代码

    这篇文章主要介绍了JS实现超简洁网页title标题跑动闪烁提示效果代码,涉及JavaScript结合定时函数动态操作页面元素属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • js仿腾讯QQ的web登陆界面

    js仿腾讯QQ的web登陆界面

    这篇文章主要为大家详细介绍了JavaScript模仿腾讯QQ的web登陆界面,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • Javascript 模式实例 中介者模式

    Javascript 模式实例 中介者模式

    页面上,用户会有很多的操作 ,每进行一次操作我们需要去展示操作的结果,在这里我们有了一个问题,我们应如何去展示不同的结果呢?
    2010-04-04
  • 基于JS实现EOS隐藏错误提示层代码

    基于JS实现EOS隐藏错误提示层代码

    本文给大家分享一段代码基于js实现EOS隐藏错误提示层,对eos隐藏提示层的相关知识感兴趣的朋友一起学习吧
    2016-04-04

最新评论

706| 490| 459| 573| 990| 265| 804| 166| 881| 787|