javascript一些基本的代码

1.javascript计算器

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>javascript计算器</title>
 <script type="text/javascript">
      
    function cal(op){
         var num1 = parseFloat(document.myform.num1.value);
      var num2 = parseFloat(document.myform.num2.value); 
     
      if(op=='+'){
           document.myform.result.value=num1+num2;
      }
      
      if(op=='-'){
           document.myform.result.value=num1-num2;
      }
      
      if(op=='*'){
           document.myform.result.value=num1*num2;
      }    
      
      if(op=='/'){
           document.myform.result.value=num1/num2;
      }
    }
   
 </script>
</head>
<body>
  <form name="myform" method="post">
    <input type="text" name="num1" value=""><br>
    <input type="text" name="num2" value=""><br>
   
    <input type="button" value="+" onclick="cal('+')">
    <input type="button" value="-" onclick="cal('-')">
    <input type="button" value="*" onclick="cal('*')">
    <input type="button" value="/" onclick="cal('/')">
    <br>
   
    result:<br>
    <input type="text" name="result" value="">
  </form>
</body>
</html>

2.连接转换

 

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>转换连接</title>
  <script type="text/javascript">
       function change(){
         document.getElementById('tb').innerHTML="shouhu";
      document.getElementById('tb').href="www.shouhu.com";
    }
  </script>
</head>
           <a href="www.baidu.com" id="tb">baidu</a><br>
     <input type="button" name="change" onclick="change()" value="change">
<body>
</body>
</html>

3.论坛.下拉选单

 

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 <title>下拉选单</title>
</head>
 <body>
           <select onchange="javascript:location=this.value;" id="sel">
            <option value="cal.html">javascript计算器</option>
      <option value="change.html">改变连接</option>
      <option value="select" selected="selected">下拉选单</option>
     </select>
 </body>
</html>

4.几种连接方式

 

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>几种连接方式</title>
   <script type="text/javascript">
          var status="连接的测试";
   
    var w=screen.width;
    var h=screen.height;
   
    alert("屏幕宽度"+w);
    alert("屏幕高度"+h);
   
    if(confirm("确认关闭")){
        close();
    }
   
     function openMe1(){
        open('cal.html');
     }
     function openMe2(){
        showModalDialog('cal.html');
     }
     function openMe3(){
        history.forward();
     }
     function loc(){
        location.href='cal.html';
     }
   </script>
   </head>
         
   <body>
     <a href="javascript:openMe1()">open</a>
  <a href="javascript:openMe2()">showModalDialog(聚焦作用)</a>
  <a href="javascript:openMe3()">history.forward</a>
  <a href="javascript:loc()">不显示具体的网页位置</a>
  <a href="cal.html">正常连接</a>
 
   </body>
</html>

 

5.关不掉的流氓广告

 

<html>
<head>
<title>关不掉的网页流氓广告</title>
       <script type="text/javascript">
             function move(){
        document.getElementById("ad").style.pixelTop=150+document.body.scrollTop
    }
    window.onscroll=move;
       </script>
</head>
<body onload="move()">
    <img src="images/kong.jpg" width="900" height="1700">
    <div  id="ad"  style="top:150px;left:30px;width:200;height:200; position:absolute;z-index:1;"  >
    <img src="images/hxx1.jpg" weight="216" height="280" border="0">
 </div>
</body>
</html>

 

 

 

 

 

6,可以关闭的流氓广告

 

<html>
 <head>
  <title>可以取消的流氓广告</title>
    <script type="text/javascript">
       function move(){
       document.getElementById("ad").style.pixelTop=150+document.body.scrollTop;
       document.getElementById("close").style.pixelTop=150+document.body.scrollTop;
    }
   
    function closeMe(){
           document.getElementById("ad").style.display="none";
     document.getElementById("close").style.display="none";
    }
    window.onscroll=move;
    </script>
 </head>

 <body onload="move()">
         <img src="images/a.jpg" width="900" height="1700">
         <div id="ad" style="top:150px;left:30px;position:absolute;z-index:1;">
          <img src="images/hxx1.jpg;" width="216px";height="280px" border="0">
   </div>
   
   <div id="close" style="top:150px;left:210px;position:absolute;z-index:2;cursor:pointer;"onclick="closeMe()">
          <img src="images/music.gif" border="0">
   </div>
 </body>
</html>

 

7.全选和全不选

 

<html>
 <head>
 <title>全选,全不选</title>
  <script type="text/javascript">
      function rel(op){
       var ho=document.getElementsByName('hobby');
    for(var i=0;i<ho.length;i++){
       ho[i].checked=op;
    }
   }
  </script>
 </head>

 <body>
      swimming<input type="checkbox" name="hobby" value="swimming">
   running<input type="checkbox" name="hobby" value="running">
   basketball<input type="checkbox" name="hobby" value="basketball">
   football<input type="checkbox" name="hobby" value="football"><br><br>
  
      <input type="button" value="全选" onclick="rel(true)"></button>
   <input type="button" value="全不选" onclick="rel(false)">
 </body>
</html>

 

8.伪类

 

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  <title>伪类</title>
   <style type="text/css">
      .myOut{
       border:0;
    margin:0;
    padding:0;
    font-size:13px;
    color:red;
    top:5px;
    weight:50px;
    height:20px;
    background-image:url('images/back.jpg');
   }
   .myOver{
       border:0;
    margin:0;
    padding:0;
       font-size:20px;
    color:green;
    top:5px;
    weight:50px;
    height:20px;
    background-image:url('images/back2.jpg');
    }
    a:hover{
        font-size:20px;
     color:green;
    }
   
   </style>
  </head>

  <body>
      <button class="myOut" onmouseout="this.className='myOut'" onmouseover="this.className='myOver'">change</button><br><br><br>
   <a href="baiduwww.baidu.com">baidu</a>
  </body>
</html>

 

 

 

 

 

 

 

你可能感兴趣的:(javascript一些基本的代码)