• PHP程序设计经典300例


    不知道怎么转载,原文源自:http://bbs.php100.com/u-htm-uid-330857.html

    来自:php100钟泽锋

    第一例
    <?php

    $s_html="<b>文字加粗it1994.cn</b>";
    echo $s_html;
    ?>
    第二例
    <?php

    $s_javascript=<<<start
    <script type="text/javascript">
    alert("it1994.cn");
    </script>
    start;
    echo $s_javascript;
    ?>
    第三列
    <?php

    $a="name";
    $$a="hello php";
    echo $name;
    ?>
    第四例
    <?php

    $color="";
    echo "<ul>";
    for($i=1;$i<=10;$i++)
    {
    if($i%2==0)
    {
    $color="red";
    }else
    {
    $color="yellow";
    }
    echo "<li style='background:".$color.";200px'>第".$i."行</li></ul>";
    }
    ?>
    第五例
    index.php页面:

    <form action="check.php" method="post">
    用户名:<input type="text" name="user" /><br />
    密码:<input type="password" name="pass"/><br />
    <input type="submit" value="提交"/>
    <input type="reset" value="重置"/>
    </form>

    check.php页面:
    <?php

    if(isseet($_POST))
    {
    if($_POST['name']=='admin' && $_POST['pass']=='admin')
    {
    echo"用户登录成功";
    }else{
    echo"用户登录失败";
    }

    }

    ?>

    第6列
    <?php

    echo "index.php<br><br>";
    echo "_FILE_:"._FILE_."<br>";
    echo "request_uti:".$_SERVER["request_urt"]."<br>";
    echo "script_name:".$_SERVER["script_name"]."<br>";
    echo "php_self:".$_SERVER["php_self"]."<br>";
    echo "script_filename:".$_SERVER["script_filename"]."<br>";
    ?>
    第7列
    <?php

    $str="0123456789abcdefghijklmnopqrstuvwxyz";
    $n=5; //字符长度
    $len=strlen($str)-1;
    for($i=0;$i<$n;$i++)
    {
    $s = $s.$str[rand(0,$len)];

    }
    echo $s."<br/>";
    ?>
    第8列
    <?php

    $a='it1994.cn';

    echo "直接输出:".$a;
    echo "<br/>";
    echo "直接输出:".'$a';
    echo "<br/>";
    echo "直接输出:"."$a";
    ?>
    第9列

    index.php页面:

    <?php
    echo "常见的原子操作";
    echo "<a href='check.php?action=add'>执行增加操作</a><br/>";
    echo "<a href='check.php?action=del'>执行删除操作</a><br>";
    echo "<a href='check.php?action=search'>执行查找操作</a><br>";
    echo "<a href='check.php?action=update'>执行更新操作</a><br>";
    ?>

    check.php页面:

    <?php
    $action=$_GET["action"];
    switch($action)
    {
    case "add";
    echo "<script>alert('现在可以实现增加功能!');</script>";
    break;
    case "del";
    echo "<script>alert('现在可以实现删除功能!');</script>";
    break;
    case "search";
    echo "<script>alert('现在可以实现查找功能!');</script>";
    break;
    case "update";
    echo "<script>alert('现在可以实现更新功能!');</script>";
    break;
    }
    ?>
    第10列
    index.php页面:


    <html>
    <head><title>it1994.cn</title></head>
    <body>
    <form action="check.php" method="post">
    message<input type="text" name="name" value="123456"/>
    <input type="submit" value="提交" />
    </form>
    </body>
    </html>


    check.php页面:

    <?php
    $urlar=parse_url($_SERVER['http_referer']);
    print("<pre>");
    print_r($urlar);
    print_r($_SERVER['http_referer']);
    if($urlar['host']!="172.0.0.1")
    {
    echo "页面失效";
    echo "<script>alert('链接失效');location='index.php';</secript>";
    exit;
    }
    echo "可以正常访问页面";

    ?>

    第11例

    index.php页面:

    <form name="myform" accept="date.php" method="post">
    年龄计算器<br />

    出生年份:<input type="text" name="year" value=""/><br />
    出生月份:<input type="text" name="month" value=""/><br />
    出生那天的号数:<input type="text" name="day" value=""/><br />
    <input type="submit" value="提交"/>
    <input type="reset" value="重置"/>
    </form>

    date.php页面:
    <?php

    $year=$_POST['year'];//获取年份
    $month=$_POST['month'];//获取月份
    $day=$_POST['day'];//获取日期
    $bithday=mktime(0,0,0,$month,$day,$year);//转化为时间戳毫秒数
    $nowUNIX=time();//获取现在的时间戳毫秒数
    $age=$nowUNIX-$bithday;
    $age=floor($age / (365*24*60*60));//时间戳毫秒数转化为年月日
    echo "<script language='javascript' type='text/javascript'>";
    echo "alert('您的年龄为:".$age."');";
    echo "</script>";
    ?>
    第12例


    <div id="it1994.com">用户选择图片</div>
    <div id="contains">
    <select name="mymenu" id="change" onchange="check(this)">
    <option value="images/1.jpg">图片1</option>
    <option value="images/2.jpg">图片2</option>
    <option value="images/3.jpg">图片3</option>
    </select>
    <img id="shoetime" src="images/1.jpg"/>
    </div>

    <script type="text/javascript">
    function check(obj)
    {
    var src=obj.value;
    $("shoetime").src=src;

    }
    function $(obj)
    {
    return document.getElementById(obj);
    }
    </script>

    第13例


    <?php
    date_default_timezone_set('PRC');
    echo "中国北京时间:";
    echo date("y-m-d h:i:s")."<br>";
    date_default_timezone_set('America/New_York');
    echo "美国纽约时间:";
    echo date("y-m-d h:i:s")
    ?>

    第14例

    <!--论坛发帖内容长度验证-->

    </form>
    <script type="text/javascript">
    function check()
    {
    if(document.myform.text.value=="")
    {
    alert("内容不能为空");
    return false;
    }
    return true;
    }
    </script>

    <?php
    if(!empty($_POST['text']))
    {
    $str=$_POST['text'];
    preg_match_all("/./us",$str,$match);
    $num=count($match[0]);
    if($num<=10)
    {
    echo "<script>alert('输入的长度小于10');</script";
    }else{
    echo "<script>alert('发布成功');</script";
    }
    }
    ?>

    第15例
    <!--在网页中引入头部文件和底部文件-->
    index.php页面


    <?php include("header.php") ?>
    <div style="background: url('images/3.jpg') no-repeat; 900px;height: 300px;"> </div>
    <?php include("footer.php") ?>

    header.php页面


    <title>文件引用</title>
    <style>
    *{
    margin: 0px;
    padding: 0px;
    }
    div{
    margin: auto;
    }
    </style>
    <div style="background: url('images/1.jpg') no-repeat; 900px;height: 250px;"></div>

    footer.php页面

    <div style="background: url('images/2.jpg') no-repeat; 900px;height: 31px;"> </div>

     

    第16例:


    <!--在网页主体中动态却换内容 -->

    <title>文件引用</title>
    <div style="color: red;">
    <center>
    <a href="index.php?id=index">首页</a>
    <a href="index.php?id=second">简介</a>
    </center>
    </div>

    <?php

    switch($_GET['id'])//判断页面传入的id
    {
    case "index";
    require("main.php");//引用主页文件
    break;
    case "second";
    require("main2.php");
    break;
    default:
    require("main.php");
    }

    ?>

    第17例:


    <!--检测上传文件类型扩展名-->

    <form action="index.php" method="post">
    检测文件后缀<br />
    <input type="file" name="file" value=""/><br /> <!--文件域-->
    <input type="submit" value="检测"/>
    </form>

    <?php
    $pic=$_POST['file'];
    $pics=explode('.',$pic);//转换为数组
    $num=count($pics); //获取数组长度
    echo '<br />上传文件的扩展名为:'.$pics[$num-1]; //获取扩展名内容

    ?>

    第18例:
    <?php

    /* 测试脚本运行时间*/
    header("Content-Type:text/html;charset=utf-8");
    $stime=microtime(true);
    echo "本php脚本运行的时间为:";
    $etime=microtime(true);
    $total=$etime-$stime;
    $str_total=var_export($total,true);
    if(substr_count($str_total,"E"))
    {
    $float_tloal=floatval(substr($str_total,5));
    $total=$float_tloal/100000;
    echo "$total".'秒';
    }

    ?>

    第19例:


    <!--模拟实现登录链接数据库-->
    <form action="index.php" method="post">
    选择链接方式:
    <select name="host">
    <option value="localhost" selected="" >localhost</option>
    <option value="127.0.0.1">127.0.0.1</option>

    </select>
    <br />
    用户名:<input type="text" value="" name="user"/><br />
    密码:<input type="password" value="" name="pwd"/><br />
    <input type="submit" value="链接"/>
    <input type="reset" value="重置"/>
    </form>


    <?php
    if(isset($_POST['host']))
    {
    $conn=mysql_connect($_POST['host'],$_POST['user'],$_POST['pwd'])or die("数据库链接失败");
    if($conn)
    {
    echo "<script>alert('数据库链接成功')<script>";
    }
    }
    ?>

    第20例:


    <!--在网页中显示数据库选择列表-->
    数据库选择列表:<br />
    <form action="index.php" method="post">
    <select name="database" size="10">
    <option value="0" selected="">请选择</option>
    <?php
    $conn=mysql_connect("localhost","root","123456");
    $re=mysql_query("show databases");
    while($arr=mysql_fetch_assoc($re))
    { ?>
    <option value="<?php echo $arr['Database'];?>">
    <?php echo $arr['Database']."<br/>";?>
    </option>
    <?php
    }
    ?>
    </select>
    <input type="submit" value="确定"/>
    </form>



    <?php
    $conn=mysql_connect("localhost","root","123456");
    $database=$_POST['database'];
    if(isset($_POST['database']))
    {
    if($database=="0")
    {
    echo "<script>alert('没有选择数据库')<script>";
    }
    else
    {
    mysql_select_db($database);
    echo "<script>alert('选择".$database."数据库链接成功')<script>";
    }
    }
    ?>

     

    第21例
    check.php页面:


    <?php
    //图片上传到服务器

    function fileext($filename)
      {
        return substr(strrchr($filename,'.'),1);  //获取扩展名
        
      }
    function random($length)
      {  //生成随机文件名函数
        $hash='CR-';
        $chars='abcdefghijklmnopqrstuvwxyz0123456789abcdefghijklmnopqrstuvwxyz';
        $max=strlen($chars)-1;
        mt_srand((double)microtime()*1000000);
          for($i=0;$i<$length;$i++)
           {
            $hash.=$chars(mt_rand(0,$max));
           }
           return $hash;
      }

    ?>

    form.php页面:


    <form action="upload.php" method="post" enctype="multipart/form-data"><!--定义method属性-->
          <table border="0" cellspacing="0" cellpadding="0" align="center" width="300px">
               <tr>
                   <td width="55" height="20" align="center">
                      <input type="hidden" name="MAX_FILE_SIZE" value="2000000"/>文件:
                   </td>
                   <td height="16">
                       <input type="file" name="file" value="浏览"/>
                   </td>
               </tr>
               <tr>
                   <td align="center" colspan="2"><br />
                        <input type="submit" name="B1" value="上传"/>
                   </td>
               </tr>
          </table>
    </form>


    upload.php页面:
    <?php
      
       include("check.php");
       $uploaddir="./files?";
       $type=array("jpg","gif","bmp","jpeg","pan");//设置允许上传文件的类型
       if(!in_array(strtolower(fileext($_FILES['file']['name'])),$type))//判断上传文件的类型是否在范围内
         {
            $text=implode(",",$type);
            echo "您只能上传以下类型文件:",$text,"<br/>";
         }else
           {
            $filename=explode(".",$_FILES['file']['name']);//获取文件名
            do{
                $filename[0]=random(10);
                $name=implode(".",$filename);
                $uploadfile=$upload.$name;
              }
            while(file_exists($uploadfile));
              if(is_uploaded_file($_FILES['file']['tmp_name']))
                {
                    if(move_uploaded_file($_FILES['file']['tmp_name'],$uploadfile))
                     {
                        echo "<center>您的文件已经上传完毕 上传图片预览:</center><br/><center><img src='$uploadfile'></center";
                        echo "<br/><center><a href='javascript:history.go(-1)'>继续上传</a></center>";
                     }else
                       {
                        echo "上传失败";
                       }
                }
           }
    ?>


    第22例


    <!--在外部文件中读取并显示用户协议-->

    <table width="100" border="0" cellpadding="1" cellspacing="1" bgcolor="#cccccc">
       <tr>
            <td bgcolor="#ffffff">
               <!--写文本内容要加载区-->
              
            </td>
       </tr>
    </table>
    <form action="zhuce.php" method="post" name="register" id="form">
          <input type="hidden" name="action" id="action" value="agree"/>
          <input type="submit" name="submit" value="同意"/>
    </form>
    <form action="" method="post" name="form" id="from">
          <a href="index.php">
               <input type="reset" name="reset1" id="reset1" value="不同意"/>
          </a>
    </form>

    第23例


    <!--不区分大小写输入的用户登录名-->

    <form action="check.php" method="post">
          <table width="250px" border="0" align="center" cellpadding="3" cellspacing="1" bgcolor="#cccccc">
              <tbody>
                   <tr>
                        <td colspan="2" height="25" bgcolor="#f7f7f7" align="center">
                             用户登录——不区分大小写
                        </td>
                   </tr>
              </tbody>
                  <tr>
                      <td width="20%" height="25" align="right" bgcolor="#f7f7f7">
                           用户名:
                      </td>
                      <td height="25" bgcolor="#f7f7f7">
                           <input style="" name="username" type="text" id="username"/>
                      </td>
                  </tr>
                  <tr>
                       <td height="25" align="right" bgcolor="#f7f7f7">
                            密码:
                       </td>
                       <td height="25" bgcolor="#f7f7f7">
                            <input type="password" name="userpwd" id="password"/>
                       </td>
                  </tr>
                  <tr align="center">
                        <td height="25" colspan="2" align="right" bgcolor="#f7f7f7">
                        </td>
                  </tr>
          </table>
          <table width="100%" border="0" cellpadding="0" cellspacing="0">
                 <tr>
                     <td width="39%" align="right">
                          <span style="word-spacing: 0px; margin:0px ; margin-bottom: 0px;" >
                               <input type="submit" name="login" id="login" value="登录"/>
                          </span>
                     </td>
                     <td width="61%">
                          <input type="reset" name="reset" id="reset" value="重置"/>
                     </td>
                 </tr>
          </table>
    </form>


    第24例


    倒计时某些赛事

    <?php
    header("Content-Type:text/html;charset=utf-8");
    $i=time();
    $x=strtotime("2015-04-5 00:00:00");;
    $d=round(($x-$i)/3600/24);
    echo "<b>距离清明节还有:<font color='red'>".$d."</form>天</b>";
    ?>


    第25例

    index.php页面:
    读取外部文本并分页


    function m_substr($str,$start,$length)
      {
        $str_length=$start=$length;
        $tmp_str="";
        for($i-0;$i<$str_length;$i++)
          {
            if(ord(substr($str,$i,1))==0x0a)
              {
                $tmp_str.='<br/>';
              }
            if(ord(substr($str,$i,1))>0x0a)
              {
                $tmp_str.=substr($str,$i,2);
                $i++;
              }else
                 {
                    $tmp_str.=substr($str,$i,1);
                 }
          }
          retun $tmp_str;
      }


    ?>
    <body>
        <div id="header">
             <b>文本文件内容分页显示</b>
        </div>
        <div id="content">
            <div id="show">
               <p>
                   <?php
                      /*此处省略自定义函数m_substr()具体实现*/
                       if(isset($_GET['page']))
                         {
                            $page=$_GET['page'];
                         }else{
                            $page=1;
                         }
                         $counter=file_get_contents("example.txt");
                         $length=strlen($counter);
                         $page_count=ceil($length/400);
                         $str=m_substr($counter,0,($page-1)*400);
                         $str1=m_substr($counter,0,$page*400);
                         echo substr($str1,strlen($str),strlen($str1)-strlen($str));
                   ?>
               </p>
            </div>
            <center>
                  <span>
                       <?php
                           echo "当前页:".$page."/".$page_count."&nbsp";
                           echo "<a herf=index.php?page=1>首页</a>";
                            if($page>1)
                              {
                                echo "<a herf=index.php?page=".($page-1).">上一页</a>";
                              }
                              if($page<$page_count)
                               {
                                echo "<a herf=index.php?page=".($page+1).">下一页</a>";
                               }
                               echo "<a herf=index.php?page=".$page_count.">尾页</a>";
                          
                       ?>
                  </span>
            </center>
        </div>
        <div id="footer"><br />文本分页</div>
    </body>

    第26例


    会员信息分页显示
    conn.php页面:

    <?php
    header("Content-Type:text/html;charset=utf-8");
    mysql_connect("localhost","root","") or die("数据库连接有误!");
    mysql_select_db("student") or die("数据库选择有误!");
    mysql_query("set names 'utf8'");

    ?>

    <?php
    //user.php页面:
    $page=isset($_GET['page'])?$_GET['page']:1;
    $pagesize=5;    //显示条数
    $sql="select count(*) from student";
    $result=mysql_query($sql);
    $maxrows=mysql_result($result,0,0);
    $maxpage=ceil($maxrows/$pagesize);
      if($page>$maxpage)
        {
            $page=$maxpage;
        }
        if($page<1)
         {
            $page=1;
         }
         $offset=($page-1)*$pagesize;
         $sql="select * from student limit{$offset},$pagesize";
         $result=mysql_query($sql);
          while($rows=mysql_fetch_assoc($result))
            {
                echo "<tr>";
                echo "<td>{$rows['id']}</td>";
                echo "<td>{$rows['username']}</td>";
                echo "<td>{$rows['email']}</td>";
                echo "<td>".date("Y-m-d H:i:s",$rows['datetime']+8*3600)."</td>";
                echo "</tr>";
            }
    ?>

    第27例:

    检测用户输入日期的合法性

    <form action="index.php" method="poost">
       <b>检测用户输入日期的合法性</b>
       用户名:<input type="text" name="username" value=""/><br />
       生日日期:<input type="text" name="userdate" value=""  size="18"/><br />
       <input type="submit" value="检测"/>
       <input type="reset" value="重置"/>
    </form>


    <?php
       if(!empty($_POST['username']))
         {
            $arr=explode("-",$_POST['userdate']);
            if(checkdate($arr[1],$arr[2],$arr[0]))
              {
                echo "<script>alert('日期".$_POST['userdate']."格式正确')</script>";
              }else{
                echo "<script>alert('日期".$_POST['userdate']."格式不对')</script>";
              }
         }
    ?>


    第28例
    延迟php脚本的执行时间

    <?php

    header("Content-Type:text/html;charset=utf-8");
    echo "脚本载入时间:".date('Y-m-d H:i:s');
    sleep(5); //脚本等待5秒后执行
    echo "<br/><br/>";
    echo "执行完毕时间:".date('Y-m-d H:i:s');
    ?>


    第29例

    使用php动态创建嵌套文件夹

    <?php
    header("Content-Type:text/html;charset=utf-8");
    function createfolder($path)
       {
        if(!file_exists($path))
          {
            createfolder(dirname($path));
            mkdir($path,0777);
          }
       }
       createfolder("aa/bb/cc");//模拟测试
    ?>


    第30例
    用户成绩查询


    <?php

    header("Content-Type:text/html;charset=utf-8");
    ?>
    <form action="index.php" method="post" >
      <b>输入分数</b><br />
      分数:<input type="text" name="result" value=""/><br />
      <input type="submit" value="查询"/>
      <input type="reset"/>
      
    </form>



    <?php

        if(!empty($_POST['result']))
           {
            $result=$_POST['result'];
            if($result>=80&&$result<=100)
              {
                echo "<script>alert('您的成绩为优秀')</script>";
              }else if($result>=60&&$result<80)
                 {
                    echo "<script>alert('您的成绩为合格')</script>";
                 }else
                    {
                        echo "<script>alert('您的成绩为不合格')</script>";
                    }
           }
          
    ?>

    第31例

    用户输入日期查询备忘录

    <?php
    header("Content-Type:text/html;charset=utf-8");
    ?>
    <form action="index.php" method="post">
        <b>输入日期:</b><br />
        <input type="text" name="date"/><br />
        <input type="submit" value="查询"/>
        <input type="reset"/>
    </form>


    <?php
       if(!empty($_POST['date']))
         {
            $date=$_POST['date'];
            $rc=array();  //数组
               $rc['5-1']='查看网站 IT1994.cn';
               $rc['5-2']='同学聚会';
               $rc['5-3']='购物';
               $rc['5-4']='出差';
               $rc['5-5']='发邮件';
               foreach($rc as $key=>$value)
                 {
                    if($key==$date)
                      {
                        echo "<script>alert('".$key."日备忘录:".$value."')</script>";
                      }else
                         {
                            echo "<script>alert('无备忘录')</script>";
                            break;
                         }
                 }
         }
    ?>


    第32例


    隔行换色

    <?php
    header("Content-Type:text/html;charset=utf-8");
    echo "<center><b>隔行换色</b></center>";
    $color="";
    echo '<table border="1" width="200" height="200" align="center" cellspacing="0">';
       for($i=0;$i<5;$i++)
          {
            if($i%2==0)
              {
                $color="red";
              }else
                 {
                    $color="blue";  
                 }
                 echo "<tr bgcolor='".$color."'>";//输出行并把颜色赋值给背景
                 for($j=0;$j<5;$j++)
                   {
                    echo "<td>".$j."</td>";
                   }
                   echo "</tr>";
          }
    echo "</table>";
    ?>

    第33例


    输出倒序乘法表
    <?php
    header("Content-type:text/html;charset=utf-8");
    for($i=9;$i>=1;$i--)
      {
        for($j=$i;$j>=1;$j--)
          {
            echo "$i*$j=".($i*$j)." ";
          }
          echo "<br/>";
      }
    ?>

    第34例

    表格计算器

    <?php
    header("Content-Type:text/html;charset=utf-8");
    ?>
    <form action="index.php" method="post">
       结果:<input type="text" name="sum" id="sum" size="15"/><br />
       数字1:<input type="text" name="num1" size="10"/><br />
       运算符:<select name="sub">
                  <option value="+">+</option>
                  <option value="-">-</option>
                  <option value="*">*</option>
                  <option value="/">/</option>
            </select><br />
       数字2<input type="text" name="num2" id="num2" size="10"/><br />
       <input type="submit" value="计算"/> 
       <input type="reset"/>
    </form>


    <?php
       if(!empty($_POST['num1']))
         {
            $num1=$_POST['num1'];
            $num2=$_POST['num2'];
            $sub=$_POST['sub'];
            $sum=0;
            switch($sub)
              {
                case "+":
                    $sum=$num1+$num2;
                    break;
                case "-":
                    $sum=$num1-$num2;
                    break;
                case "*":
                    $sum=$num1*$num2;
                    break;
                case "/":
                    $sum=$num1/$num2;
                    break;
              }
              echo "<script>alert('计算出结果为:".$sum."');</script>";
              echo "<script>document.getElementById('sum').value='".$sum."'</script>";
         }
    ?>

    第35例
    php动态表格生成器


    <style type="text/css">
    body{
    background:#ccc;
    }
    </style>
    <form action="35.php" method="post">
    <b>输入行列生成表格</b><br><br>
    输入行:<input type="text" name="cols"><br><br>
    输入列:<input type="text" name="rows"><br><br>
    <input type="submit" value="生成表格"> 
    <input type="reset" value="重置行列">
    </form>
    <?php
    header("Content-Type:text/html;charset=utf-8");
    if(!empty($_POST['cols'])){
    echo"<center><b>用户动态输出表格.行".$_POST['cols'].",列".$_POST['rows']."</b></center>";
    $color="";
    echo "<table border='1' width='200px' height='200px' align='center' cellspacing='0'>";
       for($i = 0 ; $i < $_POST['cols'] ; $i++){
           if($i%2==0){
           $color="red";
           }else{
           $color="blue";
           }
          echo "<tr bgcolor='".$color."'>";  
          for($j = 0 ;$j < $_POST['rows'] ; $j++){
             echo "<td>".$j."</td>";
          }
          echo "</tr>";
       }
    echo "</table>";
    }
    ?>

    第36例:

    使用分支语句加载不同网页主体

    <div id="header">
    <!--页面导航条-->
        <ul>
             <li><a href="?id=shop1">基本商品</a></li>
             <li><a href="?id=shop2">推荐商品</a></li>
             <li><a href="?id=shop3">分类商品</a></li>
        </ul>
        
    </div>
    <div id="content">
           <!--此处动态更改主体内容-->
    </div>


    <?php
         $shop_id=$_GET['id'];
         switch($shop_id)
            {
                case "shop1"://如果ID为shop1
                     require("shop1.php");
                     break;
                case "shop2":
                     require("shop2.php");
                     break;
                case "shop3":
                     require("shop3.php");
                     break;
                default://默认的选择
                     require("shop1.php");
                    
            }
    ?>

    第37例:

    php万年历

    <?php
    header("Content-type:text/html;charset=utf-8");
    date_default_timezone_set("Asia/Shanghai");//设置日期时区为中国时区
    $today = time();
    $year =@$_GET["year"];
    $month = @$_GET["month"];
    if($year=='') $year = date("Y",$today);
    if($month=='') $month = date("m",$today);
    if((int)$month==0){$year-=1;$month=12;}
    $time = mktime(0,0,0,$month,1,$year);//格式化当前日期
    $year = date('Y',$time);
    $month = date('m',$time);
    $days = date('t',$time);//当前月份一共有几天
    $fstdw = date('N',$time);//当前月份第一天为星期几
    echo "<table border=1 width=260 cellspacing=0 cellpadding=0 align=center bgcolor=#cccccc>";
    echo "<tr><td colspan=7 class="title">";
    $str   = "<a href=?year=".($year-1)."&month=".$month.">";
    $str .= "«</a> ".$year."年 ";
    $str .= "<a href=?year=".($year+1)."&month=".$month.">";
    $str .= "»</a>   ";
    $str .= "<a href=?year=".$year."&month=".($month-1).">";
    $str .= "«</a> ".$month."月 ";
    $str .= "<a href=?year=".$year."&month=".($month+1).">";
    $str .= "» </a>";
    echo $str;
    echo "</td></tr>";
    echo"<tr>";
    $str   = "<td>一</td>";
    $str .= "<td>二</td>";
    $str .= "<td>三</td>";
    $str .= "<td>四</td>";
    $str .= "<td>五</td>";
    $str .= "<td>六</td>";
    $str .= "<td>七</td>";
    echo $str;
    echo "</td>";
    $rows = ceil(($days + $fstdw-1)/7);
    $cd = 1;
    for($i=0;$i<$rows;$i++){
    echo "<tr>";
        for($j=0;$j<7;$j++){
         echo "<td>";
         if($cd >= $fstdw && $cd<$days+$fstdw){
         $oday = $cd-$fstdw+1;
         if($oday == date('d',time())){
         echo "<font color='red'><b><u>";
         }
         echo $oday;
         }else{
         echo ".";
         }
         $cd++;
         echo "</td>";
        }
    echo "</tr>";
    }
    echo "</table>";
    ?>


    第38例:
    index.php页面:


    <?php
    header("Content-Type:text/html;charset=utf-8");
    mysql_connect("localhost","root","123456") or die("数据库连接有误!");
    mysql_select_db("student") or die("数据库选择有误!");
    mysql_query("set names 'utf8'");
    ?>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
            <title>用户管理</title>
            <style>
                body{text-align:center;}
                #header{600px;height:50px;margin:10px;background:#E3EFFB;line-height:50px;font-size:20px;}
                #main{600px;margin:10px;margin:0px auto;}
                #main table{widt h:600px;background:#E3EFFB;cellspacing:1px;text-align:center;}
                #main table tr{background:white;}
                #main table img{border:0px;}
                #page{600px;height:30px;background:#E3EFFB;line-height:30px;}
            </style>
        </head>
        <body>
            <div id="header">网站管理中心--会员列表</div>
            <div id="main">
            <form name="myForm" action="check.php" method="post">
                <table>
                    <tr>
                        <th width="100">编号</th>
                        <th width="150">用户名</th>
                        <th width="200">邮件地址</th>
                        <th width="200">注册日期</th>
                        <th width="50">选择</th>
                    </tr>
                    <?php
                        //定义分页所需要的变量
                        $page=isset($_GET['page'])?$_GET['page']:1;//当前页
                        $pagesize=5; //每页显示的条数
                        //获取总条数数据
                        $sql="select count(*) from student";
                        $result=mysql_query($sql);
                        $maxrows=mysql_result($result,0,0);
                        $maxpage=ceil($maxrows/$pagesize);
                        //到达最后一页判断
                        if($page>$maxpage){
                        $page=$maxpage;
                        }
                        //到达第一页判断
                        if($page<1){
                            $page=1;
                        }
                        $offset=($page-1)*$pagesize;
                        $sql="select * from student limit {$offset},$pagesize";
                        $result=mysql_query($sql);
                        while($rows=mysql_fetch_assoc($result)){
                            echo "<tr>";
                            echo "<td>{$rows['member_id']}</td>";
                            echo "<td>{$rows['username']}</td>";
                            echo "<td>{$rows['email']}</td>";
                            echo "<td>".date("Y-m-d H:i:s",$rows['registertime']+8*3600)."</td>";
                            echo "<td><input type='checkbox' value='{$rows['member_id']}' name='member_id[]'></td>";
                            echo "</tr>";
                        }
                    ?>            
                </table>
                
                <br/>
                    <div id="page">
                    <?php
                    echo "当前{$page}/{$maxpage}页 共计{$maxrows}条信息    ";
                    echo "<a href='user.php?page=1'>首页</a>    ";
                    echo "<a href='user.php?page=".($page-1)."'>上一页</a>    ";
                    echo "<a href='user.php?page=".($page+1)."'>下一页</a>    ";
                    echo "<a href='user.php?page=".$maxpage."'>最后一页</a>";
                    echo " <input type='submit' value='批量删除'>";
                    ?>
                    </div>
            </form>
            </div>
        </body>
    <html>


    check.php页面:

    <?php
    PRINT("<PRE>");
    print_r($_POST);
    exit();
    header("Content-Type:text/html;charset=utf-8");
    mysql_connect("localhost","root","123456") or die("数据库连接有误!");
    mysql_select_db("student") or die("数据库选择有误!");
    mysql_query("set names 'utf8'");

    if(!empty($_POST['member_id'])){
    $arr=$_POST['member_id'];
    $str_key="";
    foreach($arr as $key=>$value){
    $sql="delete from student where member_id =".$value;
    mysql_query($sql);
    $str_key.=$value.",";
    }
    $new_str=substr($str_key,0,strlen($str_key)-1);
    echo"<script>alert('删除编号为".$new_str."的信息成功!');location='user.php'</script>";
    }
    ?>

    第39例
    php生成不重复随机数


    <?php
    header("Content-type:text/html;charset=utf-8");
    $num=5;//要生产多少个随机数
    $start=0;
    $end=100;
    $connt=0;
    while($connt<$num)
       {
        $a[]=rand($start,$end);//产生随机数
        $ary=array_unique($a);//遍历数组$a,如有相同的值则剔除该值
        $connt=count($ary);//获取数组长度
       }
       $str="";
       foreach($ary as $key=>$value)
         {
            $str.=" ".$value;
         }
         echo "<b>随机输出5个随机数</b><br /><br />";
         echo "随机数:<b>".$str."</b><br />";
         echo "<b><br><font color='red'>范围0-100且不重复</font><b>";
    ?>

    第40例
    输入字母或数字出现图案


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <?php header("content-type:text/html;charset=utf-8");?>
      <title> New Document </title>
      <meta name="Generator" content="EditPlus">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <style type="text/css">
    body{
    background:#ccc;
    font-size:12px;
    }
    .font{
    font-size:150px;
    color:#c99c96;
    font-family:Webdings;  //设定输出的字体为Webdings
    }
    </style>
    </head>
    <body>
    <b>输出字体图片</b><br><br>
    <form action="40.php" method="post">
    <b>输入26个任意大小写字母</b><br><br>
    <input type="text" value="" name="str">
    <p>输入z或者Z结束</p>
    <input type="submit" value="输出">
    <input type="reset" value="重置">
    </form>
    <?php
    $num=0;
    if(!empty($_POST['str'])){
    $str=$_POST['str'];
    do{
    echo"<font class='font'>".$str."</font>";
    $num++;
    }while($num<2);
    }
    ?>
    </body>
    </html>

    第41例

    动态输出网站友情链接

    <div id="footer">
    <ul>
    <?php
    for($i=1;$i<=5;$i++){
    echo "<li><a href=\"#\"><img src=\"./images/link".$i.".gif\" width=\"160\" height=\"70\"></a></li>";
    }
    ?>
    </ul>
    </div>


    第42例
    表格基数行变色


    <?php
    header("content-type:text/html;charset=utf-8");
    echo "<center>基数行变色</center>";
    echo '<table width="200" border="1" align="center">';
    for($i=0;$i<5;$i++)
        {
            if($i%2==0)
              {
                echo "<tr bgcolor='red'><td>".$i."</td></tr>";
              }else{
                echo "<tr><td>".$i."</td></tr>";
              }
        }
    echo "</table>";
    ?>


    第43例
    偶数计算器


    <?php

    header("content-type:text/html;charset=utf-8");
    ?>
    <b>输入个数返回偶数之和</b>
    <form action="43.php" method="post">
        数量:<input type="text" name="shu" id="shu"/><br />
        <input type="submit" value="计算"/>
        <input type="reset"/>
    </form>

    <?php
      if(!empty($_POST['shu']))
      {
           $shu=$_POST['shu'];
           $sun=$shu*2;
           $sum=0;
           for($i=1;$i<=$sun;$i++)
              {
                if($i%2==0)
                  {
                  $sum+=$i;
                  
                  }
                
              }
              echo "<script>alert('前".$shu."偶数之和为:".$sum."')</script>";
          }
    ?>


    第44例
    数据库链接验证


    <style>
    body{
    background:#ccc;
    }
    </style>
    <?php
    header("content-type:text/html;charset=utf-8");
    $conn=@mysql_connect("localhost","root","") or die("<b>状态<b>:连接MySQL数据库失败!<br>错误信息:".mysql_error());
    if($conn){
    echo "<script>alert('MySQL连接成功');</script>";
    $db = mysql_select_db("student",$conn);
    if($db == 1){
    echo "<script>alert('数据库选择成功');</script>";
    mysql_query("set names gbk");
    }else{
    echo "<script>alert('数据库不存在');</script>";
    }
    }
    ?>

    第45例
    细边线表格

    <?php

    header("content-type:text/html;charset=utf-8")
    ?>
      <style type="text/css">
    *{
          margin:0px;
          padding:0px;
    }
    body{
         background:#fff;
    }
    table{
            600px;
            margin:0 auto;
          background-color: #cccccc;
    }
    table td{
             background-color: #FFFFFF;
             font-size:12px;
            font-weight:normal;
            text-align:center;
           line-height:16px;
    }
      </style>

    <center><b>细边线表格</b></center>
    <br />
      <table border="0" cellspacing="1" cellpadding="0">
      <tr>
      <td> 选择</td><td>表名</td><td>字段类型</td><td>字 段名称</td><td>更新日期</td><td>创建日期< /td><td>操作</td>
      </tr>
      <tr>
      <td><input type="checkbox"></td><td>个人客户</td><td>text& lt;/td><td>项目</td><td>2012-02-01 17:23:17</td><td>2012-02-01 17:23:17</td><td><a href="#">删除</a> <a href="#">编辑</a></td>
      </tr>
      <td><input type="checkbox"></td><td>企业客户</td><td>text& lt;/td><td>合作</td><td>2011-09-11 10:21:16</td><td>2011-09-11 10:21:16</td><td><a href="#">删除</a> <a href="#">编辑</a></td>
      </tr>
      <td><input type="checkbox"></td><td>政府客户</td><td>text& lt;/td><td>外包</td><td>2011-06-21 09:21:06</td><td>2012-06-21 09:21:06</td><td><a href="#">删除</a> <a href="#">编辑</a></td>
      </tr>
      <td><input type="checkbox"></td><td>个人客户</td><td>text& lt;/td><td>购买</td><td>2011-02-01 17:23:17</td><td>2011-02-01 17:23:17</td><td><a href="#">删除</a> <a href="#">编辑</a></td>
      </tr>
      <td><input type="checkbox"></td><td>个人客户</td><td>text& lt;/td><td>商家</td><td>2011-02-01 17:23:17</td><td>2010-02-01 17:23:17</td><td><a href="#">删除</a> <a href="#">编辑</a></td>
      </tr>
      <td><input type="checkbox"></td><td>企业客户</td><td>text& lt;/td><td>网站</td><td>2010-02-01 17:23:17</td><td>2009-02-01 17:23:17</td><td><a href="#">删除</a> <a href="#">编辑</a></td>
      </tr>
      <td><input type="checkbox"></td><td>企业客户</td><td>text& lt;/td><td>其他</td><td>2011-02-01 17:23:17</td><td>2011-02-01 17:23:17</td><td><a href="#">删除</a> <a href="#">编辑</a></td>
      </tr>
      </table>

    第46例

    php搜索框

    <?php
    header("content-type:text/html;charset=utf-8");
    ?>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
      <title> PHP经典案例搜索框 </title>

      <style type="text/css">
    *{
        margin:0;
        padding:0;
    }
    body{
        font-size:12px;
        background:#aaa;
    }
    #search{
        310px;
        height:25px;
        margin:50px auto;
        padding:3px 8px;
        line-height:20px;
        color:#000;
        background:#ddd;
        overflow:hidden;
    }
    #search label{
        float:left;
        line-height:25px;
        font-weight:800;
        color:#c00;
    }
    #search #insert{
        padding:2px 4px;
        border:1px solid #06c;
        margin-top:1px;
        color:#666;
        float:left;
        margin:0 5px;
        150px;
        height:16px;
    }
    </style>
    </head>

    <body>
    <div id="search">
         <form action="" method="post">
             <label>PHP经典案例查询</label>
             <input name="chepai" type="text" id="insert" value="输入查询关键字" />
             <input name="btn" id="btn" type="button" value="查询" />
         </form>
    </div>
    </body>
    </html>

    第47例
    使用css进行页面布局


    <?php

    header("content-type:text/html;charset=utf-8");
    ?>
    <head>
      <title> it1994.cn </title>
    <style type="text/css">
    *{
        margin:0px;
        padding:0px;
    }
    body{
        600px;
        margin:auto;
        color:white;
    }
    #nav{
        background:#cccccc;
        height:50px;
    }
    #header{
        background: blue;
        height:150px;
    }
    #sidebar{
        background:darkgreen;
        height:30px;
    }
    #content{
        background:green;
        height:30px;
    }
    #footer {
        background:orange;
        height:66px;
    }
    </style>
    </head>

    <body>
    <div id="page">
    <div id="nav">导航条</div>
    <div id="header">头部广告区域</div>
    <div id="sidebar">滑动区域</div>
    <div id="content">主体显示内容</div>
    <div id="footer">底部</div>
    </div>
    </body>

    第48例
    美化用户注册表格

    <?php

    header("content-type:text/html;charset=utf-8");
    ?>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
      <title>  </title>
      <meta http-equiv="Content-type" content="text/html;charset=GB2312">
      <style type="text/css">
    body {
        font-family: Arial, Helvetica, sans-serif;
        font-size:12px;color:#666666;background:#fff;
        text-align:center;
        }
    * {
        margin:0;
        padding:0;
        }
    a {
        color:#1E7ACE;
        text-decoration:none;
        }
    a:hover {
        color:#000;
        text-decoration:underline;
        }
    h3{
        font-size:14px;
        font-weight:bold;
        }
    pre,p{
        color:#1E7ACE;
        margin:4px;
        }
    input,select,textarea{
              padding:1px;
                  margin:2px;
                  font-size:11px;
                  }

    #myform{
        450px;
        margin:15px auto;
        padding:20px;
        text-align:left;
        border:1px solid #A4CDF2;
        }
    fieldset{
        padding:10px;
        margin-top:5px;
        border:1px solid #A4CDF2;
        background:#fff;
    }
    fieldset legend{
        color:#1E7ACE;
        font-weight:bold;
        padding:3px 20px 3px 20px;
        border:1px solid #A4CDF2;
        background:#fff;
    }
    fieldset label{
        float:left;
        120px;
        text-align:right;
        padding:4px;
        margin:1px;
    }
    fieldset div{
        clear:left;
        margin-bottom:2px;
    }
    .buttom{
        padding:1px 10px;
        font-size:12px;
        border:1px #1E7ACE solid;
        background:#D0F0FF;
        }
    .input{
        120px;
        }
    .enter{
        text-align:center;
        }
    .clear{
        clear:both;
        }
    -->
    </style>
    </head>

      <body>
            <div id="myform">
                 <center>
                     <h3> 创建新用户</h3>
                 </center>
                 <form method="post" name="myForm" id="myForm">
                     <fieldset>
                       <legend>用户注册</legend>
            <div>
                 <label for="Name">用户名</label>
                 <input type="text" name="Name" class="input" id="Name" size="20" maxlength="30" />
                    <font color="red">*</font>(可输入字母数组下划线)<br/>
            </div>
            <div>
                <label for="Email">
                       email
                </label>
                    <input type="text" name="Email" class="input" id="Email" size="20" maxlength="150" />
                       <font color="red">*</font><br/>
            </div>
            <div>
                 <label for="password">
                      输入密码
                 </label>
                    <input type="password" name="password" class="input" id="password" size="18" maxlength="15" />
                        <font color="red">*</font>(长度不能超过15个字符)<br/>
            </div>
            <div>
                  <label for="confirm_password">
                       重复密码
                  </label>
                 <input type="password" name="confirm_password" class="input" id="confirm_password" size="18" maxlength="15" />
                     <font color="red">*</font><br/>
            </div>
            <div>
                 <label for="AgreeToTerms">
                        同意用户服务条款
                 </label>
                 <input type="checkbox" name="AgreeToTerms" id="AgreeToTerms" value="1" />
                   <a href="#" title="您是否同意服务条款">
                       点此查看用户条款
                       </a> <font color="red">*</font></div>
               <div class="enter">
                     <input name="create791" type="submit" class="buttom" value="提交" />
                     <input name="Submit" type="reset" class="buttom" value="重置" />
              </div>
            </fieldset>
            </form>
            <br/>
            </div>
    </body>
    </html>

    第49例
    注册表单击显示
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
    <html>
    <head>
      <title> it1994.cn </title>
      <meta name="Generator" content="EditPlus">
      <meta name="Author" content="author">
      <meta name="Keywords" content="cstp">
      <meta name="Description" content="no-description">
      <meta http-equiv="Content-type" content="text/html;charset=utf-8">
    <style>
    body {
        font-family: Arial, Helvetica, sans-serif;
        font-size:12px;color:#666666;background:#fff;
        text-align:center;
        }
    * {
        margin:0;
        padding:0;
        }
    a {color:#1E7ACE;
    text-decoration:none;
    }
    a:hover {color:#000;
    text-decoration:underline;}
    h3{
        font-size:14px;
        font-weight:bold;
        }
    pre,p{
        color:#1E7ACE;
        margin:4px
        ;}
    input,select,textarea{
           padding:1px;
           margin:2px;
           font-size:11px;}
    .buttom{
        padding:1px 10px;
        font-size:12px;
        border:1px #1E7ACE solid;
        background:#D0F0FF;
    }
    #myform{
        450px;
        margin:15px auto;
        padding:20px;
        text-align:left;
        border:1px solid #A4CDF2;
    }
    fieldset{
        padding:10px;
        margin-top:5px;
        border:1px solid #A4CDF2;
        background:#fff;
    }
    fieldset legend{
        color:#1E7ACE;
        font-weight:bold;
        padding:3px 20px 3px 20px;
        border:1px solid #A4CDF2;
        background:#fff;
    }
    fieldset label{
        float:left;
        120px;
        text-align:right;
        padding:4px;
        margin:1px;
    }
    fieldset div{
        clear:left;
        margin-bottom:2px;
    }
    .input{
        120px;
        }
    .enter{
        text-align:center;
        }
    .clear{
        clear:both;
        }
    #close{
         position:absolute;
         left:440px;
         top:30px;
         50px;
         font-size:14px;
    }
    </style>
    <script type="text/javascript">
    function show(){
        document.getElementById("zhezhao").style.display = "";
        document.getElementById("contains").style.display = "";
        document.getElementById("zhezhao").style.filter = "Alpha(Opacity=50)";//透明度
    }
    function hide(){
        document.getElementById("zhezhao").style.display = "none";
        document.getElementById("contains").style.display = "none";
    }
    </script>

    </head>
        <body>
            <input onclick="show()" type="button" value="单击显示注册表单" style="font-size:15px;"/>
            <div style="100%; background-color:Gray; display:none; height:100%; position:absolute; left: 0; top: 0;" id="zhezhao">
            </div>
            <div style=" 520px; background-color:#fff; display:none; height:auto; position:absolute; left: 400px; top: 70px;" id="contains">
                 <div id="myform">
                   <center>
                        <h3>创建新用户</h3>
                    </center>
                    <input onclick='hide()' type='button' value='关闭' id="close"/>
                    <form method="post" name="myForm" id="myForm">
                    <fieldset>
                    <legend>用户注册</legend>
                 <div>
                    <label for="Name">
                          用户名
                    </label>
                    <input type="text" name="Name" class="input" id="Name" size="20" maxlength="30" />
                         *(可输入字母数组下划线)<br/>
                </div>
                <div>
                   <label for="Email">
                          email
                   </label>
                   <input type="text" name="Email" class="input" id="Email" size="20" maxlength="150" />
                      *<br/>
                </div>
                <div>
                    <label for="password">
                             输入密码
                    </label>
                    <input type="password" name="password" class="input" id="password" size="18" maxlength="15" />
                    *(长度不能超过15个字符)<br/>
               </div>
               <div>
                   <label for="confirm_password">
                       重复密码
                   </label>
                   <input type="password" name="confirm_password" class="input" id="confirm_password" size="18" maxlength="15" />
                        *<br/>
               </div>
               <div>
                   <label for="AgreeToTerms">
                          同意用户服务条款
                   </label>
                    <input type="checkbox" name="AgreeToTerms" id="AgreeToTerms" value="1" />
                     <a href="#" title="您是否同意服务条款">点此查看用户条款</a> *
               </div>
               <div class="enter">
                   <input name="create791" type="submit" class="buttom" value="提交" />
                   <input name="Submit" type="reset" class="buttom" value="重置" />
               </div>
               </fieldset>
              </form>
              <br/>
             </div></div>
              <div id="cli">

            </div>
        </body>
    </html>


    第50例

    人品测试器

    <?php
    header("content-type:text/html;charset=utf-8");
    ?>
    <center>
         <b>人品测试器</b><br />
         请输入名字:<input type="text" name="test" id="test" size="10"/>
         <input type="submit" value="测试" onclick="test()"/>
          <br /><br />显示结果:
          <div id="show">
          </div>
    </center>
       <script type="text/javascript">
            var arr = new Array();
                arr[0] = "人品很好";
                arr[1] = "人品一般";
                arr[2] = "人品很差";
                arr[3] = "极品!!!!(此处省略一万个字)";
                arr[4] = "快回火星吧";
            function test()
              {
                var text = document.getElementById('test').value;
                var len = text.length;
                var sum = 0;
                for(var i = 0;i < len ; i++)
                    {
                       sum=sum+text.charCodeAt(i);
                    }
                var yushu = sum%arr.length;
                document.getElementById('show').innerHTML="你的人品得分:"+yushu+"<br>"+arr[yushu];
                }
      </script>

    第51例
    图片循环播放


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>简单图片轮播</title>
        <style>
            p.now{
                display:block;
                 border:1px solid #ccc
                 }
            li.now{
                color:#ccc
                }
            li{
                list-style:none;
                float:left;
                padding:0 10px;
                border:1px solid #ccc;
                background:#eee;}
            #fd{
                position:absolute;
                 left:450px;
                 top:100px;
                 height:20px;
                 401px;
                  background:#ccc}

            img{
                400px;
                height:200px;
                padding-top:18px;
                }
        </style>
      </head>

        <body>
            <div id="fd">
                <p class="now"><img src="./images/pic1.jpg"></p>
                <p style="display:none"><img src="images/pic2.jpg"></p>
                <p style="display:none"><img src="images/pic3.jpg"></p>
                <p style="display:none"><img src="images/pic4.jpg"></p>
                <ul>
                    <li class="now">1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                </ul>
            </div>
            <script>
                var tags=$("fd").getElementsByTagName("li");//获取切换按钮节点
                var cats=$("fd").getElementsByTagName("p");//获取切换内容节点
                var current;//设置当前帧的变量容器
                var timer=2000;//设置两秒循环一次    
                function disAll(){//初始所有标签样式
                 for(var i=0; i<tags.length; i++){
                       tags.className="";
                       cats.className="";
                       cats.style.display="none";
                     }
                  }
                function setNow(){//获取当前帧的索引值
                      for(var i=0; i<tags.length; i++){
                        if(tags.className=="now"){
                              current=i;          
                             }
                          }
                    }
                    for(var j=0; j<tags.length; j++)
                      {//设置手动切换
                        tags[j].onmouseover=function()
                        {
                            clearInterval(h);    
                            disAll();      
                            this.className="now";
                            setNow();
                            cats[current].style.display="block";
                            cats[current].className="now";      
                     }
                tags[j].onmouseout=function(){
                    setNow();      
                    h=setInterval("goNext()",3000);
                }
                }
                function goNext(){//自动切换
                    setNow();//获取当前帧索引
                    current+=1;//帧自增1
                    if(current>=parseInt(tags.length)){//判断:如果当前帧索引值是否大于切换按钮总数,如果大于按钮总数则回到初始状态
                        current=0;
                        disAll();
                        cats[0].style.display="block";
                        tags[0].className="now";
                        cats[0].className="now";
                    }
                    else{
                        disAll();
                        cats[current].style.display="block";
                        cats[current].className="now";
                        tags[current].className="now";
                    }
                }
                var h=setInterval("goNext()",timer)//开始自动切换
                function $(obj){//获取ID节点的简介方法
                    return document.getElementById(obj)
                }
            </script>
        </body>
    </html>

     第52例:

    秒表计时器

    <?php
    header("content-type:text/html;charset=utf-8");
    ?>
    <b>简单秒表计时器</b><br />
    当前显示的秒数:<input type="text" value="0秒" id="show" size="10"/><br /><br />
    <input type="button" value="开始" onclick="_start()"/>
    <input type="button" value="暂停" onclick="pause()"/>
    <input type="button" value="完全暂停" onclick="_stop()"/>
    <div id="contain">
        <b>历史记录:</b>
        <div id="his"></div>
    </div>


    <script type="text/javascript">
      <!--
        var temp = true;
        var num = 0;
        var t;
        var div = document.getElementById('show');
        var div1 = document.getElementById('his');
        function showTime(){
            num++;
            div.value = num+"秒";
        }
        function _start(){
           if(temp){
             t = setInterval("showTime()",1000);
             temp =false;
           }
        }
        function pause(){
            clearInterval(t);
            temp = true;
            div1.innerHTML += "<b>记录秒数为:"+num+"</b><br><br>";
        }
        function _stop(){
            clearInterval(t);
            temp = true;
            num = 0;
            div.value = "0秒";
        }
      </script>

    第53例:

    使用正则表达验证文件扩展名

    <?php
    header("content-type:text/html;charset=utf-8");
    ?>
    <b>文件扩展名验证<b><br/><br/>
    <input type="text" name="int" value="请输入:文件.扩展名" onblur="check(this)" id="int"/><br/><br/>
    <b><font color="red">提示:只能输入php、asp和jsp类型文件</font></b><br/>
    <input type="button" value="检测" onclick="check_value()"/>
    <script>
        function check(obj){//非空验证和长度验证
            if(obj.value == "" || obj.value.length<3)
            {
                alert("输入长度不能小于3且不能为空!");
                obj.focus();
            }
        }
        function check_value()
        {
            var str = $("int").value;
            var repx = /\.(php|asp|jsp)$/i;
            if(str.match(repx)==null){
                alert("文件扩展名有误");
                $("int").focus();
            }else{
                alert("文件扩展名正确");
                $("int").focus();
            }
        }
        function $(obj){
            return  document.getElementById(obj);
        }
    </script>

    第54例:

    批量操作表格

    <?php
    header("content-type:text/html;charset=utf-8");
    ?>
    <table width="400" border="0" align="center">
          <tr>
                <th>选项</th>
                <th>发件人</th>
                <th>邮件名称</th>
                <th>邮件附属信息</th>
          </tr>
          <tbody id="tbs">
          <tr class="one">
                <td><input type="checkbox" name="check[]"/></td>
                <td>钟泽锋</td>
                <td>13622550830@163.com</td>
                <td>个人邮箱</td>
          </tr>
          <tr class="two">
                <td><input type="checkbox" name="check[]"/></td>
                <td>无双</td>
                <td>662035@163.com</td>
                <td>个人邮箱</td>
          </tr>
          <tr class="one">
                <td><input type="checkbox" name="check[]" /></td>
                <td>阳费</td>
                <td>lyf123456@163.com</td>
                <td>企业邮箱</td>
          </tr>
          <tr class="two">
                <td><input type="checkbox" name="check[]"/></td>
                <td>志才</td>
                <td>l1212@163.com</td>
                <td>个人邮箱</td>
          </tr>
          <tr class="one">
                <td><input type="checkbox" name="check[]"/></td>
                <td>刘易阳</td>
                <td>lyy@126.com</td>
                <td>企业邮箱</td>
          </tr>
          <tr class="two">
                <td><input type="checkbox" name="check[]"/></td>
                <td>飞翔</td>
                <td>fx@163.com</td>
                <td>企业邮箱</td>
          </tr>
          <tr class="one">
                <td><input type="checkbox" name="check[]"/></td>
                <td>王强</td>
                <td>wq@163.com</td>
                <td>个人邮箱</td>
          </tr>
          <tr class="two">
                <td><input type="checkbox" name="check[]"/></td>
                <td>李飞</td>
                <td>lf@163.com</td>
                <td>企业邮箱</td>
          </tr>
          <tr class="one">
                <td><input type="checkbox" name="check[]"/></td>
                <td>赵峰</td>
                <td>zhaofeng@163.com</td>
                <td>个人邮箱</td>
          </tr>
          </tbody>
          <tr>
            <th>选项</th>
          <td colspan="3" align="center">
              <input type="button" id="qx" onclick="changebox('qx')" value="全选"/>
              <input type="button" id="qxx" onclick="changebox('qxx')" value="取消全选"/>
              <input type="button" id="fx" onclick="changebox('fx')" value="反选"/>
              <input type="button" id="del" onclick="del()" value="删除所选附件"/>
          </td>
          </tr>
    </table>

    <script type="text/javascript" language="javascript">
    function changecolor(){
        //获取tr节点
        var    tr=document.getElementsByTagName("tr");
        //为第一行添加背景颜色
           tr[0].style.background="#0066ff";
           //为最后一行添加背景颜色
           tr[tr.length-1].style.background="#0066ff";
           }
        //创建全选反选函数
        function changebox(type){
            //获取name值
            var    tbs=document.getElementById("tbs");
            var    chks=tbs.getElementsByTagName("input");
            switch(type){
                case "qx":
                    for(var    i=0;i<chks.length;i++){
                        chks.checked=true;
                    }
                break;
                case "qxx":
                    for(var    i=0;i<chks.length;i++){
                        chks.checked=false;
                    }
                break;
            case "fx":
                    for(var    i=0;i<chks.length;i++){
                        if(chks.checked){
                            chks.checked=false;
                        }else{
                            chks.checked=true;
                        }
                    }
            break;
                }
            }
            function del(){
                var    input=document.getElementsByName("check[]");
                for(var    i=input.length-1; i>=0;i--){
                       if(input.checked==true){
                           //获取td节点
                           var td=input.parentNode;
                          //获取tr节点
                          var tr=td.parentNode;
                          //获取table
                          var table=tr.parentNode;
                          //移除子节点
                          table.removeChild(tr);
                     }

                    }

                }
    </script>

    第55例:

    验证全中文输入和显示

    <?php
    header("content-type:text/html;charset=utf-8");
    ?>
        <b>中文输入验证显示</b><br/><br/>
        <input type="text" name="int" id="int" value="请输入纯中文字符"/><br/>
        <input type="button" value="显示" onclick="check()"/><br/>
        <div id="showArea"></div>
    <script>
        function check(){
            var str = $("int").value;
            if(!isChinese(str)){
                alert("字符串中有其他字符");
                $("int").focus();
            }else{
                $("showArea").innerHTML += "中文:<font color=red>"+str+"</font><br>";
                alert("字符串为全中文显示");
            }
        }
        function isChinese(str){
            for(var i=0;i<str.length;i++){
                if(str.charCodeAt(i)>=10000){
                return true;
                }
            }
        }
        function $(obj){
            return document.getElementById(obj);
        }
    </script>

    第56例:

    用户注册验证

    <?php
    header("content-type:text/html;charset=utf-8");
    ?>

    <form action="#" method="post" name="zcform"  onSubmit="return check();">
        <table width="678px" height="500" border="0" align="center" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF" class="body">
            <tr>
                <td colspan=2 align="center" bgcolor="#E5F6BF">
                     <b>用户注册表单</b>
                </td>
            </tr>
            <tr>
                <td class="td_left">用户名:</td>
                <td class="td_right"> 
                    <input name="hy_username" type="text" class="gray" id="hy_username" size="30" />
                    <font color="#ff0000">*</font>
                </td>
            </tr>          
            <tr>
                <td class="td_left" >密码:</td>
                <td class="td_right" > 
                    <input name="hy_password" type="password"  class="gray"  id="hy_password" size="30" />
                    <font color="#ff0000">*</font>
                </td>
            </tr>
            <tr>
                <td width="142" height="14" align="right" valign="middle" bgcolor="#E5F6BF" >
                     确认密码:
                </td>
                <td width="385" height="14" align="left" valign="middle" bgcolor="#E5F6BF" > 
                    <input name="password2" type="password" class="gray" id="password2" size="30" />
                    <font color="#ff0000">*</font>
                </td>
            </tr>
            <tr>
                <td width="142" height="14" align="right" valign="middle" bgcolor="#E5F6BF" >性别:</td>
                <td width="385" height="14" align="left" valign="middle" bgcolor="#E5F6BF" > 
                    <input name="sex" type="radio" value="女" />女
                    <input name="sex" type="radio" value="男" />男
                </td>
            </tr>
            <tr>
                <td width="142" height="15" align="right" valign="middle" bgcolor="#E5F6BF" >真实姓名:</td>
                <td width="385" height="15" align="left" valign="middle" bgcolor="#E5F6BF" > 
                    <input name="okname" type="text" class="gray" id="okname" size="30" />
                    <font color="#ff0000">*</font>
                </td>
            </tr>
            <tr>
                <td class="td_left" >联系电话:</td>
                <td class="td_right" > 
                    <input name="tel" type="text" class="gray" id="tel" size="30" />
                    <font color="#ff0000">*</font>
                </td>
            </tr>
            <tr>
                <td width="142" height="7" align="right" valign="middle" bgcolor="#E5F6BF" >身份证:</td>
                <td width="385" height="7" align="left" valign="middle" bgcolor="#E5F6BF" > 
                    <input name="zhengjian" type="text" class="gray" id="zhengjian" size="30" />
                </td>
            </tr>
            <tr>
                <td width="142" height="7" align="right" valign="middle" bgcolor="#E5F6BF" >QQ:</td>
                <td width="385" height="7" align="left" valign="middle" bgcolor="#E5F6BF" > 
                    <input name="qq" type="text" class="gray" id="qq" size="30" />
                </td>
            </tr>
            <tr>
                <td class="td_left" >邮政编码:</td>
                <td class="td_right" > 
                    <input name="yb" type="text" class="gray"   id="yb" size="30" />
                    <font color="#ff0000">*</font>
                </td>
            </tr>
            <tr>
                <td height="30" align="right" valign="middle" bgcolor="#E5F6BF" >E-mail:  </td>
                <td height="30" align="left" valign="middle" bgcolor="#E5F6BF"> 
                     <input name="email" type="text" class="gray"   id="email" size="30" />
                     <font color="#ff0000">*</font>
                </td>
            </tr>
            <tr>
                <td height="30" align="right" valign="middle" bgcolor="#E5F6BF" >个人简介: </td>
                <td height="30" align="left" valign="middle" bgcolor="#E5F6BF" > 
                    <textarea name="jianjie" cols="30" rows="5" class="gray" id="jianjie"></textarea>
                </td>
            </tr>
            <tr>
                <td height="35" colspan="2" align="center" valign="middle" bgcolor="#E5F6BF" >
                    <input type="submit" name="Submit" class="zhuce" value="注册"/> 
                    <input name="reset" type="reset" id="reset" class="zhuce" value="取消"/>
                    <input name="action" type="hidden" id="action" value="add"/>
                </td>
            </tr>
        </table>
    </form>


    <script language="javascript">
            function check()
            {
                if(document.zcform.hy_username.value==""||document.zcform.hy_username.value.length<6)
                    {
                        alert('用户名不能为空!');
                        zcform.hy_username.focus();
                        return false;
                    }
                if(document.zcform.hy_password.value==""||document.zcform.hy_password.value.length<6)
                    {
                        alert('有效密码在6位以上!');
                        zcform.hy_password.focus();
                        return false;
                    }
                if(document.zcform.password2.value !=document.zcform.hy_password.value)
                    {
                        alert('确认密码有误,请重新输入!');
                        zcform.password2.focus();
                        return false;
                    }
                if(document.zcform.okname.value==""||document.zcform.okname.value.length<4)
                    {
                        alert('真实姓名不正确,长度应在4个字节以上!');
                        zcform.okname.value = "";
                        zcform.okname.focus();
                        return false;
                    }
                if(document.zcform.tel.value==""||document.zcform.tel.value.length<7||isNaN(document.getelementById("tel").value))
                    {    
                        alert('联系电话输入错误');
                        zcform.tel.value = "";
                        zcform .tel.focus();
                        return false;
                    }
                if(document.zcform.zhengjian.value==""||document.zcform.zhengjian.value.length<15||document.zcform.zhengjian.value.length>18)
                    {
                        alert('有效证件在15位以上!');
                        zcform.zhengjian.focus();
                        return false;
                    }
                if(document.zcform.qq.value==""||isNaN(document.getElementById("qq").value))
                    {
                        alert('QQ号码不正确或你没有填写!');
                        zcform.qq.value = "";
                        zcform.qq.focus();
                        return false;
                    }
                if(document.zcform.yb.value=="")
                    {        
                        alert('邮编不能为空!');
                        zcform.yb.value = "";
                        zcform.yb.focus();
                        return false;
                    }
                if(document.zcform.email.value=="")
                    {
                        alert("email不能为空!");
                        zcform.email.focus();
                        return false;
                    }
                if (document.zcform.jianjie.value.length<20)
                    {
                        alert ("提示:\n\n简历必须在20字以上!");
                        zcform.jianjie.value = "";
                        document.zcform.jianjie.focus();
                        return false;
                    }
                else
                    {
                        zcform.submit();
                    }
            }
    </script>


    第57例:

    后台管理分类导航菜单



    <style>
    body {
        margin:0;
        padding:0px;
        text-align:center;
        font:normal 12px Arial,Verdana,Tahoma;
        text-align:center;
        line-height:150%;
        }
    a:link,a:visited {
        color:#385065;
        text-decoration:none
        }
    a:hover {
        text-decoration:underline
        }
    #menu {
        150px;
        margin:0px 15px;
        padding:0px;
        text-align:left;
        list-style:none;
        }
    #menu .item {
        background:#ccaaee;
        padding:0px;
        list-style:none;
        border:1px solid #eee;
        }
    a.title:link, a.title:visited, a.title:hover {
        display:block;
        color:#385065;
        font-weight:bold;
        padding:2px 0 0 22px;
        128px;
        line-height:23px;
        cursor:pointer;
        text-decoration:none
        }
    #menu .item ul {
        border:1px solid #9FACB7;
        margin:0;
        116px;
        padding:3px 0px 3px 30px;
        background:#fff;
        list-style:none;
        display:none
        }
    #menu .item ul li {
        display:block;
        }
    </style>
    <script type="text/javascript">

        function hideAllObj() {    //隐藏所以分类
            var items = document.getElementsByClassName("optiton");//获取所以对象的节点
            for (var j=0; j<items.length; j++){//在对象数量范围内循环
                items[j].style.display = "none";//元素对象这样式隐藏
                }
        }
        function check(){
            document.getElementById("opt_1").style.display = "block";//默认完全显示第一个
            var items = document.getElementsByClassName("title");//获取元素对象列表
            for (var j=0; j<items.length; j++) {//在元素对象个数内循环
                items[j].onclick = function() {//鼠标单击事件执行函数
                    var obj = document.getElementById("opt_" + this.name);//获取当前对象
                    if (obj.style.display != "block") {//判断是否显示
                        hideAllObj();//初始化全部隐藏
                        obj.style.display = "block";//当前对象显示
                        }
                    else {
                        obj.style.display = "none";//当前对象隐藏
                    }
                }
            }
        
        }
         /*自定义方法获取带有class属性值的标签对象*/
        document.getElementsByClassName=function(classname){//扩充方法
            var retnode = [];//初始化空数组
            var myclass = new RegExp('\\b'+classname+'\\b');//生成正则表达式对象
            var elem = this.getElementsByTagName('*');//获取所以的标签对象
                for (var j = 0; j < elem.length; j++) {//在集合中循环
                var classes = elem[j].className;//获取类名
                if (myclass.test(classes)){//对输入参数进行匹配
                    retnode.push(elem[j]);//匹配成功以后放入数组
                }
            }
            return retnode;//返回节点列表数组
        }
    </script>

    <body onload="check()">
        <ul id="menu">
            <li class="item">
                <a href="javascript:void(0)"  class="title" name="1">用户管理</a>
                <ul id="opt_1" class="optiton">
                    <li><a href="#">添加用户</a></li>
                    <li><a href="#">管理用户</a></li>
                </ul>
            </li>
            <li class="item"><a href="javascript:void(0)"  class="title" name="2">新闻管理</a>
                <ul id="opt_2" class="optiton">
                    <li><a href="#">新闻添加</a></li>
                    <li><a href="#">新闻管理</a></li>
                </ul>
            </li>
            <li class="item"><a href="javascript:void(0)"  class="title" name="3">广告管理</a>
                <ul id="opt_3" class="optiton">
                    <li><a href="#">广告添加</a></li>
                    <li><a href="#">广告管理</a></li>
                </ul>
            </li>
            <li class="item"><a href="javascript:void(0)"  class="title" name="4">友情链接</a>
                <ul id="opt_4" class="optiton">
                    <li><a href="#">添加链接</a></li>
                    <li><a href="#">连接管理</a></li>
                    <li><a href="#">退出系统</a></li>
                </ul>
            </li>
        </ul>
    </body>


    第58例:

    单击表头排序表格内容


    <style type="text/css">
    *{
        margin:0px;
        padding:0px;
        }
    body{
        background:#ccc;
        }
    table{
        350px;
        margin:0 auto;
        background-color: #eeeeee;
        }
    table th{
        cursor:hand;
        }
    table td{
        background-color: #FFFFFF;
        font-size:12px;
        font-weight:normal;
        text-align:center;
        line-height:16px;
        }
    </style>
    <script language="javascript">
    function sortCells(type)
    {
        var tbs=document.getElementsByTagName("table")[0];           //获取要排序的表格
        var arr=[];                                                 //初始数组
        for (var i=1;i<tbs.rows.length;i++){
            var text = tbs.rows.cells[type].innerText;                //遍历表格中每一行
            arr.push(text);                                                //将列的数据添加到数组中
        }
        if(type==0){
           arr.sort(function (a,b){return a-b});//按照数字排序
        }else{
           arr.sort();
        }
        for (var j=1;j<tbs.rows.length;j++)
        tbs.rows[j].cells[type].innerText=arr[j-1];                  //输出排序后的结果
    }
    </script>


    <br/>
    <center>点击表头可进行排序</center>
    <br/>
        <center>
            <table border="0">
                <tr>
                    <th    onclick="sortCells(0);">序号</th>
                    <th onclick="sortCells(1);">姓名</th>
                    <th onclick="sortCells(2);">日期</th>
                </tr>
                   <tr>
                   <td>134</td>
                   <td>李四</td>
                   <td>2011-09-21</td>
                </tr>
                <tr>
                    <td>122</td>
                    <td>dream</td>
                    <td>2012-01-22</td>
                </tr>
                <tr>
                    <td>121</td>
                    <td>ata</td>
                    <td>2011-11-21</td>
                </tr>
                <tr>
                    <td>457</td>
                    <td>上海</td>
                    <td>2012-11-21</td>
                </tr>
                <tr>
                    <td>234</td>
                    <td>百度</td>
                    <td>2009-07-21</td>
                </tr>
                <tr>
                    <td>29</td>
                    <td>新浪</td>
                    <td>2010-10-21</td>
                </tr>
            </table>
        </center>



    第59例:

    商品分类列表显示菜单,二级菜单



    <style type="text/css">

    li{list-style-type:none;}
    /* 左右分栏设置 */
    .wrap {
         960px;
         margin:0 auto;
         }
    .wrap .leftzone {
        float: left;
         200px;
        margin:10px 0;
        }
    /*边栏设置 */
    .modTop .sidetitle{
        height:28px;
        background:#ccc;
        font-weight:bold;}
        
    .modTop em{
        float:left;
        padding:6px 0 0 11px;
        font-style:normal;
        color:#000;}
    .sidecontent{
        border-left:#CCC 1px solid;
        border-right:#CCC 1px solid;
        border-bottom:#CCC 1px solid;
        padding:6px;}
    /****左侧商品导航条****/
    .my_left_category{
        180px;
        }
    .my_left_category h1{
        height:20px;
        font-size:14px;
        font-weight:bold;
        padding-left:15px;
        padding-top:8px;
        margin:0px;
        color:#FFF;}
    .my_left_category .my_left_cat_list{
        178px;
        line-height:13.5pt;
        }
    .my_left_category .my_left_cat_list h2 {
        margin:0px;
        padding:3px 5px 0px 9px;
        }
    .my_left_category .my_left_cat_list h2 a {
        color:#d6290b;
        font-weight:bold;
        font-size:14px;
        line-height:22px;
        }
    .my_left_category .my_left_cat_list h2 a:hover {
        color:#d6290b;
        font-weight:bold;
        font-size:14px;
        line-height:22px;
        }
    .my_left_category .h2_cat{
        178px;
        height:26px;
       background-repeat:no-repeat;
       line-height:26px;
       font-weight:normal;
       color:#333333;
       position:relative;
       }
    .my_left_category .h2_cat_1{
        178px;
        height:26px;
        line-height:26px;
        font-weight:normal;
        color:#333333;
        position:relative;
        }
    .my_left_category a{
        font:12px;
        text-decoration:none;
        color:#333333;
        }
    .my_left_category a:hover{
        text-decoration:underline;
        color:#ff3333;}
    .my_left_category h3{
        margin:0px;
        padding:0px;
        height:26px;
        font-size:12px;
        font-weight:normal;
        display:block;
        padding-left:8px;
        }
    .my_left_category h3 span{
        color:#999999;
        145px;
        float:right;}
    .my_left_category h3 a{    
        line-height:26px;
        }
    .my_left_category .h3_cat{
        display:none;
        204px;
        position:absolute;
        left:153px;
        margin-top:-26px;
        cursor:auto;
        }
    .my_left_category .shadow{
        position:inherit;
        204px;}
    .my_left_category .shadow_border{
        position:inherit;
        200px;
        border:1px solid #959595;
        margin-top:1px;
        border-left-0px;
        background-color:#ffffff;
        margin-bottom:3px}
    .my_left_category .shadow_border ul{
        margin:0;
        padding:0;
         margin-left:15px}
    .my_left_category .shadow_border ul li {
        list-style:none;
        padding-left:10px;
        background-repeat:no-repeat;
        background-position:0px 8px;
        float:left;
        75px;
        height:26px;
        overflow:hidden;
        letter-spacing:0px;}
    .my_left_category .active_cat{
        z-index:99;
        background-position:0 -25px;
        cursor:pointer;}
    .my_left_category .active_cat h3 {
        font-weight:bold
        }
    .my_left_category .active_cat h3 span{
        display:none;
        }
    .my_left_category .active_cat div{
        display:block;
        }

    </style>

    <div class="wrap">
        <div class="leftzone">
            <div class="modTop">
                <div class="sidetitle"><em>商品分类</em>
                </div>
            </div>
                <div class="sidecontent">
                    <div class="my_left_category">
                    <div class="my_left_cat_list">
                        <div class="h2_cat" onmouseover="this.className='h2_cat active_cat'" onmouseout="this.className='h2_cat'">
                            <h3><a href="#">高级名茶</a></h3>
                            <div class="h3_cat">
                                <div class="shadow">
                                    <div class="shadow_border">
                                        <ul>
                                            <li><a href="#">龙井</a></li>
                                            <li><a href="#">绿茶</a></li>
                                            <li><a href="#">红茶</a></li>
                                            <li><a href="#">铁观音</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="h2_cat" onmouseover="this.className='h2_cat active_cat'" onmouseout="this.className='h2_cat'">
                            <h3><a href="#">酒类产品</a></h3>
                            <div class="h3_cat">
                                <div class="shadow">
                                    <div class="shadow_border">
                                        <ul>
                                            <li><a href="#">汾酒</a></li>
                                            <li><a href="#">茅台</a></li>
                                            <li><a href="#">五粮液</a></li>
                                            <li><a href="#">金六福</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="h2_cat" onmouseover="this.className='h2_cat active_cat'" onmouseout="this.className='h2_cat'">
                            <h3><a href="#">IT数码</a></h3>
                            <div class="h3_cat">
                                <div class="shadow">
                                    <div class="shadow_border">
                                        <ul>
                                            <li><a href="#">笔记本电脑</a></li>
                                            <li><a href="#">手机</a></li>
                                            <li><a href="#">台式电脑</a></li>
                                            <li><a href="#">平板电脑</a></li>
                                            <li><a href="#">数码相机</a></li>
                                            <li><a href="#">MP3/MP4</a></li>
                                            <li><a href="#">电视机</a></li>
                                            <li><a href="#">电冰箱</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="h2_cat" onmouseover="this.className='h2_cat active_cat'" onmouseout="this.className='h2_cat'">
                            <h3><a href="#">低端价位</a></h3>
                            <div class="h3_cat">
                                <div class="shadow">
                                    <div class="shadow_border">
                                        <ul>
                                            <li><a href="#">50元以下</a></li>
                                            <li><a href="#">50-100元</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="h2_cat" onmouseover="this.className='h2_cat active_cat'" onmouseout="this.className='h2_cat'">
                            <h3><a href="#">中高端价位</a></h3>
                            <div class="h3_cat">
                                <div class="shadow">
                                    <div class="shadow_border">
                                        <ul>
                                            <li><a href="#">100-150元</a></li>
                                            <li><a href="#">150-200元</a></li>
                                            <li><a href="#">200-300元</a></li>
                                            <li><a href="#">300元以上</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="h2_cat" onmouseover="this.className='h2_cat active_cat'" onmouseout="this.className='h2_cat'">
                            <h3><a href="#">限时折扣</a></h3>
                            <div class="h3_cat">
                                <div class="shadow">
                                    <div class="shadow_border">
                                        <ul>
                                            <li><a href="#">外套</a></li>
                                            <li><a href="#">内衣</a></li>
                                            <li><a href="#">裤子</a></li>
                                            <li><a href="#">优惠专区</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="h2_cat" onmouseover="this.className='h2_cat active_cat'" onmouseout="this.className='h2_cat'">
                            <h3><a href="#">团购专区</a></h3>
                            <div class="h3_cat">
                                <div class="shadow">
                                    <div class="shadow_border">
                                        <ul>
                                            <li><a href="#">电影</a></li>
                                            <li><a href="#">台球</a></li>
                                            <li><a href="#">健身</a></li>
                                            <li><a href="#">餐饮</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>



    第60例:

    完整日期时间显示

    <script type="text/javascript">
    function getDayTime(){
        today = new Date();
        var date;
        var arr=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
        date = "日期:"+(today.getYear())+"年"+(today.getMonth() + 1 )+"月"+today.getDate()+"日"+arr[today.getDay()]+"";
        document.write(date);
    }
    function getNowTime(){
        var digital = new Date();
        var hours = digital.getHours();
        var minutes = digital.getMinutes();
        var seconds = digital.getSeconds();
        var amOrPm = "上午";
        if (hours > 11) amOrPm = "下午";
        if (hours > 12) hours = hours - 12;
        if (hours == 0) hours = 12;
        if (minutes < 10) minutes = "0" + minutes;
        if (seconds < 10) seconds = "0" + seconds;
        displayTime=hours+":"+minutes+":"+seconds+" "+amOrPm;
        $('nowTime').innerHTML = "时间:"+displayTime;
        setTimeout("getNowTime()", 1000);
    }
    function $(id){
        return document.getElementById(id);
    }
    </script>

    <table width="298"  border="0" cellspacing="0" cellpadding="0" align="center">
            <tr>
                <th height="30"    bgcolor="#cccccc">完整日期时间显示</th>
            </tr>
            <tr>
                <td height="50" bgcolor="#f4f4f4" align="center">
                <script>
                    getDayTime();
                </script>
                </td>
            </tr>
            <tr>
                <td height="50" bgcolor="#f4f4f4" align="center">
                    <span id='nowTime'></span>
                    <script>
                    getNowTime();
                    </script>
                </td>
            </tr>
        </table>

    明天你会感谢此刻自己的努力!
  • 相关阅读:
    定时器的应用---查询方式---让8个LED灯,左右各4个来回亮
    单片机实现60s定时器
    单片机不同晶振怎么计算延迟时间?
    573锁存器驱动8段数码管
    51单片机英文引脚等中文对照
    Java【小考】
    viso2010从mysql中导出ER图
    驱动继电器实验
    驱动蜂鸣器的实验
    驱动数码管的实验
  • 原文地址:https://www.cnblogs.com/lms520/p/4370166.html
Copyright © 2020-2023  润新知