基于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便签系统内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 用js实现网页上模仿桌面右键菜单

    网页上模仿桌面右键菜单 右击鼠标看看 -_-! \n"; // rbpm = right button pop menu HTMLstr += " \n"; HTMLstr += "\n"; HTMLstr += " \n"; HTMLstr += " \n"; HTMLstr += ""; HTMLstr += "\n"; HTMLstr += "\n";

  • javascript实现下班倒计时效果的方法(可桌面通知)

    javascript实现下班倒计时效果的方法(可桌面通知)

    本文实例讲述了javascript实现下班倒计时效果的方法.分享给大家供大家参考.具体如下: 周末了,搞个下班倒计时,娱乐下. 确保下面三点: 1.非IE浏览器,较高Chrome版本,已开启HTML5桌面通知.具体设置见下面截图 2.将这个HTML放到本地Web服务器上测试,直接双击运行无法弹出桌面通知 顺带提下,这个程序很容易扩展成定时通知. 做这个东西的过程有两点比较纠结,总结下: 1.parseInt("09")返回的是0.正确做法是parseInt("09"

  • python制作一个桌面便签软件

    # 2014.10.15 更新了memo.zip, 网盘的exe:修复:1.隔日启动不能正常加载json,加入:1.隐藏任务栏图标,2.通过垃圾桶进行窗口移动. # 2014.10.8 10.36更新了memo.zip # 2014.10.8 13.17 更新了memo.zip 在win10测试,基本没问题 运行widget.py文件. ubuntu: 在ubuntu上,memo.desktop文件可以放在desktop文件夹中,chmod +x,自己修改文件中对应的路径(很容易的).即可用作桌

  • BootStrap便签页的简单应用

    BootStrap便签页的简单应用

    效果图如下: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标签页</title> <link rel='stylesheet' href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css&

  • js实现简易弹幕系统

    本文实例为大家分享了原生js实现弹幕效果的具体代码,供大家参考,具体内容如下 实现思路 1.先写好静态页面框架 <div id='father'> <div id="top"> <video src="./video/s10_2020129112346.mp4" controls autoplay muted loop></video> <!-- controls显示标准的视频控件 autoplay 视频自动播放

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

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

    先看下效果: 载体就是一个网页,用html,css和JavaScript实现一个简单的便签系统. 动画效果用的是animation.css库,缓存用的localStorage. 除非手动清空便签,否则便签会一直保留,非常方便. 鼠标右键可以点开菜单. 代码: <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset

  • 基于JavaScript写一款EJS模板引擎

    目录 1. 起因 2. 基本语法实现 3. Function函数 4 with 5. ejs语句 6. 标签转义 1. 起因 部门最近的一次分享中,有人提出来要实现一个ejs模板引擎,突然发现之前似乎从来都没有考虑过这个问题,一直都是直接拿过来用的.那就动手实现一下吧.本文主要介绍ejs的简单使用,并非全部实现,其中涉及到options配置的部分直接省略了.如有不对请指出,最后欢迎点赞 + 收藏. 2. 基本语法实现 定义render函数,接收html字符串,和data参数. const ren

  • 基于Flowplayer打造一款免费的WEB视频播放器附源码

    基于Flowplayer打造一款免费的WEB视频播放器附源码

    Flowplayer 是一个开源(GPL 3的)WEB视频播放器.您可以将该播放器嵌入您的网页中,如果您是开发人员,您还可以自由定制和配置播放器相关参数以达到您要的播放效果.本文主要介绍Flowplayer的使用. 查看演示   源码下载 Flowplayer支持播放flv.swf等流媒体以及图片文件,能够非常流畅的播放视频文件,支持自定义配置和扩展. 1.加载flowplayer.js 在要播放视频的页面的head之间加入flowplayer.js. <script type="text

  • 基于JavaScript实现智能右键菜单

    通过本文给大家介绍智能右键菜单,需要引入的文件再文末会给出,先给大家展示下代码: 具体代码如下所示: var cityArray = new Array(); cityArray.push("北京"); cityArray.push("上海"); //设置表头的鼠标右击事件 $('th').mousedown(function(e){ var selected = e.target.innerHTML; //3表示右键 if(e.which==3){ if(sele

  • 基于JQuery打造无缝滚动新闻步骤详解

    本文实例讲述了基于JQuery打造无缝滚动新闻的方法.分享给大家供大家参考,具体如下: 首先,我们这里有这么一段html代码,很简洁,如下所示: <ul> <li>你说我是好人吗,我是好人啊</li> <li>哈哈,我真的不知道说什么了</li> <li>生活就是应该平淡的</li> <li>像上学一样的工作</li> </ul> </div> 然后我们要做的就是使它无缝滚动

  • jQuery实现tag便签去重效果的方法

    本文实例讲述了jQuery实现tag便签去重效果的方法.分享给大家供大家参考.具体实现方法如下: html代码如下: 复制代码 代码如下: <head> <script type="text/javascript" src="js/jQuery.js"></script>  <!--jquery引用代码--> <script type="text/javascript" src="j

  • 基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)

    基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)

    随着html5的兴起,那些公司对大型游戏的开发正在慢慢疏远,一.开发周期长:二.运营花费高:他们正找一些能够克服这些缺点的替代品.正好,html5的出现可以改变这些现状,在淘宝.京东等一些大型电商网站.QQ.微信等聊天软件都出现了html5的小游戏,这说明html5越来越受到大家的青睐.接下来我用javascript实现一个小型游戏---打地鼠. 一．游戏简介 打地鼠这个游戏相信大家都不陌生,也是童年时候一款经典的游戏.本次游戏的编写是以html文件形式完成的,并且使用HBulider软件进行编

  • 基于JavaScript实现新年贺卡特效

    基于JavaScript实现新年贺卡特效

    目录 动图演示 主要代码 css样式 Javascirpt 动图演示 一款超级炫酷的2022新年快乐html网页特效,霓虹的城市夜景和绚烂的烟花很是特别,该html页面还有交互效果,点击鼠标就会呈现烟花绽放的特效,唯美不过如此.图片可以换成自己喜欢的夜景或人物都可以.​ 主要代码 图片选择引入: html, body { margin: 0; padding: 0; overflow: hidden; background: #000; font-family: Montserrat, sans

  • 基于JavaScript实现游戏购物车效果详解

    基于JavaScript实现游戏购物车效果详解

    目录 项目展示 登陆界面 注册界面 主界面 项目展示 登陆界面 登陆界面html和js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit

随机推荐