几十行代码,打造一款JavaScript便签系统

简介: 几十行代码,打造一款JavaScript便签系统

先看下效果:


微信截图_20230504225136.png


微信截图_20230504225146.png


微信截图_20230504225155.png


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


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


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


微信截图_20230504225215.png


鼠标右键可以点开菜单。


代码:


<!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"></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>
相关文章
|
17天前
|
前端开发 JavaScript Java
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
80 13
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
|
18天前
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
77 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
|
16天前
|
SQL JavaScript 安全
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
61 11
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
|
20天前
|
人工智能 JavaScript 安全
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
67 13
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
用html+javascript打造公文一键排版系统1:设计界面
用html+javascript打造公文一键排版系统1:设计界面
|
5月前
|
JavaScript 前端开发
用html+javascript打造公文一键排版系统12:删除附件说明中“附件:”里的空格
用html+javascript打造公文一键排版系统12:删除附件说明中“附件:”里的空格
|
5月前
|
前端开发
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
|
6月前
|
JavaScript 前端开发 开发者
Vue.js 框架大揭秘:响应式系统、组件化与路由管理,震撼你的前端世界!
【8月更文挑战第27天】Vue.js是一款备受欢迎的前端JavaScript框架,以简洁、灵活和高效著称。本文将从三个方面深入探讨Vue.js:响应式系统、组件化及路由管理。响应式系统为Vue.js的核心特性,能自动追踪数据变动并更新视图。例如,通过简单示例代码展示其响应式特性:`{{ message }}`,当`message`值改变,页面随之自动更新。此外,Vue.js支持组件化设计,允许将复杂界面拆分为独立且可复用的组件,提高代码可维护性和扩展性。如创建一个包含标题与内容的简单组件,并在其他页面中重复利用。
112 3
|
2月前
|
监控 算法 JavaScript
基于 Node.js Socket 算法搭建局域网屏幕监控系统
在数字化办公环境中,局域网屏幕监控系统至关重要。基于Node.js的Socket算法实现高效、稳定的实时屏幕数据传输,助力企业保障信息安全、监督工作状态和远程技术支持。通过Socket建立监控端与被监控端的数据桥梁,确保实时画面呈现。实际部署需合理分配带宽并加密传输,确保信息安全。企业在使用时应权衡利弊,遵循法规,保障员工权益。
55 7
|
3月前
|
Web App开发 JavaScript 前端开发
2024年5月node.js安装(winmac系统)保姆级教程
本篇博客为2024年5月版Node.js安装教程,适用于Windows和Mac系统。作者是一名熟悉JavaScript与Vue的大一学生,分享了Node.js的基本介绍、下载链接及简单安装步骤。安装完成后,通过终端命令`node -v`验证版本即可确认安装成功。欢迎关注作者,获取更多技术文章。
59 2
2024年5月node.js安装(winmac系统)保姆级教程

热门文章

最新文章