javascript基础(上)

xiaoxiao2021-02-28  63

1.javaScript:

世界上最流行的脚本语言;

属于web语言;

被设计为html页面增加交互性;

2.写入html输出:

<script type="text/javascript">

 document.write("<h1>this is a javascript!</h1>");

 document.write("<font size=4>this is a javascript!</font>");

</script>

不属于任何函数的语句,即加载即可执行;

只能在html输出中使用document.write();在文档加载后使用会覆盖整个页面;

3.onclick的四个框:

  <head>

    <title>javascript.html</title>          <script type="text/javascript">     //警告框     function text(){     alert("OFF");     }     //确认框     function textconfirm(){     alert(confirm("Del"));     }     //询问框     function textprompt(){     prompt("password","123654");     }     //双击框     function textdbl(){     alert("你双击了我!");     }     </script>   </head>      <body>   <input type="button" value="alert" οnclick="text()"/>   <input type="button" value="Del" οnclick="textconfirm()"/>   <input type="button" value="确认" οnclick="textprompt()"/>   <input type="button" value="双击" οndblclick="textdbl()"/>   </body>

4.document属性获取:

<head>

   <script>

function textimg(){ var textimg = document.getElementById("imgid"); alert(textimg.value); alert(textimg.type); alert(textimg.src); // document.getElementById("imgid").value = "1234"; }     </script>   </head>      <body>   <input type="button" value="alert" οnclick="text()"/><br/>   <input type="button" value="Del" οnclick="textconfirm()"/><br/>   <input type="button" value="确认" οnclick="textprompt()"/><br/>   <input type="button" value="双击" οndblclick="textdbl()"/><br/> <input type="button" value="获取" οnclick="email()"/> <input type="text" id="mail"/> <img src="u==0.jpg" width="200px" height="200px" border="2px" οnclick="textimg()"/> <input type="text" id="imgid">   </body>

5.单次点击更改页面图片

<head>

<script type="text/javascript"> function email(){ var email = document.getElementById("mail"); alert(email.id); alert(email.src); email.src = "img/hhh.png"; } </script>   </head>      <body>     <input type="button" value="获取" οnclick="email()"/> <img src="img/hhh.png" style="width: 200px;height: 200px;" /> <img src="img/1f.jpg" style="width: 200px;height: 200px;" id="mail"/>   </body>

6.反复点击按钮转换图片

<head> <script type="text/javascript"> function email(){ var email = document.getElementById("mail"); if(email.src.match("1f.jpg")){ email.src = "img/hhh.png"; }else{ email.src = "img/1f.jpg"; } } </script>   </head>      <body>     <input type="button" value="获取" οnclick="email()"/><br/> <img src="img/hhh.png" style="width: 200px;height: 200px;" /><br/> <img src="img/1f.jpg" style="width: 200px;height: 200px;" id="mail"/>   </body> 7.点击图片转换图片 <head> <script type="text/javascript"> function email(obj){ // var email = document.getElementById("mail"); if(obj.src == "http://pc-7thboy:8080/new009/img/1f.jpg"){ obj.src = "http://pc-7thboy:8080/new009/img/hhh.png"; }else{ obj.src = "http://pc-7thboy:8080/new009/img/1f.jpg"; } } </script>   </head>      <body>   <!--      <input type="button" value="获取" οnclick="email()"/><br/>     --> <img src="img/hhh.png" style="width: 200px;height: 200px;" οnclick="email(this)"/><br/> <img src="img/1f.jpg" style="width: 200px;height: 200px;" id="mail"/>   </body>

转载请注明原文地址: https://www.6miu.com/read-40514.html

最新回复(0)