论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > Javascript教程
Tag:验证,特效,入门,实例,验证,表单,特效,正则表达式,跑马灯,document,函数,代码,getElementByID,菜单,图片,视频教程

cookie技术阿蚊少迷你便签

文章类别:Javascript | 发表日期:2010-3-25 15:41:25

cookie技术阿蚊少迷你便签

21视频教程网3月25日整理

<!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=utf-8" />
<title>迷你便签 阿蚊少作品</title>
</head>
<body>
<script>
<!--
//欢迎大家使用我的作品,使用是请保留此版权信息谢谢合作。
/////////////////////////////////////////////
//             关于迷你便签                //
//     作者:阿蚊少 QQ:262826028            //
//       E-mail:owvsty@163.com             //
//    使用方法:直接调用本JS文件即可        //
/////////////////////////////////////////////
//参数设置
var YhTop = 100//设置相对上边的距离
var YhRight = 0//设置相对右边距离
var Days = 365//设置cookie保存的天
var TitleFont = "宋体"//设置便签标题字体
var TitleColor = "FFFFFF"//设置标题文本颜色
var NoteWidth =180//设置便签宽度
var NoteHeight =300 //设置便签高度
//以下不用修改
var TitleTextWidth = NoteWidth - 20//自动计算标题文本宽度
var TextAreaWidth = NoteWidth - 10//自动计算文本域宽度
var TextAreaHeight = NoteHeight - 74//自动计算文域高度
document.write("<div id=\"NoteDiv\" style=\"position:absolute;top:"+YhTop+"px;right:"+YhRight+"px;\">")
document.write("<div id=\"NoteButton\" style=\"width:30px;height:76px;font-weight:bold;font-size:15px;font-weight:bold;text-align:center;cursor:pointer;border:solid 1px #CCC;background:#69F;\" onclick=\"showBox()\">迷你便签</div>");
document.write("<div id=\"YhNote\" style=\"display:none;text-align:center;width:"+NoteWidth +"px;height:"+NoteHeight+"px;font-size:14px;font-weight:bold;background:#fff;border:solid 1px #69C;\">");
document.write("<div style=\"background:#69C;width:"+NoteWidth+"px;height:20px;border-bottom:solid 1px #ccc;margin-bottom:2px;\"><span style=\"float:left;display:block;font-family:'"+TitleFont+"';width:"+TitleTextWidth+"px;padding:2px 0 2px 0;color:#"+TitleColor+";\">迷你便签</span><span style=\"float:right;display:block;font-size:17px;color:#f00;width:20px;background:#ccc;cursor:pointer;\" onclick=\"closeBox()\" title=\"收起便签\">×</span></div>");
document.write("<textarea id=\"NoteContent\" style=\"width:"+TextAreaWidth +"px;height:"+TextAreaHeight +"px;border:solid 1px #69f;\"></textarea>");
document.write("<div></div>");
document.write("<input type=\"button\" onclick=\"save()\" value=\"保存\" />");
document.write("<input type=\"button\" onclick=\"clear1()\" value=\"清除\" />");
document.write("<div style=\"font-size:12px;border:0;width:120px;height:14px;\" title=\"本功能使用Cookies技术&#10;   请勿禁用Cookies\">使用Cookies技术</div>");
document.write("</div>");
document.write("</div>");
//获取全局对象           /*由于之前使用 document.all(ID)造成FF不能使用*/
var NoteDiv = document.getElementById('NoteDiv')//最外围容器
var NoteButton = document.getElementById('NoteButton')//按钮
var NoteBox = document.getElementById('YhNote')//盒子
var NoteTextArea = document.getElementById('NoteContent')//文本域
//操作涵数 cookie操作
function SetCookie(name,value)//两个参数,一个是cookie的名子,一个是值
{
   
    var exp  = new Date();    //new Date("December 31, 9998");
    exp.setTime(exp.getTime() + Days*24*60*60*1000);
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
function getCookie(name)//取cookies函数       
{
    var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
     if(arr != null) return unescape(arr[2]); return null;
}
//显示便签
function showBox(){
var content = getCookie('NoteCokie')//读取Cookie
if(content==null){
content = ''
}
NoteTextArea.innerHTML = content//给文本域赋值
NoteButton.style.display = 'none'//隐藏打开按钮
NoteBox.style.display='block'//显示盒子
}
//隐藏便签
function closeBox() {
save()//关闭时自动保存
NoteButton.style.display = 'block'//显打开按钮
NoteBox.style.display='none'//隐藏
}
//保存涵数
function save(){
SetCookie('NoteCokie',NoteTextArea.innerHTML)
}
//清空涵数
function clear1(){
NoteTextArea.innerHTML=''
save()
}
//定位便签
function ResetNoteDiv(){
    NoteDiv.style.top = parseInt(document.documentElement.scrollTop,10)+YhTop + "px";//如果后面不加 px 在FF下不能使用
 
}
//重定位便签
window.onresize = ResetNoteDiv
window.onscroll = ResetNoteDiv
//当用户自行关闭浏览器时,为防止数据失丢,自动实现保存
window.onunload = save
//-->
</script>
<br />
<br />
<br />
<br />
<br />
<br />
<br />1222222222222222
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />122222222222222222
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />1222222222222
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />21222222222222222
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />122222222222222
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</body>
</html>

JavaScript教程/编

上一篇:jquery伸缩菜单 人气:3512
下一篇:火狐下textarea高度自适应解决方案 人气:5000
视频教程列表
文章教程搜索
 
Javascript推荐教程
Javascript热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058