初学javascript
Posted CircleSmart的个人博客
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了初学javascript相关的知识，希望对你有一定的参考价值。
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>
初步学习，不足之处请指教。
以上是关于初学javascript的主要内容，如果未能解决你的问题，请参考以下文章