devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

第19次修改了可删除可持久保存的前端html备忘录:换了一个特别的倒计时时钟

作者：2023面试高手 | 2024-04-04 17:27:20

赞

踩

第19次修改了可删除可持久保存的前端html备忘录:换了一个特别的倒计时时钟

第19次修改了可删除可持久保存的前端html备忘录:换了一个特别的倒计时时钟

 

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>与妖为邻的文本备忘录</title>
  8. </head>
  9. <style>
  10.   * {
  11.     list-style-type: none;
  12.     /* 外边距 */
  13.     margin: 0;
  14.     /* 内边距区域 */
  15.     padding: 0;
  16.     /* 盒子模型:元素的宽度和高度将包括内容区、内边距和边框，但不包括外边距 */
  17.     box-sizing: border-box;
  18.   }
  19.   body {
  20.     min-height: 100vh;
  21.   }
  22.   input,
  23.   button {
  24.     /* 字体大小 */
  25.     font-size: 18px;
  26.     /* 鼠标变小手 */
  27.     cursor: pointer;
  28.     /* 圆角*/
  29.     border-radius: 5px;
  30.     /* 内边距上下0 左右5 */
  31.     padding: 0px 5px;
  32.   }
  33.   /* 标题区布局开始************************** */
  34.   .hdiv {
  35.     width: 100%;
  36.     height: 65px;
  37.     /* position: relative; */
  38.     position: fixed;
  39.     dfn {
  40.       position: fixed;
  41.       top: 10px;
  42.       left: 0;
  43.       /* 内边距上下0 左右5 */
  44.       padding: 0px 5px;
  45.       /* 圆角*/
  46.       border-radius: 50px;
  47.     }
  48.     b {
  49.       position: fixed;
  50.       top: 10px;
  51.       left: 116px;
  52.       /* 圆角*/
  53.       border-radius: 50%;
  54.       /* 内边距上下0 左右5 */
  55.       padding: 0px 5px;
  56.     }
  57.     #link {
  58.       position: fixed;
  59.       height: 45px;
  60.       top: 10px;
  61.       left: 210px;
  62.       /* 外边距 */
  63.       margin: 0 15px;
  64.       font-size: 30px;
  65.     }
  66.     /* 当前时间布局开始************************** */
  67.     .newtime {
  68.       width: 495px;
  69.       height: 65px;
  70.       position: fixed;
  71.       top: 0px;
  72.       left: 358px;
  73.       /* 圆角*/
  74.       border-radius: 20%;
  75.       #clock {
  76.         position: fixed;
  77.         top: 10px;
  78.         left: 365px;
  79.         /* 字体大小 */
  80.         font-size: 30px;
  81.       }
  82.       /* 翻盘时间显示开始************************** */
  83.       .show {
  84.         display: flex;
  85.         top: -5px;
  86.         left: 295px;
  87.         width: 200px;
  88.         height: 75px;
  89.         position: relative;
  90.         .time {
  91.           display: flex;
  92.           flex: 1;
  93.           font-size: 40px;
  94.           text-align: center;
  95.           line-height: 75px;
  96.           padding: 0 10px;
  97.           overflow: hidden;
  98.           position: absolute;
  99.           top: 0px;
  100.           left: 5px;
  101.           right: 5px;
  102.         }
  103.         .beforeTime {
  104.           z-index: 100;
  105.         }
  106.         .time li:nth-child(2n) {
  107.           flex: 1;
  108.         }
  109.         .time li:nth-child(2n+1) {
  110.           flex: 4;
  111.           position: relative;
  112.           height: 50px;
  113.           line-height: 50px;
  114.           margin: auto 0px;
  115.           border-radius: 10px;
  116.         }
  117.         .time li:nth-child(2n+1) .upBox,
  118.         .time li:nth-child(2n+1) .downBox {
  119.           position: absolute;
  120.           left: 0;
  121.           right: 0;
  122.         }
  123.         .time li:nth-child(2n+1) .upBox {
  124.           top: 0;
  125.           bottom: 50%;
  126.           box-sizing: border-box;
  127.           transform-origin: bottom;
  128.           border-radius: 5px 5px 0 0;
  129.         }
  130.         .time li:nth-child(2n+1) .downBox {
  131.           top: 50%;
  132.           bottom: 0;
  133.           line-height: 0;
  134.           box-sizing: border-box;
  135.           overflow: hidden;
  136.           transform-origin: top;
  137.           border-radius: 0 0 5px 5px;
  138.         }
  139.         /* 翻盘时间显示结束************************** */
  140.       }
  141.       /* 当前时间布局结束************************** */
  142.     }
  143.     .gap {
  144.       position: fixed;
  145.       top: 2px;
  146.       left: 855px;
  147.       font-size: 30px;
  148.       border-radius: 50%;
  149.       /* 内边距上下10 左右15 */
  150.       padding: 10px 15px;
  151.     }
  152.     /*************************倒计时开始********************************/
  153.     #countdown {
  154.       padding: 0 5px;
  155.       width: 483px;
  156.       /* position: fixed; */
  157.       position: relative;
  158.       top: 0px;
  159.       left: 1008px;
  160.       display: flex;
  161.       gap: 5px;
  162.       /* 角 */
  163.       border-radius: 20%;
  164.       .circle {
  165.         position: relative;
  166.         width: 75px;
  167.         height: 75px;
  168.         border-radius: 50%;
  169.         display: flex;
  170.         justify-content: center;
  171.         align-items: center;
  172.         box-shadow: 0 5px 5px rgba(216, 189, 189, 0.363);
  173.         &::before {
  174.           content: '';
  175.           position: absolute;
  176.           border-radius: 50%;
  177.           inset: 0;
  178.           border: 5px solid #000000;
  179.         }
  180.         &::after {
  181.           content: '';
  182.           position: absolute;
  183.           width: 50px;
  184.           height: 50px;
  185.           border-radius: 50%;
  186.           background: #05a388;
  187.           box-shadow: inset 0 1px 1px rgba(204, 150, 150, 0.694);
  188.         }
  189.         & svg {
  190.           width: 75px;
  191.           height: 75px;
  192.           position: relative;
  193.           transform: rotate(270deg);
  194.           & circle {
  195.             width: 100%;
  196.             height: 100%;
  197.             fill: transparent;
  198.             stroke-width: 4;
  199.             stroke: var(--clr);
  200.             stroke-linecap: round;
  201.             transform: translate(2.5px, 2.5px);
  202.             stroke-dasharray: 220;
  203.             stroke-dashoffset: 220;
  204.           }
  205.         }
  206.         & div {
  207.           position: absolute;
  208.           text-align: center;
  209.           font-weight: 1000;
  210.           color: #ffff;
  211.           z-index: 5000;
  212.           color: var(--clr);
  213.           font-size: 30px;
  214.           line-height: 0.6;
  215.         }
  216.       }
  217.       .tsfm {
  218.         position: relative;
  219.         top: 14px;
  220.         left: -1px;
  221.         font-size: 35px;
  222.       }
  223.       /*************************倒计时结束********************************/
  224.     }
  225.     /* 标题区布局结束************************** */
  226.   }
  227.   /* 备忘信息区布局开始************************** */
  228.   #oContent {
  229.      margin:  65px 0;
  230.     /* 复选框样式开始 */
  231.     input[type="checkbox"] {
  232.       margin: 0px 10px;
  233.       -webkit-appearance: none;
  234.       appearance: none;
  235.       width: 25px;
  236.       height: 25px;
  237.       position: relative;
  238.       border-radius: 50%;
  239.     }
  240.     input[type="checkbox"]::after {
  241.       content: "";
  242.       width: 100%;
  243.       height: 100%;
  244.       border: 2px solid #e9f504;
  245.       position: absolute;
  246.       left: -3px;
  247.       top: -3px;
  248.       border-radius: 50%;
  249.       /* 复选框样式开始 */
  250.     }
  251.     /* 设置复选框点击之后的样式*/
  252.     input[type="checkbox"]:checked::after {
  253.       height: 15px;
  254.       width: 25px;
  255.       border-top: none;
  256.       border-right: none;
  257.       border-radius: 0;
  258.       transform: rotate(-45deg);
  259.       transition: all 0.5s ease-in-out;
  260.       /* 设置复选框点击之后的样式结束*/
  261.     }
  262.     span {
  263.       border-radius: 20px;
  264.       padding: 0 10px;
  265.     }
  266.     /* 备忘信息区布局结束************************** */
  267.   }
  268.   /* 隐藏的文本操作框布局开始 ***************************/
  269.   .login {
  270.     display: none;
  271.     width: 650px;
  272.     position: fixed;
  273.     left: 70%;
  274.     top: 50%;
  275.     border-radius: 15px 15px 0 0;
  276.     z-index: 9999;
  277.     transform: translate(-90%, -90%);
  278.     border-radius: 15px;
  279.     .login-title {
  280.       border-radius: 15px 15px 0 0;
  281.       width: 100%;
  282.       line-height: 40px;
  283.       height: 40px;
  284.       font-size: 20px;
  285.       position: relative;
  286.       cursor: move;
  287.       .cl1ose-login {
  288.         margin: 0 10px;
  289.       }
  290.       #closeBtn {
  291.         padding: 0px 10px 0px 10px;
  292.         /*设置X靠右*/
  293.         float: right;
  294.         /*设置边框圆角*/
  295.         /*设置文字大小*/
  296.         font-size: 38px;
  297.         top: -2px;
  298.         right: 5px;
  299.         /*设置绝对定位*/
  300.         position: absolute;
  301.         /*设置去掉斜体文字属性*/
  302.         font-style: normal;
  303.         /*设置鼠标悬停时显示小手*/
  304.         cursor: pointer;
  305.         &:hover {
  306.           color: #6b6b6b;
  307.         }
  308.       }
  309.     }
  310.     .up-div {
  311.       display: flex;
  312.       /*设置主轴方向 垂直显示*/
  313.       flex-direction: column;
  314.       border-radius: 10px;
  315.       height: 205px;
  316.       margin: 10px;
  317.       #myForm {
  318.         display: flex;
  319.         /*设置主轴方向 垂直显示*/
  320.         flex-direction: column;
  321.         box-sizing: border-box;
  322.         border-radius: 10px;
  323.         margin: 10px;
  324.         padding: 5px;
  325.         background-color: #c4a32c;
  326.         & input[type="file"] {
  327.           margin: 10px;
  328.           background-color: #11b711;
  329.           border-radius: 10px;
  330.         }
  331.         & textarea {
  332.           font-size: 20px;
  333.           /* 高 */
  334.           height: 32px;
  335.           border-radius: 5px;
  336.           /* 居中 */
  337.           display: flex;
  338.           justify-content: center;
  339.           margin: 0 10px;
  340.           &::placeholder {
  341.             font-size: 22px;
  342.           }
  343.         }
  344.         div {
  345.           margin: 10px;
  346.           display: flex;
  347.           /*设置主轴方向 垂直显示
  348.             flex-direction: center;*/
  349.           /*设置	居中排列。*/
  350.           justify-content: center;
  351.           gap: 80px;
  352.         }
  353.       }
  354.       .up-div1 {
  355.         margin: 10px;
  356.         display: flex;
  357.         justify-content: space-between;
  358.       }
  359.     }
  360.     sub {
  361.       /* 居中 */
  362.       display: flex;
  363.       justify-content: center;
  364.       border-radius: 5px;
  365.       margin: 10px;
  366.     }
  367.     .site {
  368.       border-radius: 10px;
  369.       margin: 10px;
  370.       button {
  371.         margin: 5px;
  372.       }
  373.     }
  374.     /* 隐藏的文本操作框布局结束 ***************************/
  375.   }
  376.   /* 背景颜色布局******************************************************** */
  377.   body {
  378.     background: radial-gradient(at 60% 0%, #5190b0, #235746);
  379.   }
  380.   .hdiv {
  381.     background: linear-gradient(0.25turn, rgb(110, 123, 108), rgb(204, 232, 207), #f7d6d6);
  382.   }
  383.   button,
  384.   b,
  385.   dfn {
  386.     background-color: #ff0000;
  387.   }
  388.   #countdown,
  389.   .newtime {
  390.     background-color: #48603f;
  391.   }
  392.   input,
  393.   .gap {
  394.     background-color: rgb(171, 5, 5);
  395.   }
  396.   input:hover,
  397.   button:hover,
  398.   textarea,
  399.   sub,
  400.   #oContent {
  401.     background: #303745;
  402.   }
  403.   /*3D背景样式*/
  404.   sub,
  405.   #countdown,
  406.   input,
  407.   .site,
  408.   .up-div,
  409.   .gap,
  410.   button,
  411.   b,
  412.   .newtime,
  413.   button {
  414.     background-image: linear-gradient(to top left,
  415.         rgba(0, 0, 0, 0.2),
  416.         rgba(0, 0, 0, 0.2) 30%,
  417.         rgba(0, 0, 0, 0));
  418.     box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6),
  419.       inset -4px -4px 5px rgba(0, 0, 0, 0.6);
  420.     border: 0px solid black;
  421.   }
  422.   /* 凹进去的样式 */
  423.   #myForm,
  424.   #oContent span,
  425.   dfn,
  426.   button:active,
  427.   input:active {
  428.     box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6),
  429.       inset 2px 2px 3px rgba(0, 0, 0, 0.6);
  430.   }
  431.   .time li:nth-child(2n+1) {
  432.     box-shadow: 0px 0px 1px 1px rgb(1, 0, 0);
  433.   }
  434.   .time li:nth-child(2n+1) .upBox,
  435.   .time li:nth-child(2n+1) .downBox {
  436.     background-color: #3b3d3b;
  437.     ;
  438.     /* 删除线 加颜色*/
  439.     text-decoration: line-through;
  440.     text-decoration-color: #3b3d3b;
  441.     ;
  442.   }
  443.   /* 文本颜色布局***************************************** */
  444.   input,
  445.   ::placeholder,
  446.   textarea,
  447.   sub,
  448.   .cl1ose-login,
  449.   .login-title,
  450.   a,
  451.   .gap,
  452.   button,
  453.   b,
  454.   dfn {
  455.     color: #fff;
  456.     text-shadow: 1px 1px 1px #000;
  457.   }
  458.   input:hover,
  459.   button:hover,
  460.   .delete {
  461.     color: #f0e80a;
  462.     text-shadow: 1px 1px 1px #000;
  463.   }
  464.   b {
  465.     text-shadow: 0px 1px 0px #999,
  466.       0px 2px 0px #888,
  467.       0px 3px 0px #777,
  468.       0px 4px 0px #666,
  469.       0px 5px 0px #555,
  470.       0px 6px 0px #444,
  471.       0px 7px 0px #333,
  472.       0px 8px 7px #001135;
  473.   }
  474.   .show {
  475.     color: #ffffff;
  476.   }
  477.   .tsfm,
  478.   #clock {
  479.     color: #ff0000;
  480.     text-shadow: 1px 1px 1px #000;
  481.   }
  482.   a {
  483.     color: #5190b0;
  484.     text-shadow: 1px 1px 1px #000;
  485.   }
  486.   span {
  487.     color: #75c6b2;
  488.     text-shadow: 1px 1px 1px #000;
  489.   }
  490.   .finish {
  491.     /* 下划线 */
  492.     text-decoration: underline;
  493.     text-decoration-color: rgb(255, 0, 0);
  494.     background-color: rgb(191, 210, 255);
  495.     color: rgb(255, 250, 250);
  496.     text-shadow: 1px 1px 1px #030303;
  497.     box-shadow:
  498.       inset -2px -2px 3px rgba(255, 255, 255, 0.6),
  499.       inset 2px 2px 3px rgba(0, 0, 0, 0.6);
  500.   }
  501.   .login {
  502.     background-color: #cce7cc;
  503.     border: #ebebeb solid 1px;
  504.   }
  505.   .login-title {
  506.     background-color: #b5c7b5;
  507.   }
  508.   .site,
  509.   .up-div {
  510.     background-color: rgba(173, 17, 17, 0.5);
  511.   }
  512. </style>
  513. <!-- <body background="yyds6.jpg" style="background-repeat:no-repeat;
  514. background-attachment:fixed;
  515. background-size:100% 100%; "> -->
  516. <body>
  517.   <div class="hdiv">
  518.     <h1>
  519.       <dfn>memo</dfn>
  520.       <b>备忘录</b>
  521.     </h1>
  522.     <button id="link" href="javascript:;">文本操作</button>
  523.     <!-- 当前时间 -->
  524.     <div class="newtime">
  525.       <div id="clock"></div>
  526.       <!-- 翻盘时间显示开始 -->
  527.       <div class="show">
  528.         <ul class="time">
  529.           <li>
  530.             <div class="upBox beforeTime"></div>
  531.             <div class="downBox beforeTime"></div>
  532.             <div class="upBox afterTime"></div>
  533.             <div class="downBox afterTime"></div>
  534.           </li>
  535.           <li>:</li>
  536.           <li>
  537.             <div class="upBox beforeTime"></div>
  538.             <div class="downBox beforeTime"></div>
  539.             <div class="upBox afterTime"></div>
  540.             <div class="downBox afterTime"></div>
  541.           </li>
  542.           <li>:</li>
  543.           <li>
  544.             <div class="upBox beforeTime"></div>
  545.             <div class="downBox beforeTime"></div>
  546.             <div class="upBox afterTime"></div>
  547.             <div class="downBox afterTime"></div>
  548.           </li>
  549.         </ul>
  550.         <!-- 翻盘时间显示结束 -->
  551.       </div>
  552.       <!-- 当前时间结束 -->
  553.     </div>
  554.     <div class="gap">距离五一</div>
  555.     <!-- 倒计时 -->
  556.     <div id="countdown">
  557.       <div class="circle" style="--clr:#18e3c1;">
  558.         <svg>
  559.           <circle cx="35" cy="35" r="35" id="dd"></circle>
  560.         </svg>
  561.         <div id="days">00</div>
  562.       </div>
  563.       <div class="tsfm">天</div>
  564.       <div class="circle" style="--clr:#41cb35;">
  565.         <svg>
  566.           <circle cx="35" cy="35" r="35" id="hh"></circle>
  567.         </svg>
  568.         <div id="hours">00</div>
  569.       </div>
  570.       <div class="tsfm">时</div>
  571.       <div class="circle" style="--clr:#98aafc;">
  572.         <svg>
  573.           <circle cx="35" cy="35" r="35" id="mm"></circle>
  574.         </svg>
  575.         <div id="minutes">00</div>
  576.       </div>
  577.       <div class="tsfm">分</div>
  578.       <div class="circle" style="--clr:#ec1313;">
  579.         <svg>
  580.           <circle cx="35" cy="35" r="35" id="ss"></circle>
  581.         </svg>
  582.         <div id="seconds">00</div>
  583.       </div>
  584.       <div class="tsfm">秒</div>
  585.       <!-- 倒计时结束 -->
  586.     </div>
  587.     <!-- ----文本操作框-------------------------------- -->
  588.     <div id="login" class="login">
  589.       <div id="title" class="login-title">
  590.         <span class="cl1ose-login">文本操作</span>
  591.         <i href="javascript:void(0);" id="closeBtn">&times</i>
  592.       </div>
  593.       <div class="up-div">
  594.         <form id="myForm">
  595.           <input type="file" name="inputfile" accept="text/plain, text/css, text/html, text/javascript, text/markdown"
  596.             class="background3D" />
  597.           <textarea class="up-textarea" name="uptextarea" rows="1" cols="30%"
  598.             placeholder="请选择txt、js、css或html文件，文件内容会被自动读取"></textarea>
  599.           <div>
  600.             <button type="text" class="up-button">添加</button>
  601.             <input type="reset" value="重置">
  602.           </div>
  603.         </form>
  604.         <hr>
  605.         <div class="up-div1">
  606.           <button id="openButton">打开URL</button>
  607.           <button class="a-href"><a href="https://blog.csdn.net/lulei5153?spm=1011.2415.3001.5343"
  608.               target="_blank">与妖为邻</a></button>
  609.           <button class="a-href"> <a href="https://www.bilibili.com/" target="_blank"> 哔哩哔哩 </a> </button>
  610.           <button id="up-button1" class="delete">对选择删除</button>
  611.         </div>
  612.       </div>
  613.       <sub> &lt;button class="a-href"&gt;
  614.         &lt;a href="输入网站地址" target="_blank"&gt;
  615.         输入网站名称
  616.         &lt;/a&gt; &lt;/button&gt;
  617.       </sub>
  618.       <div class="site">
  619.         <button class="a-href"> <a href="https://www.runoob.com/" target="_blank"> 菜鸟教程 </a> </button>
  620.         <button class="a-href"> <a href="https://cn.vuejs.org/" target="_blank"> JavaScript 框架vue </a></button>
  621.         <button class="a-href"> <a href="https://www.w3ccoo.com/" target="_blank"> w3schools 教程 </a> </button>
  622.         <button class="a-href"><a href="https://www.baidu.com/s" target="_blank">百度一下</a></button>
  623.         <button class="a-href"> <a href="https://zh.javascript.info/" target="_blank"> 现代 JavaScript 教程 </a> </button>
  624.         <button class="a-href"> <a href="https://www.dedexuexi.com/" target="_blank"> 建站学习网 </a></button>
  625.         <button class="a-href"> <a href="https://www.dedexuexi.com/tool/3D/" target="_blank"> CSS3D字体 </a></button>
  626.         <button class="a-href"><a href="https://element-plus.org/zh-CN/" target="_blank">Vue3组件库</a></button>
  627.       </div>
  628.     </div>
  629.   </div>
  630.   <hr>
  631.   <!-- ----备忘录内容容器--------------------------- -->
  632.   <div id="oContent">
  633.   </div>
  634. </body>
  635. </body>
  636. <script>
  637.   /* **************************当前时间函数********************************** */
  638.   function showTime(clock) {
  639.     var now = new Date();
  640.     var year = now.getFullYear();
  641.     var month = now.getMonth();
  642.     var day = now.getDate();
  643.     month = month + 1;
  644.     var arr_work = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
  645.     var week = arr_work[now.getDay()];
  646.     // var time = year+"年"+month+"月"+day+"日 "+ week+" "+hour+":"+minu+":"+second;
  647.     var time = year + "年" + month + "月" + day + "日 " + week;
  648.     clock.innerHTML = time;
  649.   }
  650.   window.onload = function () {
  651.     var clock = document.getElementById("clock");
  652.     window.setInterval("showTime(clock)", 1000);
  653.     var text = document.getElementsByName('uptextarea')[0],
  654.       inputFile = document.getElementsByName('inputfile')[0];
  655.     //上传文件
  656.     inputFile.onchange = function () {
  657.       console.log(this.files);
  658.       var reader = new FileReader();
  659.       reader.readAsText(this.files[0], 'UTF-8');
  660.       reader.onload = function (e) {
  661.         // urlData就是对应的文件内容
  662.         var urlData = this.result;
  663.         text.value = urlData;
  664.       };
  665.     };
  666.   }
  667.   /* **************************翻盘时间函数***********************************/
  668.   //格式化时间
  669.   const formatTime = (time) => {
  670.     if (time < 10) time = '0' + time
  671.     return time
  672.   }
  673.   //翻转前面下面的盒子向上180deg
  674.   const rotateUp = (ele, time, n) => {
  675.     //传入的为一开始翻转的元素，即前面下面的盒子，以及新时间，以及第几个li盒子
  676.     let rotateDeg = 0;
  677.     ele.style.zIndex = 50;
  678.     //这个是所有上面的盒子
  679.     const allUpBox = document.querySelector(`li:nth-child(${n})`).querySelectorAll('.upBox');
  680.     //所有前面的盒子
  681.     const beforeTime = document.querySelector(`li:nth-child(${n})`).querySelectorAll('.beforeTime');
  682.     // 让上面后面的盒子先不可见，然后设置为270°
  683.     allUpBox[1].style.display = 'none';
  684.     allUpBox[1].transform = `rotateX(270deg)`;
  685.     const animation = () => {
  686.       rotateDeg += 3;
  687.       ele.style.transform = `perspective(500px) rotateX(${rotateDeg}deg)`;
  688.       if (rotateDeg == 90) {
  689.         //让它更新为最近时间后隐藏
  690.         ele.innerHTML = time
  691.         ele.style.zIndex = -1;
  692.         //让刚刚上面隐藏的盒子重新显示出来并且完成90°-180°的旋转
  693.         allUpBox[1].style.display = 'block';
  694.         allUpBox[0].style.zIndex = 1;
  695.         rotateDown(allUpBox[1])
  696.         allUpBox[1].style.zIndex = 1;
  697.       }
  698.       if (rotateDeg == 150) {
  699.         beforeTime[0].innerHTML = time
  700.       }
  701.       if (rotateDeg < 180) {
  702.         requestAnimationFrame(animation);
  703.       }
  704.     }
  705.     animation()
  706.   }
  707.   const rotateDown = (ele) => {
  708.     let rotateDeg = 270;
  709.     const animation = () => {
  710.       rotateDeg += 3;
  711.       ele.style.transform = `perspective(500px) rotateX(${rotateDeg}deg)`;
  712.       if (rotateDeg < 360) {
  713.         requestAnimationFrame(animation);
  714.       }
  715.     }
  716.     animation()
  717.   }
  718.   let time = new Date();
  719.   let oldHour = time.getHours();
  720.   var oldMinute = time.getMinutes();
  721.   var oldSecond = time.getSeconds();
  722.   document.querySelector('li:nth-child(1)').querySelectorAll('.beforeTime').forEach(ele => ele.innerHTML = formatTime(oldHour));
  723.   document.querySelector(' li:nth-child(3)').querySelectorAll('.beforeTime').forEach(ele => ele.innerHTML = formatTime(oldMinute));
  724.   document.querySelector(' li:nth-child(5)').querySelectorAll('.beforeTime').forEach(ele => ele.innerHTML = formatTime(oldSecond));
  725.   const changeTime = () => {
  726.     let time = new Date();
  727.     let hour = time.getHours();
  728.     let minute = time.getMinutes();
  729.     let second = time.getSeconds();
  730.     const setHourBox = document.querySelector('li:nth-child(1)').querySelectorAll('.afterTime');
  731.     if (!setHourBox[0].innerHTML || setHourBox[0].innerHTML != formatTime(hour)) {
  732.       if (setHourBox[0].innerHTML) rotateUp(document.querySelector('li:nth-child(1)').querySelectorAll('.beforeTime')[1], formatTime(hour), 1);
  733.       setHourBox.forEach(ele => ele.innerHTML = formatTime(hour));
  734.     }
  735.     const setMinuteBox = document.querySelector('li:nth-child(3)').querySelectorAll('.afterTime');
  736.     if (!setMinuteBox[0].innerHTML || setMinuteBox[0].innerHTML != formatTime(minute)) {
  737.       if (setMinuteBox[0].innerHTML) rotateUp(document.querySelector('li:nth-child(3)').querySelectorAll('.beforeTime')[1], formatTime(minute), 3);
  738.       setMinuteBox.forEach(ele => ele.innerHTML = formatTime(minute));
  739.     }
  740.     const setSecondBox = document.querySelector('li:nth-child(5)').querySelectorAll('.afterTime')
  741.     setSecondBox.forEach(ele => ele.innerHTML = formatTime(second));
  742.     rotateUp(document.querySelector('li:nth-child(5)').querySelectorAll('.beforeTime')[1], formatTime(second), 5)
  743.     setTimeout(changeTime, 1000);
  744.   }
  745.   changeTime();
  746.   /*************************倒计时********************************/
  747.   let days = document.getElementById('days');
  748.   let hours = document.getElementById('hours');
  749.   let minutes = document.getElementById('minutes');
  750.   let seconds = document.getElementById('seconds');
  751.   let dd = document.getElementById('dd');
  752.   let hh = document.getElementById('hh');
  753.   let mm = document.getElementById('mm');
  754.   let ss = document.getElementById('ss');
  755.   let enDate = '05/1/2024 00:00:00';
  756.   let x = setInterval(function () {
  757.     let now = new Date(enDate).getTime();
  758.     let countDown = new Date().getTime();
  759.     let distance = now - countDown;
  760.     let d = Math.floor(distance / (1000 * 60 * 60 * 24));
  761.     let h = Math.floor(distance % (1000 * 60 * 60 * 24) / (1000 * 60 * 60));
  762.     let m = Math.floor(distance % (1000 * 60 * 60) / (1000 * 60));
  763.     let s = Math.floor(distance % (1000 * 60) / 1000);
  764.     days.innerHTML = d;
  765.     hours.innerHTML = h;
  766.     minutes.innerHTML = m;
  767.     seconds.innerHTML = s;
  768.     dd.style.strokeDashoffset = 220 - (220 * d) / 365;
  769.     hh.style.strokeDashoffset = 220 - (220 * h) / 24; // 24
  770.     mm.style.strokeDashoffset = 220 - (220 * m) / 60; // 60
  771.     ss.style.strokeDashoffset = 220 - (220 * s) / 60; // 60
  772.   })
  773.   /**************************备忘录********************************/
  774.   var uptext = document.querySelector(".up-textarea");
  775.   var addto = document.querySelector(".up-button");
  776.   var text = document.querySelector("#oContent");
  777.   /*************添加事件*****************/
  778.   addto.onclick = function () {
  779.     inserhtml(uptext.value, '');
  780.     // 添加后清空输入框
  781.     uptext.value = '';
  782.     // 焦点放回输入框
  783.     uptext.focus();
  784.     savetodo();
  785.   }
  786.   /*************savetodo函数****************/
  787.   var savetodo = function () {
  788.     let todoarr = [];
  789.     let todojs = {};
  790.     var econtent = document.querySelectorAll('.content');
  791.     for (let index = 0; index < econtent.length; index++) {
  792.       todojs.name = econtent[index].innerHTML;
  793.       todojs.finish = econtent[index].classList.contains('finish');
  794.       todoarr.push(todojs);
  795.       todojs = {};
  796.     }
  797.     save(todoarr);
  798.   }
  799.   var loadtodo = function () {
  800.     let todoarr = load();
  801.     for (let index = 0; index < todoarr.length; index++) {
  802.       inserhtml(todoarr[index].name, todoarr[index].finish ? 'finish' : '');
  803.     }
  804.   }
  805.   /**********************本地持久储存（localStorage）函数*****************************/
  806.   var save = function (arr) {
  807.     /**JSON.stringify(arr) 先将数组转换为字符串   
  808.      *localStorage.todotext 然后将字符串保存到本地的todotext中*/
  809.     localStorage.todotext = JSON.stringify(arr);
  810.   }
  811.   /**
  812.    *读取函数，把todotext转成数组
  813.    *然后返回数组*/
  814.   var load = function (arr) {
  815.     var arr = JSON.parse(localStorage.todotext);
  816.     return arr;
  817.   }
  818.   /**********************finish样式函数*****************************/
  819.   /**********************按钮点击事件*****************************/
  820.   text.onclick = function () {
  821.     var tg = event.target;
  822.     // 获取父元素下的所有子元素
  823.     var tgkids = tg.parentElement.children;
  824.     /*******************************对复选框的点击事件******************************/
  825.     if (tgkids[0].checked) {
  826.       tgkids[1].classList.add("finish");
  827.     }
  828.     else {
  829.       tgkids[1].classList.remove("finish");
  830.     }
  831.     // 保存更改的样式
  832.     savetodo();
  833.     /*******************************对选择的进行删除********************************************/
  834.     var Select = document.getElementById("up-button1");
  835.     Select.onclick = function () {
  836.       if (confirm("是否删除所选？")) {
  837.         var check = document.getElementsByName("checkbox");
  838.         for (var i = 0; i < check.length; i++) {
  839.           if (check[i].checked) {
  840.             check[i].parentElement.remove();
  841.             i--;
  842.             // 删除后保存
  843.             savetodo();
  844.           }
  845.         }
  846.       }
  847.     }
  848.   }
  849.   var inserhtml = function (val, cls) {
  850.     text.insertAdjacentHTML("beforeend",
  851.       `<div>
  852.             <input type="checkbox" name='checkbox'>               
  853.             <span class='content ${cls}'>${val}</span>   
  854.        </div>`
  855.     )
  856.   }
  857.   loadtodo();
  858.   /********************文本操作框*****************************************/
  859.   // 1. 获取元素
  860.   var login = document.querySelector('.login');
  861.   var mask = document.querySelector('#oContent');
  862.   // 2. 点击弹出层这个链接link，让mask和login显示出来
  863.   link.addEventListener('click', function () {
  864.     mask.style.display = 'block';
  865.     login.style.display = 'block';
  866.   });
  867.   // 3. 点击closeBtn就隐藏mask和login
  868.   closeBtn.addEventListener('click', function () {
  869.     // mask.style.display = 'none';
  870.     login.style.display = 'none';
  871.   });
  872.   // 4. 开始拖拽
  873.   //（1）当我们鼠标按下，就获得鼠标在盒子内的坐标
  874.   title.addEventListener('mousedown', function (e) {
  875.     var x = e.pageX - login.offsetLeft;
  876.     var y = e.pageY - login.offsetTop;
  877.     //（2）鼠标移动的时候，把鼠标在页面中的坐标，减去鼠标在盒子内的坐标就是模态框的left和top值
  878.     document.addEventListener('mousemove', move);
  879.     function move(e) {
  880.       login.style.left = e.pageX - x + 'px';
  881.       login.style.top = e.pageY - y + 'px';
  882.     }
  883.     //（3）鼠标弹起，就让鼠标移动事件移除
  884.     document.addEventListener('mouseup', function () {
  885.       document.removeEventListener('mousemove', move);
  886.     });
  887.   });
  888.   /*****************************提示弹窗无需点击的函数**********************************************/
  889.   function displayAlert(type, data, time) {
  890.     var prompt = document.createElement("div");
  891.     if (type == "success") {
  892.       prompt.style.width = "200px";
  893.       prompt.style.backgroundColor = "#009900";
  894.     } else if (type == "error") {
  895.       prompt.style.width = "280px";
  896.       prompt.style.backgroundColor = "#990000";
  897.     } else if (type == "info") {
  898.       prompt.style.backgroundColor = " #e6b800";
  899.       prompt.style.width = "600px";
  900.     } else {
  901.       return;
  902.     }
  903.     prompt.id = "prompt";
  904.     prompt.style.textAlign = "center";
  905.     prompt.style.position = "absolute";
  906.     prompt.style.height = "60px";
  907.     prompt.style.marginLeft = "-100px";
  908.     prompt.style.marginTop = "-30px";
  909.     prompt.style.left = "30%";
  910.     prompt.style.top = "5%";
  911.     prompt.style.color = "white";
  912.     prompt.style.fontSize = "25px";
  913.     prompt.style.borderRadius = "20px";
  914.     prompt.style.textAlign = "center";
  915.     prompt.style.lineHeight = "60px";
  916.     if (document.getElementById("") == null) {
  917.       document.body.appendChild(prompt);
  918.       prompt.innerHTML = data;
  919.       setTimeout(function () {
  920.         document.body.removeChild(prompt);
  921.       }, time);
  922.     }
  923.   }
  924.   /**************************打开URL按钮的JavaScript******************************************/
  925.   // 获取打开URL按钮元素
  926.   var openBtn = document.getElementById("openButton");
  927.   // 添加点击事件处理程序
  928.   openBtn.addEventListener('click', function () {
  929.     // 获取文件路径
  930.     // 这里假设您已经有一个函数来获取文件路径，例如 prompt('请输入文件路径', 'D:/前端学习', '_blank');
  931.     var filePath = prompt("请输入网站地址或者本地文件路径", "D:/备忘录信息");
  932.     if (filePath) {
  933.       // 使用window.location对象的assign()方法导航到指定文件
  934.       // window.location.assign(filePath);
  935.       // 或者使用window.open()方法打开新窗口导航到指定文件
  936.       window.open(filePath);
  937.     } else {
  938.       displayAlert('info', '未提供有效的文件路径！', 1500);
  939.       // alert("未提供有效的文件路径！");
  940.     }
  941.   });
  942.   /**************************本地文件读取的函数******************************************/
  943.   /**************************复制文本******************************************/
  944.   var oContent = document.getElementById('oContent');
  945.   oContent.ondragend = function () {
  946.     document.execCommand("Copy");
  947.     // alert("复制成功")
  948.     displayAlert('error', '复制成功！', 1500);
  949.   };
  950. </script>
  951. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/360136
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号