zoukankan      html  css  js  c++  java
  • JavaScript自学笔记一

    1.onload和onunload是打开与关闭页面事件,可以用来出cookie。

     1 <!DOCTYPE html>
     2 <html>
     3 <body onload="checkCookies()"> //打开body页面的时候触发函数
     4  
     5 <script>
     6 function checkCookies()
     7 {
     8 if (navigator.cookieEnabled==true) //检查cookie并弹窗提示
     9     {
    10     alert("已启用 cookie")
    11     }
    12 else
    13     {
    14     alert("未启用 cookie")
    15     }
    16 }
    17 </script>
    18  
    19 <p>提示框会告诉你,浏览器是否已启用 cookie。</p>
    20 </body>
    21 </html>

    2.onchange是在改变时触发。

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <script>
     6 function myFunction()
     7 {
     8 var x=document.getElementByIdx_x("fname");
     9 x.value=x.value.toUpperCase(); //toUpperCase大写转换
    10 }
    11 </script>
    12 </head>
    13 <body>
    14  
    15 请输入英文字符:<input type="text" id="fname" onchange="myFunction()">
    16 <p>当您离开输入字段时,会触发将输入文本转换为大写的函数。</p>
    17  
    18 </body>
    19 </html>

    3.onmouseover和onmouseout,鼠标移入和移除时触发。

     1 <!DOCTYPE html>
     2 <html>
     3 <body>
     4  
     5 <!-- this表示当前元素,所以在Function里就不必使用getElementById来获取元素了。-->
     6 <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>
     7  
     8 <script>
     9 function mOver(obj)
    10 {
    11 obj.innerHTML="谢谢"
    12 }
    13  
    14 function mOut(obj)
    15 {
    16 obj.innerHTML="把鼠标移到上面"
    17 }
    18 </script>
    19  
    20 </body>
    21 </html>

    4.onmousedown鼠标按下,onmouseup鼠标弹起,onclick鼠标点击。

     1 <!DOCTYPE html>
     2 <html>
     3 <body>
     4  
     5 <div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green;color:#ffffff;90px;height:20px;padding:40px;font-size:12px;">请点击这里</div>
     6 <br>
     7 <div onClick="mClick(this)" style="background-color:green;color:#ffffff;90px;height:20px;padding:40px;font-size:12px;">用onClick来触发函数,实现变色</div>
     8 <script>
     9 function mDown(obj)
    10 {
    11 obj.style.backgroundColor="#1ec5e5";
    12 obj.innerHTML="请释放鼠标按钮";
    13 }
    14  
    15 function mUp(obj)
    16 {
    17 obj.style.backgroundColor="green";
    18 obj.innerHTML="请按下鼠标按钮";
    19 }
    20 //用onClick来实现变色,第1次学习的灯泡就是用这个onclick来触发实现。
    21 function mClick(obj)
    22 {
    23 if (obj.style.backgroundColor.match("green"))
    24     {
    25      obj.style.backgroundColor="red";
    26      obj.innerHTML="用onClick来触发函数,实现变色";
    27     }
    28     else
    29     {
    30      obj.style.backgroundColor="green";
    31      obj.innerHTML="用onClick来触发函数,实现变色";
    32     }
    33 }
    34 </script>
    35  
    36 </body>
    37 </html>
  • 相关阅读:
    彻底弄懂GMT、UTC、时区和夏令时
    揭秘webpack loader
    揭秘webpack plugin
    封装axios
    webpack优化之玩转代码分割和公共代码提取
    node.js操作数据库之MongoDB+mongoose篇
    GitHub项目徽标
    Java中容易遗漏的小知识点( 一 )(为了和小白一样马上要考试的兄弟准备的,希望小白和大家高过不挂)
    QNX Message Passing,一个让人头秃的 IPC BUG
    【百面】02_模型评估
  • 原文地址:https://www.cnblogs.com/gmblog/p/3826455.html
Copyright © 2011-2022 走看看