基于JavaScript打造一款桌面级便签系统

更新时间：2022年02月28日 11:08:37 作者：剽悍一小兔

本文将用html，css和JavaScript实现一个简单的便签系统。除非手动清空便签，否则便签会一直保留，非常方便。感兴趣的小伙伴可以跟随小编一起动手试一试

先看下效果：

载体就是一个网页，用html，css和JavaScript实现一个简单的便签系统。

动画效果用的是animation.css库，缓存用的localStorage。

除非手动清空便签，否则便签会一直保留，非常方便。

鼠标右键可以点开菜单。

代码：

<!doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>WEBQQ桌面级便签系统</title>
        <meta name="keywords" content="关键词,关键词">
        <meta name="description" content="">
 
        <style type="text/css">
            *{margin:0;padding:0;}
            body{background:url("images/bg.jpg");background-size:cover;font-size:12px;font-family:"微软雅黑";color:#666;}
 
            /*menu start*/
            .menu{width:200px;background:#fff;display:none;position:absolute;left:0;top:0;z-index:1;}
            .menu ul li{border-bottom:1px solid #F3F3F3;list-style:none;line-height:36px;font-size:14px;padding-left:15px;}
            .menu ul li:hover{background:#647E7C;color:#fff;}
            /*end menu*/
 
            #test{font-size:24px;color:#fff;}
            
            /*box start*/
            .box{position:relative;}
            .box .b_list{width:294px;height:310px;position:absolute;}
            .box .b_list .b_content{width:256px;height:220px;position:absolute;top:60px;left:16px;outline: none;font-size:18px;}
            .box .timer{position:absolute;bottom:10px;right:20px;font-size:14px;}
            /*end box*/
 
        </style>
    <link type="text/css" rel="stylesheet" href="css/animate.css" rel="external nofollow" ></link>
    </head>
<body>
    
    <!--menu start-->
    <div class="menu">
        <ul>
            <li>新建文件夹</li>
            <li onclick="tz_menu(1);">添加mini便签</li>
            <li onclick="tz_menu(2);">清空便签</li>
            <li>刷新</li>
            <li>上传资料</li>
            <li>更换背景</li>
            <li>注销</li>
        </ul>
    </div>
    <!--end menu-->
 
    <p id="test"></p>
 
    <!--box start-->
    <div class="box"></div>
    <!--end box-->
 
 
<!--引入jQuery官方类库-->
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>    
<script type="text/javascript">
 
    $(function(){
 
        // 页面加载时运行
        var _Mark = localStorage.getItem("_Mark");
        if(_Mark){
            $(".box").html(_Mark);
            auto_timer();
        }
        
        
        // 屏蔽浏览器的右键
        document.oncontextmenu = function(){
            return false;
        }
 
        // 按下鼠标显示右键菜单
        $(document).mousedown(function(e){
            var key = e.which; // 获取鼠标的键位（右键3，左键1，鼠标滚轮2）
            if(key == 3){
                var x = e.clientX;
                var y = e.clientY;
                $("#test").html("X = " + x + " : Y = " + y);
                $(".menu").show().css({left:x,top:y});
            }
        });
 
        // 隐藏右键
        $(document).click(function(){
            $(".menu").hide();
        });
 
    });
 
 
        // 右键的功能
        function tz_menu(flag){
            // 添加便签
            if(flag == 1){
                // 获取当前鼠标的右键的位置
                var left = $(".menu").offset().left;
                var top = $(".menu").offset().top;
 
                // 生成1到3的随机数
                var random = Math.floor(Math.random()*3) + 1;
                
                $(".box").append("<div class='b_list animated rollIn' style='left:"+left+"px;top:"+top+"px;'><img src='images/"+random+".png' alt='便签' width='294' height='310'/>"+
                                "<div class='b_content' contenteditable='true'></div>"+
                                "<p class='timer'><span>3</span>秒后自动保存</p></div>");
                auto_timer();
                
            }
 
            // 清空标签
            if(flag == 2){
                $(".b_list").removeClass("animated rollIn").addClass("animated bounceOut").fadeOut(1000);
                // 清空缓存
                localStorage.removeItem("_Mark");
            }
        }
 
        // 自动保存时间
        function auto_timer(){
            var count = 3;
            var timer = setInterval(function(){
                if(count <= 0){
                    count = 3;
                    // 保存本地内容
                    localStorage.setItem("_Mark",$(".box").html());
                }
                $(".timer").find("span").text(count);
                count--;
            },1000);
        }
 
        
 
 
</script>
 
</body>
</html>

完整代码与素材下载地址

到此这篇关于基于JavaScript打造一款桌面级便签系统的文章就介绍到这了,更多相关JavaScript便签系统内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JS实现iframe自适应高度的方法示例
这篇文章主要介绍了JS实现iframe自适应高度的方法,结合实例形式分析了JS实现iframe高度自适应的实现技巧,并给出了项目示例供大家参考,需要的朋友可以参考下
2017-01-01
javascript实现弹出层效果
这篇文章主要为大家详细介绍了javascript实现弹出层效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-12-12
原生javascript获取元素样式
这篇文章主要介绍了原生javascript获取元素样式的方法,需要的朋友可以参考下
2014-12-12
js中eval方法详解之eval方法的初级应用
js中eval()函数可计算某个字符串,下面这篇文章主要给大家介绍了关于js中eval方法详解之eval方法的初级应用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-01-01
JavaScript获取图片像素颜色并转换为box-shadow显示
这篇文章主要介绍了JavaScript获取图片像素颜色并转换为box-shadow显示的方法,用到了HTML5中的FileReader API和getImageData,转换为的CSS3 box-shadow也要注意浏览器的兼容问题,需要的朋友可以参考下
2016-03-03
js清除浏览器缓存的几种方法
本文主要介绍了js清除浏览器缓存的几种方法，具有很好的参考价值，下面跟着小编一起来看下吧
2017-03-03
详解如何用babel转换es6的class语法
这篇文章主要介绍了详解如何用babel转换es6的class语法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-04-04
JS二分查找算法详解
这篇文章主要为大家详细介绍了JS二分查找算法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-11-11
javascript中的startWith和endWith的几种实现方法
javascript中的startWith和endWith的几种实现方法，需要的朋友可以参考一下
2013-05-05
分享一个插件实现水珠自动下落效果
本篇文章给大家分享一个插件制作水珠自动下落效果，效果非常逼真，感兴趣的朋友可以添加下面代码运行看看效果哦
2016-06-06