web开发之JS学习(三)与用户进行交互的操作
2016-11-09 21:39
441 查看
其实写这篇文章,就是想把我目前看到的与用户交互的方式总结一下子。
首先呢,是第一种,不废话,直接写一段实例看看:(还是那句话好记星不如烂笔头,自己敲一遍最好,哪怕是照着别人的代码抄一段)
(一)用户输入型
这是一种右用户自己输入的类型,显示的方式有这么几种,第一就是像上面的实例一样,在原文档流里显示,第二种是以弹出框的类型显示给用户。
(二)点击按钮显示新窗口交互
<span style="font-size:18px;color:#CC0000;"><span style="font-size:14px;color:#000000;"><!DOCTYPE html>
<html>
<body>
<script>
function myFunction()
{
try
{
var x=document.getElementById("demo").value; //注意取的是id为demo文档里的值
if(x=="") throw "值为空";
if(isNaN(x)) throw "不是数字";
if(x>10) throw "太大";
if(x<5) throw "太小";
}
catch(err)
{
<span style="color:#FF0000;">txt="错误原因:\n\n";
txt+=err+"\n\n";
txt+="continue.\n\n"; //以新的窗口显示信息
alert(txt);
}</span>
}
</script>
<h1>我的第一个 JavaScript 程序</h1>
<p>请输入 5 到 10 之间的数字:</p>
<input id="demo" type="text">
<button onclick="myFunction()">测试输入值</button>
</body>
</html></span></span>效果:
其实看到这些效果,感觉和python编写GUI 很相似。
首先呢,是第一种,不废话,直接写一段实例看看:(还是那句话好记星不如烂笔头,自己敲一遍最好,哪怕是照着别人的代码抄一段)
(一)用户输入型
<span style="font-size:18px;color:#CC0000;"><span style="font-size:14px;color:#000000;"><!DOCTYPE html> <html> <body> <script> function myFunction() { try { var x=document.getElementById("demo")<span style="color:#FF0000;">.value</span>; <span style="color:#FF0000;">//注意取的是id为demo文档里的值</span> if(x=="") throw "值为空"; if(isNaN(x)) throw "不是数字"; if(x>10) throw "太大"; if(x<5) throw "太小"; } catch(err) { <span style="color:#FF0000;">var y=document.getElementById("mess"); //基本就是公式了,用来显示错误信息的</span> y.innerHTML="错误:" + err + "。"; } } </script> <h1>我的第一个 JavaScript 程序</h1> <p>请输入 5 到 10 之间的数字:</p> <input id="demo" type="text"> <span style="color:#FF0000;"><p id="mess"></p> //这一条语句别拉下了,不然在原文档流显示不出来错误信息,当然也可以用alert属性在新的文档流显示出来。</span> <button onclick="myFunction()">测试输入值</button> //提交答案的按钮 </body> </html> <span style="font-size:18px;color:#FF0000;">结果:</span> </span></span>
这是一种右用户自己输入的类型,显示的方式有这么几种,第一就是像上面的实例一样,在原文档流里显示,第二种是以弹出框的类型显示给用户。
(二)点击按钮显示新窗口交互
<span style="font-size:18px;color:#CC0000;"><span style="font-size:14px;color:#000000;"><!DOCTYPE html>
<html>
<body>
<script>
function myFunction()
{
try
{
var x=document.getElementById("demo").value; //注意取的是id为demo文档里的值
if(x=="") throw "值为空";
if(isNaN(x)) throw "不是数字";
if(x>10) throw "太大";
if(x<5) throw "太小";
}
catch(err)
{
<span style="color:#FF0000;">txt="错误原因:\n\n";
txt+=err+"\n\n";
txt+="continue.\n\n"; //以新的窗口显示信息
alert(txt);
}</span>
}
</script>
<h1>我的第一个 JavaScript 程序</h1>
<p>请输入 5 到 10 之间的数字:</p>
<input id="demo" type="text">
<button onclick="myFunction()">测试输入值</button>
</body>
</html></span></span>效果:
其实看到这些效果,感觉和python编写GUI 很相似。
相关文章推荐
- AutoCAD 二次开发学习系列【4】 - 实现CPropertySheet进行用户交互
- web开发,让用户流水线进行操作,不可返回后退
- web开发,让用户流水线进行操作,不可返回后退
- 【产品经理】交互设计学习笔记之《如何进行用户研究》
- [EntLib]微软企业库5.0 学习之路——第九步、使用PolicyInjection模块进行AOP—PART4——建立自定义Call Handler实现用户操作日志记录
- 从C#到Objective-C,循序渐进学习苹果开发(7)--使用FMDB对Sqlite数据库进行操作
- 学习web开发,理解HTML,XHTML,XML,CSS,JS等技术的关系后,眼界会更宽(publish by sunwei)
- php学习笔记(九) php与web页面进行交互
- 利用OpenShift托管Node.js Web服务进行微信公众号开发
- WEB前端开发学习----6.CSS 和 JS 在html的使用方法
- 快速使用node.js进行web开发
- node.js 开发指南 – Node.js 连接 MySQL 并进行数据库操作
- 交互设计学习笔记之《如何进行用户研究》【交互设计】
- android学习之 webview 原生与js的交互
- Delphi开发学习二:使用ADOQuery控件对SQL数据库表进行操作
- 【android】 在高版本中进行WebView与js交互需要注意的问题
- Web开发敏捷之道-应用Rails进行敏捷Web开发-第三版 在用rails3.2学习过程中遇到的问题及解决方法
- Android应用开发-------------WebView(一)之WebView与服务器端的Js交互
- Skyline软件二次开发初级——9如何在WEB页面中的三维地图上进行交互
- android开发中,webview的js与Native code交互