页面导航：首页 → 网络编程 → JavaScript → 应用技巧 → 正文内容网页中写字

能在网页中写字和能擦写的js程序

发布：dxy 字体：[增加减小] 类型：转载

从经典论坛发现的一个可以在网页中写字和有擦除功能的javascript代码

点击运行可以看到效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>javascript网页中写字</title> 
<style type="text/css"> 
* { 
    -moz-user-select:none; 
    border:0px; 
} 
#tips { 
    width:850px; 
    padding-top:8px; 
    padding-bottom:8px; 
    background:#999999; 
    color:#FFFFFF; 
    text-align:center; 
    margin:auto; 
    font-size:14px; 
} 
</style> 
<script type="text/javascript"> 
var Is_Mouse_Down = false 
var Is_First=1 
function Create(evt){ 
    evt=evt?evt:window.event 
    if(Is_Mouse_Down){ 
        if(evt.ctrlKey){ 
            Clean(evt) 
        } 
        else { 
            Write(evt) 
        } 
    } 
} 
function Write(evt){ 
    evt=evt?evt:window.event 
    var Obj_Nian=document.createElement("DIV") 
    Obj_Nian.style.position="absolute" 
    Obj_Nian.style.left=evt.clientX-10+"px" 
    Obj_Nian.style.top=evt.clientY-10+"px" 
    switch(Is_First){ 
        case 1:Obj_Nian.innerHTML="刘";break; 
        case 2:Obj_Nian.innerHTML="念";break; 
        case 3:Obj_Nian.innerHTML="我";break; 
        case 4:Obj_Nian.innerHTML="喜";break; 
        case 5:Obj_Nian.innerHTML="欢";break; 
        case 6:Obj_Nian.innerHTML="你";break; 
        default:Obj_Nian.innerHTML="Error";break; 
    } 
    Is_First+=1 
    if(Is_First==7){ 
        Is_First=1 
    } 
    Color_Nian="RGB("+Math.floor(Math.random()*100)+"%,"+Math.floor(Math.random()*100)+"%,"+Math.floor(Math.random()*100)+"%)" 
    Obj_Nian.style.color=Color_Nian 
    document.body.appendChild(Obj_Nian) 
} 
function Clean(evt){ 
    evt=evt?evt:window.event 
    evt.srcObj=evt.srcElement?evt.srcElement:evt.target 
    if(evt.srcObj.tagName=="DIV" && (evt.srcObj.innerHTML=="刘" || evt.srcObj.innerHTML=="念" || evt.srcObj.innerHTML=="我" || evt.srcObj.innerHTML=="喜" || evt.srcObj.innerHTML=="欢" || evt.srcObj.innerHTML=="你")){ 
        evt.srcObj.innerHTML=""  
    } 
} 
document.onmousedown=function(){Is_Mouse_Down=true} 
document.onmousemove=Create 
document.onmouseup=function(){Is_Mouse_Down=false} 
</script> 
</head> 
<body onselectstart="javascript:return false"> 
<div id="tips">提示：按住鼠标左键不放，在页面中拖动即可写字 ; 同时按住ctrl和鼠标左键不放，在页面中拖动即可把字擦去</div> 
</body> 
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

Tags：网页中写字擦写

百度中搜索更多的关于能在网页中写字和能擦写的js程序内容，或者用Google搜索相关更多

浏览次数：载入中... 打印本文关闭本文返回首页

顶一下

文章评论

共有位脚本之家网友发表了评论我来说两句

能在网页中写字和能擦写的js程序

文章评论

同类文章

最近更新

热点排行

能在网页中写字和能擦写的js程序

文章评论

同 类 文 章

最 近 更 新

热 点 排 行

同类文章

最近更新

热点排行