CircleSmart的个人博客

一步一个脚印

博客园 首页 新随笔 联系 订阅 管理

1.javascript实现的简单运算器

<HTML>
<HEAD>
<script type="text/javascript">
function cal()
{
var opt=document.getElementById("opt").value;
var num1=document.getElementById("num1").value;
var num2=document.getElementById("num2").value;
if(isNaN(num1)||isNaN(num2))
{
alert("请输入数字!");
}
if(opt==1)
{
var num3=parseInt(num1)+parseInt(num2);
document.getElementById("sum").value=num3;
}
if(opt==2)
{
var num3=parseInt(num1)-parseInt(num2);
document.getElementById("sum").value=num3;
}
if(opt==3)
{
var num3=parseInt(num1)*parseInt(num2);
document.getElementById("sum").value=num3;
}
if(opt==4)
{
var num3=parseInt(num1)/parseInt(num2);
document.getElementById("sum").value=num3;
}
}
</script>
</HEAD>

<BODY>
<p>请输入两个数进行简单的运算</p>
<form>
<input type="text" name="num1" id="num1" size="10"/>
<select id="opt" name="opt">
<option value="1">+</option>
<option value="2">-<option>
<option value="3">×<option>
<option value="4">÷<option>
<input type="text" name="num2" id="num2"size="10"/>
<input type="button" value="=" onclick="cal()"/>
<input type="text" name="sum" id="sum" size="10" />
</select>
</form>
</BODY>
</HTML>

2.表单验证

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script type="text/javascript">
function vert()
{
var usr=document.getElementById("username").value;
var pwd=document.getElementById("password").value;
if(usr==''||usr==null||pwd==''||pwd==null)
{
document.getElementById("errormsg").innerHTML="用户名或密码不能为空!"
}
if((pwd.length<4||pwd.length>8)&&pwd.length>0)
{
document.getElementById("errormsg").innerHTML="请输入4到8位之间的密码!"
}
}
</script>
</HEAD>

<BODY>
<br><br>
<span id="errormsg"></span>
<br>
姓名:<input type="text" id="username" />
<br>
密码:<input type="password" id="password" />
<br>
<input type="button" value="提交" onclick="vert()" />
</BODY>
</HTML>

3.Date

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello</title>
<script type="text/javascript">
function sayHello()
{
var time=new Date();
var h=time.getHours();
if(h>=5&&h<=8){
alert("早上好");
}else if(h>8&&h<=12){
alert("上午好!");
}else if(h>12&&h<=18){
alert("下午好!");
}else if(h>18&&h<=21){
alert("晚上好!");
}else if(h>21&&h<=23){
alert("祝你晚安!");
}else if(h>23&&h<=5){
alert("网虫:该休息了,明天还有课呢!");
}
}
</script>
</head>
<body>
<br>
<br>
<input type="button" value="问候" onclick="sayHello()" />
</body>
</html>

4.document.getElementsByName的用法

<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单处理</title>
<script type="text/javascript">
function disp()
{
var fel=document.getElementsByName("feeling");
var jm=document.getElementsByName("jiemu");
var felstr="您感觉本站 ";
var jmstr="你希望本站出现以下栏目:";

for (var i=0;i<fel.length;i++)
{
if(fel[i].checked==true)
{
if(fel[i].value==1){
felstr+="非常好";
}
else if(fel[i].value==2){
felstr+="好";
}
else if(fel[i].value==3){
felstr+="一般";
}
}
}
for (var i=0;i<jm.length;i++)
{
if(jm[i].checked==true)
{
if(jm[i].value==1){
jmstr+="[新闻] ";
}
else if(jm[i].value==2){
jmstr+="[娱乐] ";
}
else if(jm[i].value==3){
jmstr+="[教育] ";
}
}
}

alert(felstr+"\n"+jmstr);

}
</script>
</head>
<body>
<h3>在线调查</h3>
您感觉本站的主页效果如何(单选):<br>
<input type="radio" name="feeling" value="1">非常好
<input type="radio" name="feeling" value="1">好
<input type="radio" name="feeling" value="3">一般
<br>
您希望本站出现以下栏目(多选):<br>
<input type="checkbox" name="jiemu" value="1">新闻
<input type="checkbox" name="jiemu" value="2">娱乐
<input type="checkbox" name="jiemu" value="3">教育
<br>
<input type="button" value="提交" onclick="disp()" />
</body>
</html>

初步学习,不足之处请指教。

posted on 2016-11-09 23:53  circlesmart  阅读(226)  评论(0编辑  收藏  举报