这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JS 基于 onclick 事件实现单个按钮的编辑与保存功能, 结合实例形式分析了 JS 实现 onclick 响应事件的转换相关操作技巧, 具有一定参考借鉴价值, 需要的朋友可以参考下
本文实例讲述了 JS 基于 onclick 事件实现单个按钮的编辑与保存功能。分享给大家供大家参考,具体如下:
该实例可以实现点击同一个按钮实现编辑和保存的功能:
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>
- test
- </title>
- </head>
- <body>
- <span id="xs">
- 欢迎来到phperz!phperz提供专业的源码示例与素材下载!
- </span>
- <textarea id="ei" style="display:none;width:300px;">
- 欢迎来到phperz!phperz提供专业的源码示例与素材下载!
- </textarea>
- <br/>
- <input type="button" onclick="edit();" id="btt" name="btt" value="Edit"
- />
- <script type="text/javascript">
- //Edit content
- function edit() {
- document.getElementById("xs").style.display = "none";
- document.getElementById("ei").style.display = "";
- var butt = document.getElementById("btt");
- butt.value = "Save";
- butt.onclick = function() {
- save(); //第二次单击的时候执行这个函数
- };
- }
- //Save content
- function save() {
- var cxs = document.getElementById('xs');
- var ei = document.getElementById("ei");
- var butt = document.getElementById("btt");
- butt.value = "Edit";
- ei.style.display = "none";
- cxs.innerHTML = ei.value;
- cxs.style.display = "";
- butt.onclick = function() {
- edit(); //还原第一次单击的时候执行的函数
- };
- }
- </script>
- </body>
- </html>
运行效果图如下:
PS: 关于 javascript 常用事件及相关说明还可参考本站在线工具:
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0721/327749.html