DOM js插入与追加新结点

<html>  
<head>  
<title>js DOM插入与追加</title>  
<script type="text/javascript">
   /*使用appendChild创建结点*/  
   function CreateNode(str)    
   {  
      //创建新div  
      var NewDiv = document.createElement("div");   
      //对div设置 id属性  
        NewDiv.id = "dd";   
      //创建div内加入的内容  
      var NewText = document.createTextNode(str);  
      //追加一个新的子结点  
        NewDiv.appendChild(NewText);  
      //返回新创建结点数据  
      return NewDiv;                                  
   }  
   //向指定结点前插入新结点函数  
   function AppBefore(nodeId, str)                      
   {  
      var node = document.getElementById(nodeId);  
      var newNode = CreateNode(str);  
      //如果存在双亲结点  
      if(node.parentNode)                                
      {  
         //insertBefore(newchild,refchild)  说明:newchild(插入的新结点) refchild(将新结点插入到此结点前)  
         node.parentNode.insertBefore(newNode, node);  
      }  
   }  
   //向指定结点内插入新结点函数  
   function insertWithin(nodeId, str)    
   {    
      //指定结点 id  
      var node = document.getElementById(nodeId);  
      var newNode = CreateNode(str);  
      //追加一个新的结点  
      node.appendChild(newNode);  
   }  
   //向指定结点后插入新结点函数  
   function AppAfter(nodeId, str)      
   {  
      var node = document.getElementById(nodeId);  
      var newNode = CreateNode(str);  
      //如果存在上一级结点  
      if(node.parentNode)      
      {  
         //如果存在下一子结点  
         if(node.nextSibling)    
         {  
            // 在下一子结点前插入子结点  
            node.parentNode.insertBefore(newNode, node.nextSibling);  
         }else{  
            // 如果没有下一子结点向后追加子结点  
            node.parentNode.appendChild(newNode);  
         }  
      }  
   }  
</script>  
</head>  
<body>  
<h1><center> DOM JS 插入与追加</center></h1>  
<hr>  
<div style="background-clolor: #66ff00;" mce_style="background-clolor: #66ff00;">  
   <div id="appendChild" style="background-color:#ffcc00;" mce_style="background-color:#ffcc00;"></div>  
</div>  
<hr>  
<!--/star-->  
<form id="form" name="form" action="#" method="get">  
    <input type="text" id="files" name="files">  
    <input type="button" value="指定结点前插入新结点" onclick="AppBefore('appendChild', document.form.files.value);">  
    <input type="button" value="指定结点中插入新结点" onclick="insertWithin('appendChild', document.form.files.value);">  
    <input type="button" value="指定结点后插入新结点" onclick="AppAfter('appendChild', document.form.files.value);">  
</form>  
<!--/enf-->  
</body>  
</html>

标签: var, div, 结点, 插入, str

备忘:一句话js使input只能输入数字

<input name="start_price" id="start_price" type="text" size="5" onkeyup="value=value.replace(/[^\d]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"/>

 

table居中:

<div   align=center   valign=middle>
<table>
<tr> <td> 居中 </td> </tr>
</table>
</div>

 

parseInt()js数字相加

 

 

 

在当前鼠标位置显示div

var mousePos; 
function mousePosition(ev){ 
    if(ev.pageX || ev.pageY){ 
        return {x:ev.pageX, y:ev.pageY}; 
    } 
    return  {x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, 
     y:ev.clientY + document.body.scrollTop  - document.body.clientTop};      

//显示出一个层,divId:层id;x:右偏移像素;y:下偏移像素; 
function openDiv(divId,x,y){ 
    if(x==null){x=0;} 
    if(y==null){y=0;} 
    if(document.getElementById(divId)!=null){ 
        var dvs=document.getElementById(divId).style;    
        dvs.left=parseInt(mousePos.x)+parseInt(x)+'px';
        dvs.top=parseInt(mousePos.y)+parseInt(y)+'px'; 
        dvs.display="block";
    } 

function mouseMove(ev){  
    ev = ev || window.event;  
    mousePos = mousePosition(ev);  

window.document.onmousemove = mouseMove; 

标签: input, 居中, div, text, table

开源 PHP 验证码 Securimage 带语音识别

 

 

官方网站http://www.phpcaptcha.org/
下载地址http://www.phpcaptcha.org/download/
原文地址http://www.21andy.com/blog/20100417/1886.html

验证码图 片:

<img id="captcha" src="/securimage/securimage_show.php" alt="CAPTCHA Image"  />

验证码文 本框:

<input type="text" name="captcha_code" size="10" maxlength="6" />

看不清验证码

<a href="#" rel="nofollow" target="_blank">Reload Image</a>

后端PHP验 证:

<?php
session_start();
 
include_once $_SERVER['DOCUMENT_ROOT'] . '/securimage/securimage.php';
$securimage = new Securimage();
 
if ($securimage->check($_POST['captcha_code']) == false) {
  // the code was incorrect
  // handle the error accordingly with your other error checking
 
  // or you can do something really basic like this
  die('The code you entered was incorrect.  Go back and try again.');
}

Securimage 属性

$img->image_width = 275;
$securimage->image_height = 90;
$securimage->perturbation = 0.9; // 1.0 = high distortion, higher numbers = more distortion
$securimage->image_bg_color = new Securimage_Color("#0099CC");
$securimage->text_color = new Securimage_Color("#EAEAEA");
$securimage->text_transparency_percentage = 65; // 100 = completely transparent
$securimage->num_lines = 8;
$securimage->line_color = new Securimage_Color("#0000CC");
$securimage->signature_color = new Securimage_Color(rand(0, 64), rand(64, 128), rand(128, 255));
$securimage->image_type = SI_IMAGE_PNG;
$securimage->show('backgrounds/bg5.jpg')

Securimage AJAX 完整示例

AJAX 前端HTML:

<html>
<head>
  <title>PHP Captcha with Ajax</title>
  <script type="text/javascript" src="prototype.js"></script>
 
  <script type="text/javascript">
  <!--
 
  function processForm()
  {
    $('submit').disabled = true;
    $('submit').value = "Processing.  Please Wait...";
 
    $('contact_form').request({
      onSuccess: function(transport)
      {
        if(transport.responseText.match(/^OK/) != null) {
          alert('Your message has been sent!');
          $('contact_form').reset();
        } else {
          alert(transport.responseText);
        }
 
        $('submit').value = 'Send Message';
        $('submit').disabled = false;
      }
    });
 
    return false;
  }
 
  -->
  </script>
</head>
 
<body>
 
<form id="contact_form" action="process.php" method="post" onsubmit="return processForm()">
  <div style="float: left; width: 100px">Your name:</div>
  <div style="float: left"><input type="text" name="sender_name" size="20" /></div>
  <div style="clear: both"></div>
 
  <div style="float: left; width: 100px">Email:</div>
  <div style="float: left"><input type="text" name="sender_email" size="30" /></div>
  <div style="clear: both"></div>
 
  <div style="float: left; width: 100px">Message:</div>
  <div style="float: left"><textarea name="message" rows="4" cols="30"></textarea></div>
  <div style="clear: both"></div>
 
  <div style="float: left; width: 100px">Security Image:</div>
  <div style="float: left"><img src="securimage/securimage_show.php" alt="CAPTCHA Image" /></div>
  <div style="clear: both"></div>
 
  <div style="float: left; width: 100px">Security Code:</div>
  <div style="float: left"><input type="text" name="code" size="8" /></div>
  <div style="clear: both"></div>
 
  <div style="float: left; width: 100px">&nbsp;</div>
  <div style="float: left"><input id="submit" type="submit" value="Send Message" /></div>
  <div style="clear: both"></div>
</form>
 
 
</body>
</html>

AJAX 后端PHP:

<?php


$your_email = 'you@example.com';  // Email to send message to
 
if ($_SERVER['REQUEST_METHOD'] != 'POST') exit; // Quit if it is not a form post
 
// quick way clean up incoming fields
foreach($_POST as $key => $value) $_POST[$key] = urldecode(trim($value));
 
// get form data into shorter variables
// each $_POST variable is named based on the form field's id value
$name    = $_POST['sender_name'];
$email   = $_POST['sender_email'];
$message = $_POST['message'];
$code    = $_POST['code'];
 
$errors  = array(); // array of errors
 
// basic validation
if ($name == '') {
  $errors[] = "Please enter your name";
}
 
if ($email == '') {
  $errors[] = "Please enter your email address";
} else if (strpos($email, '@') === false) {
  $errors[] = "Please enter a valid email address";
}
 
if ($message == '') {
  $errors[] = "Please enter a message to send";
}
 
 
if (sizeof($errors) == 0) {
  // only check the code if there are no other errors
  require_once 'securimage/securimage.php';
  $img = new Securimage;
  if ($img->check($code) == false) {
    $errors[] = "Incorrect security code entered";
  } // if the code checked is correct, it is destroyed to prevent re-use
}
 
if (sizeof($errors) > 0) {
  // if errors, send the error message
  $str = implode("\n", $errors);
  die("There was an error with your submission!  Please correct the following:\n\n" . $str);
}
 
$time = date('r');
$body = <<<EOD
Hi!
 
A message was sent to you from $name on $time.
 
Here is their message:
 
$message
EOD;
 
// send email
mail($your_email, "Contact Form Sent", $body, "From: $your_email\r\nReply-To: $email\r\nContent-Type: text/plain; charset=ISO-8859-1\r\nMIME-Version: 1.0");
 
die('OK'); // send success indicator
 
?>

更详细的文档请看官方网站

 

标签: div, style, float, img, left

纯CSS下拉菜单精简代码

 

<style type="text/css">

ul, li{list-style:none; padding:0; margin:0; line-height:160%}

a{font:normal 14px "宋体"; text-decoration:none}

li.mainnav{margin:10px; border:1px solid #039; float:left}

.mainnav ul{display:none}

.mainnav:hover ul, .mainnav:hover li{display:block}

.mainnav:hover{z-index:2; background:#fff}

</style>

<div style="position:relative; width:600px; height:40px">

<div style="position:absolute">

<ul>

<li class="mainnav">

<!--[if IE 6]><a class="mainnav" href="#"><table><tr><td><![endif]-->

<a href="#">导航01</a>

<ul class="catnavbox">

<li><a href="0101">导航01-05</a></li>

<li><a href="0102">导航01-04</a></li>

<li><a href="0103">导航01-03</a></li>

<li><a href="0104">导航01-02</a></li>

<li><a href="0105">导航01-01</a></li>

</ul>

<!--[if IE 6]></td></tr></table></a><![endif]-->

</li>

<li class="mainnav">

<!--[if IE 6]><a class="mainnav" href="#"><table><tr><td><![endif]-->

<a href="#">导航02</a>

<ul class="catnavbox">

<li><a href="#">导航02-05</a></li>

<li><a href="#">导航02-04</a></li>

<li><a href="#">导航02-03</a></li>

<li><a href="#">导航02-02</a></li>

<li><a href="#">导航02-01</a></li>

</ul>

<!--[if IE 6]></td></tr></table></a><![endif]-->

</li>

</ul>

</div></div>

<div style="clear:both; width:600px; height:100px; background:#390"></div>

标签: href, div, style, class

PHP上传、生成缩略图、生成文字水印和图片水印

<?php

/*

'-##########################################-|

'|     上传+生成缩略图+生成文字水印和图片水印                |

'|     可以直接引用                                                             |

'-##########################################-|

*/

//审明图片文件夹

$bigfolder="img";

$smallfolder="smallimg";

//审明文件夹名称 以年月日来建议文件夹

$fdate=date("Ymd");

//echo $fdate;

//审明文件名称。以年月日时分秒命名

$fname=date("YmdHis");

$bigname="0724e_com_".$fname;

$smallname="0724e_com_".$fname."_s";

//echo $fname."<br/>".$bigname."<br/>".$smallname;

//确定大小文件夹的名称和路经

$bigaddrname=$bigfolder."/".$fdate."/".$bigname;

$smalladdrname=$smallfolder."/".$fdate."/".$smallname;

//审明小图片的高度和宽度

$RESIZEWIDTH=180; 

$RESIZEHEIGHT=150;

//审明水印的文字或图片的地址及字体的地址

$imgaddr="img.jpg"; //图片水印

$fontname="www.0724e.com";   //文字水印

//充许上传的文件扩展名

$exit_name=array(".jpg",".gif",".png");

if (isset($_POST['Submit'])){

//上传部分----------------------------

//定议上传名称和上传错误

$upfile=$_FILES['image']['name'];

$uperror=$_FILES['image']['error'];

//最简表单验证

 

switch ($uperror) {

   case 1:

   die("<div align=\"center\">上传真过PHP设置充许的最大值<a href=\"javascript:history.back();\">点击返回</a></div>");

   break;

   case 2:

die("<div align=\"center\">上传超过了表单充许的最大值<a href=\"javascript:history.back();\">点击返回</a></div>");

   break; 

   case 3:

die("<div align=\"center\">文件只有部分被上传了<a href=\"javascript:history.back();\">点击返回</a></div>");

    break;

   case 4:

die("<div align=\"center\">文件不有被上传<a href=\"javascript:history.back();\">点击返回</a></div>");

    break;

}

 

//检测扩展是否是充许上传的文件类型

//取得文件扩展名

$exname=strrchr($upfile,".");

//判断取得扩展名是否在要求的扩展名内

if(!in_array($exname,$exit_name))

die("<div align=\"center\">文件扩展名不对。只允许上传jpg gif png的图片<a href=\"javascript:history.back();\">点击返回</a></div>");

 

//检测存放图片的目录和子目录是否存在,如果不存在则建目录和子目录,并给目录最大权限777 对LINUX或unix对WINDOWS没必要

//大图

if (!file_exists($bigfolder)){

   mkdir($bigfolder,0777);

   mkdir($bigfolder."/".$fdate,0777);

}else{

   if (!file_exists($bigfolder."/".$fdate)){

mkdir($bigfolder."/".$fdate,0777);

   }

}

//缩略图

if (!file_exists($smallfolder)){

   mkdir($smallfolder,0777);

   mkdir($smallfolder."/".$fdate,0777); 

}else{

   if (!file_exists($smallfolder."/".$fdate)){

   mkdir($smallfolder."/".$fdate,0777); 

   }

}

//创建目录结束

 

//得到临时上传的文件

$upfiletmp=$_FILES['image']['tmp_name'];

//判断临时文件是否存在

if ($uperror==6)

die("<div align=\"center\">找不到临时上传文件,上传失败<a href=\"javascript:history.back();\">点击返回</a></div>");

 

//水印部分==========================================

//水印函数开始============

/**    $groundImage 背景图片,即需要加水印的图片,暂只支持GIF,JPG,PNG格式; 

*    $waterPos    水印位置,有10种状态,0为随机位置; 

*                   1为顶端居左,2为顶端居中,3为顶端居右; 

*                   4为中部居左,5为中部居中,6为中部居右; 

*                   7为底端居左,8为底端居中,9为底端居右; 

*    $waterImage     图片水印,即作为水印的图片,暂只支持GIF,JPG,PNG格式; 

*    $waterText    文字水印,即把文字作为为水印,支持ASCII码,不支持中文; 

*    $textFont    文字大小,值为1、2、3、4或5,默认为5; 

*    $textColor    文字颜色,值为十六进制颜色值,默认为#FF0000(红色); 

* */

 

function imageWaterMark($groundImage,$waterPos=0,$waterImage="",$waterText="", $textFont=5,$textColor="#FF0000") 

$isWaterImage = FALSE; 

$formatMsg = "暂不支持该文件格式,请用图片处理软件将图片转换为GIF、JPG、PNG格式。"; 

 

//读取水印文件 

if(!empty($waterImage) && file_exists($waterImage)) { 

       $isWaterImage = TRUE; 

       $water_info = getimagesize($waterImage); 

       $water_w = $water_info[0];//取得水印图片的宽 

       $water_h = $water_info[1];//取得水印图片的高 

 

       switch($water_info[2])   { //取得水印图片的格式  

         case 1:$water_im = imagecreatefromgif($waterImage);break; 

         case 2:$water_im = imagecreatefromjpeg($waterImage);break; 

         case 3:$water_im = imagecreatefrompng($waterImage);break; 

         default:die($formatMsg); 

       } 

 

//读取背景图片 

if(!empty($groundImage) && file_exists($groundImage)) { 

       $ground_info = getimagesize($groundImage); 

       $ground_w = $ground_info[0];//取得背景图片的宽 

       $ground_h = $ground_info[1];//取得背景图片的高 

 

       switch($ground_info[2]) { //取得背景图片的格式  

         case 1:$ground_im = imagecreatefromgif($groundImage);break; 

         case 2:$ground_im = imagecreatefromjpeg($groundImage);break; 

         case 3:$ground_im = imagecreatefrompng($groundImage);break; 

         default:die($formatMsg); 

       } 

} else { 

       die("需要加水印的图片不存在!"); 

 

//水印位置 

if($isWaterImage) { //图片水印  

       $w = $water_w; 

       $h = $water_h; 

       $label = "图片的"; 

} else {   //文字水印 

       $temp = imagettfbbox(ceil($textFont*2.5),0,"./cour.ttf",$waterText);//取得使用 TrueType 字体的文本的范围 

       $w = $temp[2] - $temp[6]; 

       $h = $temp[3] - $temp[7]; 

       unset($temp); 

       $label = "文字区域"; 

if( ($ground_w<$w) || ($ground_h<$h) ) { 

       echo "需要加水印的图片的长度或宽度比水印".$label."还小,无法生成水印!"; 

       return; 

switch($waterPos) { 

       case 0://随机 

         $posX = rand(0,($ground_w - $w)); 

         $posY = rand(0,($ground_h - $h)); 

         break; 

       case 1://1为顶端居左 

         $posX = 0; 

         $posY = 0; 

         break; 

       case 2://2为顶端居中 

         $posX = ($ground_w - $w) / 2; 

         $posY = 0; 

         break; 

       case 3://3为顶端居右 

         $posX = $ground_w - $w; 

         $posY = 0; 

         break; 

       case 4://4为中部居左 

         $posX = 0; 

         $posY = ($ground_h - $h) / 2; 

         break; 

       case 5://5为中部居中 

         $posX = ($ground_w - $w) / 2; 

         $posY = ($ground_h - $h) / 2; 

         break; 

       case 6://6为中部居右 

         $posX = $ground_w - $w; 

         $posY = ($ground_h - $h) / 2; 

         break; 

       case 7://7为底端居左 

         $posX = 0; 

         $posY = $ground_h - $h; 

         break; 

       case 8://8为底端居中 

         $posX = ($ground_w - $w) / 2; 

         $posY = $ground_h - $h; 

         break; 

       case 9://9为底端居右 

         $posX = $ground_w - $w; 

         $posY = $ground_h - $h; 

         break; 

       default://随机 

         $posX = rand(0,($ground_w - $w)); 

         $posY = rand(0,($ground_h - $h)); 

         break;    

 

//设定图像的混色模式 

imagealphablending($ground_im, true); 

 

if($isWaterImage) { //图片水印 

       imagecopy($ground_im, $water_im, $posX, $posY, 0, 0, $water_w,$water_h);//拷贝水印到目标文件       

} else {//文字水印

       if( !empty($textColor) && (strlen($textColor)==7) ) { 

         $R = hexdec(substr($textColor,1,2)); 

         $G = hexdec(substr($textColor,3,2)); 

         $B = hexdec(substr($textColor,5)); 

       } else { 

         die("水印文字颜色格式不正确!"); 

       } 

       imagestring ( $ground_im, $textFont, $posX, $posY, $waterText, imagecolorallocate($ground_im, $R, $G, $B));       

 

//生成水印后的图片 

@unlink($groundImage); 

switch($ground_info[2]) {//取得背景图片的格式 

       case 1:imagegif($ground_im,$groundImage);break; 

       case 2:imagejpeg($ground_im,$groundImage);break; 

       case 3:imagepng($ground_im,$groundImage);break; 

       default:die($errorMsg); 

 

//释放内存 

if(isset($water_info)) unset($water_info); 

if(isset($water_im)) imagedestroy($water_im); 

unset($ground_info); 

imagedestroy($ground_im); 

//水印函数完

 

 

//存在则移动完在上传

$goodupfile=@move_uploaded_file($upfiletmp,$bigaddrname.$exname);

if (!$goodupfile){

die("<div align=\"center\">上传图片失败<a href=\"javascript:history.back();\">点击返回</a></div>");

}else{ 

  

//文字水印 

imageWaterMark($bigaddrname.$exname,5,"",$fontname,5,"#FF0000"); 

 

//图片水印 

//imageWaterMark($bigaddrname.$exname,5,$imgaddr); 

//结束水印部分===================================

 

 

//缩略图部分------------------------------------------------------------

//判断缩略图大小函数-----

function ResizeImage($im,$maxwidth,$maxheight,$name){ 

$width = imagesx($im); 

$height = imagesy($im); 

if(($maxwidth && $width > $maxwidth) || ($maxheight && $height > $maxheight)){ 

       if($maxwidth && $width > $maxwidth){ 

         $widthratio = $maxwidth/$width; 

         $RESIZEWIDTH=true; 

       } 

       if($maxheight && $height > $maxheight){ 

         $heightratio = $maxheight/$height; 

         $RESIZEHEIGHT=true; 

       } 

       if($RESIZEWIDTH && $RESIZEHEIGHT){ 

         if($widthratio < $heightratio){ 

            $ratio = $widthratio; 

         }else{ 

            $ratio = $heightratio; 

         } 

       }elseif($RESIZEWIDTH){ 

         $ratio = $widthratio; 

       }elseif($RESIZEHEIGHT){ 

         $ratio = $heightratio; 

       } 

       $newwidth = $width * $ratio; 

       $newheight = $height * $ratio; 

       if(function_exists("imagecopyresampled")){ 

             $newim = imagecreatetruecolor($newwidth, $newheight); 

             imagecopyresampled($newim, $im, 0, 0, 0, 0, $newwidth, $newheight, $width, $height); 

       }else{ 

         $newim = imagecreate($newwidth, $newheight); 

             imagecopyresized($newim, $im, 0, 0, 0, 0, $newwidth, $newheight, $width, $height); 

       } 

       ImageJpeg ($newim,$smalladdrname.$name.".jpg"); 

       ImageDestroy ($newim); 

}else{ 

       ImageJpeg ($im,$smalladdrname.$name.".jpg"); 

//生成部分

if($_FILES['image']['size']){ 

if($_FILES['image']['type'] == "image/pjpeg"){ 

       $im = imagecreatefromjpeg($bigaddrname.$exname); 

}elseif($_FILES['image']['type'] == "image/x-png"){ 

       $im = imagecreatefrompng($bigaddrname.$exname); 

}elseif($_FILES['image']['type'] == "image/gif"){ 

       $im = imagecreatefromgif($bigaddrname.$exname); 

if($im){ 

       if(file_exists($smalladdrname.".jpg")){ 

         unlink($smalladdrname.".jpg"); 

       } 

       ResizeImage($im,$RESIZEWIDTH,$RESIZEHEIGHT,$smalladdrname); 

       ImageDestroy ($im); 

}

echo "<div align='center'><a href='javascript:window.history.back()'>上传成功</a></div>";

}

//缩略图结束----------------------------------------------------- 

  

}

?>

<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">

   <input type="file" name="image" />

   <input type="hidden" name="MAX_FILE_SIZE" value="<?=1024*100?>">

   <input type="submit" name="Submit" value="上传图片" />

</form>

标签: div, 图片, fdate, 水印