Java学习第三天-CSDN博客

本文链接：https://blog.csdn.net/h_h_1122/article/details/96907133

location 在删除功能上，使用标签触发一个函数，函数去定位一个Action方法，执行该Action方法
location.reload(location)：不会出现重试对话框达到刷新的效果
location.replace(location)：replace该方法主要用于将字符串中符合匹配条件的字符串替换成其他的
字符串，返回替换后的字符串，且源字符串不变。

匿名函数：
<script type="text/javascript">
       var area=function(width,height){
           document.write("面积是："+width*height);
       }
       area(3,4);
   </script>

系统函数：
1.parselnt函数将字符串转换为整数。它从字符串的开头开始解析，在第一个非整数位置停止解析并返回前面读到
的所有整数。如果字符串不是以整数开头，将返回NAN（not a number:非数字值）。
2.parseFloat()函数和parselnt（）函数类似，只不过它是返回一个浮点数。
3.isNaN()函数用于判断参数是否是NaN（不是数字）。如果是NaN，那么isNaN函数返回true,否则返回false
4.eval()函数运行以字符串形式表示的javascript代码串，并返回执行代码串后的结果。
<script type="text/javascript">
       function calc(){
           var express=document.getElementById("info").value;
           var result=eval(express);
           alert("输入在文本框的表达式的结果是："+result.value);
       }
   </script>
   <input type="text" id="info" />
   <input type="button" value="计算" id="btn" οnclick="calc()" />

事件与处理程序的绑定
1.在事件源对象所对应的HTML标签上增加一个要处理的事件属性，让事件属性值等于处理该是事件的函数名或程序代码
实例：
当单击段落时，文本的大小改成30px
<script type="text/javascript">
           function changeSize(){
               var obj=document.getElementById("txt");
               obj.style.fontSize="30px";
           }
       </script>
   <p id="txt" οnclick="changeSize()">事件与处理程序的绑定</p>
2.用匿名函数简化：
document.getElementById("txt").οnclick=function(changeSize){
               this.style.fontSize="30px";

常用事件
1.onclick事件：鼠标单击页面元素时触发的事件
<script type="text/javascript">
           function showGender(obj){
               alert("您选择的性别是："+obj.value);
           }
       </script>
       性别：<input type="radio" name="gender" value="男" οnclick="showGender(this)" />男
       <input type="radio" name="gender" value="女" οnclick="showGender(this)" />女

2.onload,onunload事件
onload事件会在页面加载完成后立即发生
用户关闭或刷新网页时触发onunload事件
<body οnunlοad="alert('触发了onload事件')">
       <script type="text/javascript">
           window.οnlοad=function(){
               window.status="欢迎来到百度页面";
           }

3.onblur事件：指光标或者焦点离开元素后触发的事件
<p>请输入密码：<input type="password" id="txtPwd" οnblur="checkPwd()" /> </p>
       <script type="text/javascript">
           function checkPwd(){
               var pwd=document.getElementById("txtPwd").value;
               if(pwd.length>=6){
                   alert("密码输入正确！");

               }else{
                   alert("密码的长度必须在6位以上");
               }
           }

4.onchange事件：通常指输入框的值发生了变化或者改变下列列表框的选项会触发onchange事件
友情链接：<select οnchange="changeLink(this)">
       <option value="请选择">请选择</option>
       <option value="http://www.letv.com/">乐视网高清</option>
       <option value="http://sports.sina.com.cn/">新浪体育</option>
   </select>
   <script type="text/javascript">
       function changeLink(obj){
           var site=obj.value;
           if(site!="请选择"){
               window.open(site);
           }
       }
   </script>

5.onmouseover和onmouseout事件
指鼠标移入移出页面元素时触发的事件。
当鼠标移入到滚动的图片时，图片停止滚动，当鼠标移出图片时，图片继续滚动
<body>
   <marquee direction="right" οnmοuseοver="stop()" οnmοuseοut="start()">
       <img src="img/mouse.jpg" />
   </marquee>
   </body>

6.onsubmit事件
<script type="text/javascript">
      function check(){
          event.returnValue=false;

      }
   </script>
   <form action="info.html" οnsubmit="check()">
      <input type="submit" value="提交" />
   </form>

仿QQ界面代码：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
   </head>

   <body bgcolor="blue">
   <table align="center"     border="0" cellspacing="0" cellpadding="0" style="width: 400px; height: 500px; border-bottom-style:outset;" >
       <tr>
           <td colspan="5" style="width: 30%;height: 30%; border-collapse: inherit; background:aqua;"><b><img style="width: 40px;height: 40px;" src="img/QQ.PNG" >QQ</b></td>
       </tr>
       <tr>
           <td style=" text-align: center;"><img style="width: 100px;height: 60px;text-align: center;" src="img/图像.jpg" >
           <form style="background:aqua;width: 40%;border: 0;padding: 120px;color: #FFFFFF;font-size: 14px; ">
           <input type="text" placeholder="账号" id="user_name"/>
            <input type="password" placeholder="密码" id="password"/>
            <button style="width: 97%;background:blue;padding: 6px;color: #FFFFFF;font-size: 14px; " id="login">登录</button>
            <p class="message">还没有账户? <a href="#">注册账户</a></p>
            </form>
       </td>
   </tr>
</table>
</body>
</html>

运行结果：