JS函数与事件

最新推荐文章于 2023-01-14 17:30:21 发布

z宁缺毋滥

最新推荐文章于 2023-01-14 17:30:21 发布

阅读量469

点赞数 1

本文链接：https://blog.csdn.net/zyirong/article/details/79547355

版权

一、使用JS制作简单计算器
1.在body里面先建立计算器页面。
   ①第一个操作数框
   ②第二个操作数框
   ③加减乘除按钮的设置
   ④计算结果的显示
2.编写函数语句
    Ⅰ、编写加法计算函数语句
        document.getElementById("result").value=n1+n2;    //将n1和n2的值相加给result这个控件的value中
    Ⅱ、编写减法计算函数语句
        document.getElementById("result").value=n1-n2;    //将n1和n2的值相减给result这个控件的value中
    Ⅲ、编写乘法计算函数语句
        document.getElementById("result").value=n1*n2;
    Ⅳ、编写除法计算函数语句
        document.getElementById("result").value=n1/n2;    //注意除数不能为0
3.body调用函数控制计算

完整代码：
<title>简单计算器</title>
<script type="text/javascript">
function fun(op)                        //定义函数
{
var n1=parseFloat(document.getElementById("num1").value);      //将第一个数控件的值赋给n1，使用了id属性
var n2=parseFloat(document.getElementById("num2").value);     //将第二个数控件的值赋给n2，使用了id属性
if(op=='+')
   {
document.getElementById("result").value=n1+n2;
   }
else if(op=='-')
   {
document.getElementById("result").value=n1-n2;
   }
else if(op=='*')
   {
document.getElementById("result").value=n1*n2;
   }
else if(op=='/')
   {
       if(n2!=0)
document.getElementById("result").value=n1/n2;
    else
    {
  alert("除数不能为0")
    }
   }
}
</script>
</head>

二、使用JS制作简单登录页面：
1.创建页面框架：建立一个两行三列的表格
<table align="center" >
<tr>
<td width="70">卡号：</td>
<td width="200">
<input type="text" value="请注意格式：10****" id="s1" οnfοcus="fun()" />
</td>
<td>
<span ></span>
</td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" id="s2" οnfοcus="fun2()"/></td>
</tr>
</table>
2.定义函数，控制页面中控件的输入及格式。
<script type="text/javascript">
function fun()
{
var d=document.getElementById("s1");   //将ID属性为s1的控件值赋给d
d.focus();                                                //d这个控件获得焦点，即光标在d这个控件上
d.value="";                                             //d这个控件值设置为空
}
function fun2()
{   var d=document.getElementById("s1");             //将ID属性为s1的控件值赋给d
if(d.value.substr(0,2)!=10||isNaN(d.value))    //substr(0,2)表示字符串截取两位，从第0位开始截取。如果
                                        d控件中的值前两位不等于10或者不是数字时，执行花括号语句。
{
  alert("卡号输入格式有误");
  d.value=""                             //d这个控件值设置为空
  d.focus();                               //d这个控件获得焦点，即光标在d这个控件上
}
}
</script>

完整代码：
<title>登录界面</title>
<script type="text/javascript">
function fun()
{
var d=document.getElementById("s1");
d.focus();
d.value="";
}
function fun2()
{   var d=document.getElementById("s1");
if(d.value.substr(0,2)!=10||isNaN(d.value))
{
  alert("卡号输入格式有误");
  document.getElementById("s1").value=""
  d.focus();
}
}
</script>
</head>