翻开右上角的开发者形式
点击加载已解压的扩展程序
挑选自己的chrome标签页项目目录即可

总结一下

为了让心爱的 TA 高兴，作为程序员的咱们可谓是煞费苦心呀！！

在给目标装置插件的时分，发现了一个小问题，或许是chrome版别原因，导致jquery的cdn无法直接引证，所以或许需求手动把jquery保存到项目文件中，然后在manifest.json装备js的当地把jquery的js加上即可。

码上中我现已把jquery的代码、canvas的代码、核算纪念日的代码都放进去了，能够直接复制到自己项目中哦！！！

七夕节快到了，祝福全国有情人终成眷属！

我正在参与「构思开发投稿大赛」概况请看：构思开发大赛来了！

开发完结之后，一切的文件便是这样的了，里边的icon能够依据自己的喜爱去规划或许网上下载。

运用chrome浏览器翻开：chrome://extensions/ 即可跳转到增加扩展程序页面。

翻开右上角的开发者形式
点击加载已解压的扩展程序
挑选自己的chrome标签页项目目录即可

总结一下

为了让心爱的 TA 高兴，作为程序员的咱们可谓是煞费苦心呀！！

在给目标装置插件的时分，发现了一个小问题，或许是chrome版别原因，导致jquery的cdn无法直接引证，所以或许需求手动把jquery保存到项目文件中，然后在manifest.json装备js的当地把jquery的js加上即可。

码上中我现已把jquery的代码、canvas的代码、核算纪念日的代码都放进去了，能够直接复制到自己项目中哦！！！

七夕节快到了，祝福全国有情人终成眷属！

我正在参与「构思开发投稿大赛」概况请看：构思开发大赛来了！

前语

（更多…）

新建HTML和JS

在装备项中的content_scripts和chrome_url_overrides中别离界说了html文件和js文件，所以咱们需求新建这两个文件，称号对应即可。

HTML布景

没有哪个小天使能够回绝来自程序猿蛮横的满屏小心心好吗？接下来我来教咱们做一个飘满屏的爱心。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Every Day About You</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="canvas.js" ></script>
  </head>
  <body>
    <canvas id="c" style="position: absolute;z-index: -1;text-align: center;"></canvas>
  </body>
</html>

这儿引入的 jquery 是百度的CDN（matches中装备了能够运用一切的URL，所以CDN是能够运用外部链接的。）
canvas.js中主要是针对爱心和布景色进行绘画。

canvas

$(document).ready(function () {
  var canvas = document.getElementById("c");
  var ctx = canvas.getContext("2d");
  var c = $("#c");
  var w, h;
  var pi = Math.PI;
  var all_attribute = {
    num: 100, // 个数
    start_probability: 0.1, // 假如数量小于num，有这些几率增加一个新的     		     
    size_min: 1, // 初始爱心巨细的最小值
    size_max: 2, // 初始爱心巨细的最大值
    size_add_min: 0.3, // 每次变大的最小值（便是速度）
    size_add_max: 0.5, // 每次变大的最大值
    opacity_min: 0.3, // 初始透明度最小值
    opacity_max: 0.5, // 初始透明度最大值
    opacity_prev_min: .003, // 透明度递减值最小值
    opacity_prev_max: .005, // 透明度递减值最大值
    light_min: 0, // 色彩亮度最小值
    light_max: 90, // 色彩亮度最大值
  };
  var style_color = find_random(0, 360);
  var all_element = [];
  window_resize();
  function start() {
    window.requestAnimationFrame(start);
    style_color += 0.1;
    //更改布景色hsl(色彩值，饱和度，明度)
    ctx.fillStyle = 'hsl(' + style_color + ',100%,97%)';
    ctx.fillRect(0, 0, w, h);
    if (all_element.length < all_attribute.num && Math.random() < all_attribute.start_probability) {
      all_element.push(new ready_run);
    }
    all_element.map(function (line) {
      line.to_step();
    })
  }
  function ready_run() {
    this.to_reset();
  }
  function arc_heart(x, y, z, m) {
    //制作爱心图画的办法，参数x,y是爱心的初始坐标，z是爱心的巨细，m是爱心上升的速度
    y -= m * 10;
    ctx.moveTo(x, y);
    z *= 0.05;
    ctx.bezierCurveTo(x, y - 3 * z, x - 5 * z, y - 15 * z, x - 25 * z, y - 15 * z);
    ctx.bezierCurveTo(x - 55 * z, y - 15 * z, x - 55 * z, y + 22.5 * z, x - 55 * z, y + 22.5 * z);
    ctx.bezierCurveTo(x - 55 * z, y + 40 * z, x - 35 * z, y + 62 * z, x, y + 80 * z);
    ctx.bezierCurveTo(x + 35 * z, y + 62 * z, x + 55 * z, y + 40 * z, x + 55 * z, y + 22.5 * z);
    ctx.bezierCurveTo(x + 55 * z, y + 22.5 * z, x + 55 * z, y - 15 * z, x + 25 * z, y - 15 * z);
    ctx.bezierCurveTo(x + 10 * z, y - 15 * z, x, y - 3 * z, x, y);
  }
  ready_run.prototype = {
    to_reset: function () {
      var t = this;
      t.x = find_random(0, w);
      t.y = find_random(0, h);
      t.size = find_random(all_attribute.size_min, all_attribute.size_max);
      t.size_change = find_random(all_attribute.size_add_min, all_attribute.size_add_max);
      t.opacity = find_random(all_attribute.opacity_min, all_attribute.opacity_max);
      t.opacity_change = find_random(all_attribute.opacity_prev_min, all_attribute.opacity_prev_max);
      t.light = find_random(all_attribute.light_min, all_attribute.light_max);
      t.color = 'hsl(' + style_color + ',100%,' + t.light + '%)';
    },
    to_step: function () {
      var t = this;
      t.opacity -= t.opacity_change;
      t.size += t.size_change;
      if (t.opacity <= 0) {
        t.to_reset();
        return false;
      }
      ctx.fillStyle = t.color;
      ctx.globalAlpha = t.opacity;
      ctx.beginPath();
      arc_heart(t.x, t.y, t.size, t.size);
      ctx.closePath();
      ctx.fill();
      ctx.globalAlpha = 1;
    }
  }
  function window_resize() {
    w = window.innerWidth;
    h = window.innerHeight;
    canvas.width = w;
    canvas.height = h;
  }
  $(window).resize(function () {
    window_resize();
  });
  //回来一个介于参数1和参数2之间的随机数
  function find_random(num_one, num_two) {
    return Math.random() * (num_two - num_one) + num_one;
  }
  start();
});

因为运用了jquery的CDN，所以咱们在js中就能够直接运用 $(document).ready办法

土豪金色的标题

为了时间展现出对 TA 的爱，咱们除了在布景中体现出来之外，还能够再文字中体现出来，所以需求取一个充溢爱意的标题。

<body>
  <canvas id="c" style="position: absolute;z-index: -1;text-align: center;"></canvas> 
  <div class="middle">
    <h1 class="label">Every Day About You</h1>
  </div>
</body>

<style>
  @import url("https://fonts.googleapis.com/css?family=Aleo");
  :root {
    font-family: "Aleo", sans-serif;
  }
  html,
  body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
  }
  .middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    user-select: none;
  }
  .label {
    font-size: 2.2rem;
    background: url("text_bg.png");
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: moveBg 30s linear infinite;
  }
  @keyframes moveBg {
    0% {
      background-position: 0% 30%;
    }
    100% {
      background-position: 1000% 500%;
    }
  }
</style>

这儿引入了googleapis中的字体款式。
给label一个布景，并运用了动画作用。

这个便是文字后边的静态图片，能够另存为然后运用的哦~

百度搜索框

关于你心爱的 TA 来说，不论干什么估量都得用百度直接搜出来，就算是看个优酷、微博都不会记住域名，都会直接去百度一下，所以咱们需求在标签页中直接集成百度搜索。让 TA 能够高枕无忧的搜索想要的东西。

因为现在百度搜索框不能直接去站长东西中获取了，所以咱们能够参阅标签页插件中的百度搜索框。

依据的标签页插件咱们能够发现，输入成果之后，直接跳转到百度的网址，并在url后边携带了一个 wd 的参数，wd 也便是咱们输入的内容了。

www.baidu.com/s?wd=这儿是输入的…

<div class="search">
  <input id="input" type="text">
  <button>百度一下</button>
</div>

<script>
  var input = document.getElementById("input")
  var btn = document.querySelector('button')
  btn.addEventListener('click', function () {
    location.href = 'http://www.baidu.com/s?wd=' + input.value
  })
</script>

.search {
  width: 750px;
  height: 50px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-content: center;
  min-width: 750px;
  position: relative;
}
input {
  width: 550px;
  height: 40px;
  border-right: none;
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;
  border-color: #f5f5f5;
  /* 去除搜索框激活状况的边框 */
  outline: none;
}
input:hover {
  /* 鼠标移入状况 */
  box-shadow: 2px 2px 2px #ccc;
}
input:focus {
  /* 选中状况,边框色彩改变 */
  border-color: rgb(78, 110, 242);
}
.search span {
  position: absolute;
  font-size: 23px;
  top: 10px;
  right: 170px;
}
.search span:hover {
  color: rgb(78, 110, 242);
}
button {
  width: 100px;
  height: 44px;
  background-color: rgb(78, 110, 242);
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  border-color: rgb(78, 110, 242);
  color: white;
  font-size: 14px;
}

关于 TA

这儿能够放置你们之间的一些生日，纪念日等等，也能够放置你想放置的任何浪漫，典礼感满满~

假如你不记得两个人之间的纪念日，那就换其他的日子吧。比方你和 TA 闺蜜的纪念日也能够。

<body>
  <canvas id="c" style="position: absolute;z-index: -1;text-align: center;"></canvas> 
  <div class="middle">
    <h1 class="label">Every Day About You</h1>
    <div class="time">
      <span>
        <div id="d">
          00
        </div>
        Love day
      </span> <span>
        <div id="h">
          00
        </div>
        First Met
      </span> <span>
        <div id="m">
          00
        </div>
        birthday
      </span> <span>
        <div id="s">
          00
        </div>
        age
      </span>
    </div>
  </div>
  <script type="text/javascript" src="demo.js"></script>
</body>

这儿我界说了四个日期，爱情纪念日、相识纪念日、TA 的生日、TA 的年纪。
在页面最终引证了一个js文件，主要是等候页面烘托完结之后调用js去核算日期的逻辑。

爱情纪念日

var date1 = new Date('2019-10-07')
var date2 = new Date()
var s1 = date1.getTime(),
  s2 = date2.getTime();
var total = (s2 - s1) / 1000;
var day = parseInt(total / (24 * 60 * 60)); //核算整数天数
const d = document.getElementById("d");
d.innerHTML = getTrueNumber(day);

相识纪念日

var date1 = new Date('2019-09-20')
var date2 = new Date()
var s1 = date1.getTime(),
  s2 = date2.getTime();
var total = (s2 - s1) / 1000;
var day = parseInt(total / (24 * 60 * 60)); //核算整数天数
h.innerHTML = getTrueNumber(day);

公共办法(将核算出来的日子转为绝对值)

const getTrueNumber = x => (x < 0 ? Math.abs(x) : x);

因为生日和年纪的核算代码有些多，所以放在码上中展现了。

增加到chrome浏览器中

开发完结之后，一切的文件便是这样的了，里边的icon能够依据自己的喜爱去规划或许网上下载。

运用chrome浏览器翻开：chrome://extensions/ 即可跳转到增加扩展程序页面。

翻开右上角的开发者形式
点击加载已解压的扩展程序
挑选自己的chrome标签页项目目录即可

总结一下

为了让心爱的 TA 高兴，作为程序员的咱们可谓是煞费苦心呀！！

在给目标装置插件的时分，发现了一个小问题，或许是chrome版别原因，导致jquery的cdn无法直接引证，所以或许需求手动把jquery保存到项目文件中，然后在manifest.json装备js的当地把jquery的js加上即可。

码上中我现已把jquery的代码、canvas的代码、核算纪念日的代码都放进去了，能够直接复制到自己项目中哦！！！

七夕节快到了，祝福全国有情人终成眷属！

我正在参与「构思开发投稿大赛」概况请看：构思开发大赛来了！

前语

（更多…）

新建HTML和JS

在装备项中的content_scripts和chrome_url_overrides中别离界说了html文件和js文件，所以咱们需求新建这两个文件，称号对应即可。

HTML布景

没有哪个小天使能够回绝来自程序猿蛮横的满屏小心心好吗？接下来我来教咱们做一个飘满屏的爱心。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Every Day About You</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="canvas.js" ></script>
  </head>
  <body>
    <canvas id="c" style="position: absolute;z-index: -1;text-align: center;"></canvas>
  </body>
</html>

这儿引入的 jquery 是百度的CDN（matches中装备了能够运用一切的URL，所以CDN是能够运用外部链接的。）
canvas.js中主要是针对爱心和布景色进行绘画。

canvas

$(document).ready(function () {
  var canvas = document.getElementById("c");
  var ctx = canvas.getContext("2d");
  var c = $("#c");
  var w, h;
  var pi = Math.PI;
  var all_attribute = {
    num: 100, // 个数
    start_probability: 0.1, // 假如数量小于num，有这些几率增加一个新的     		     
    size_min: 1, // 初始爱心巨细的最小值
    size_max: 2, // 初始爱心巨细的最大值
    size_add_min: 0.3, // 每次变大的最小值（便是速度）
    size_add_max: 0.5, // 每次变大的最大值
    opacity_min: 0.3, // 初始透明度最小值
    opacity_max: 0.5, // 初始透明度最大值
    opacity_prev_min: .003, // 透明度递减值最小值
    opacity_prev_max: .005, // 透明度递减值最大值
    light_min: 0, // 色彩亮度最小值
    light_max: 90, // 色彩亮度最大值
  };
  var style_color = find_random(0, 360);
  var all_element = [];
  window_resize();
  function start() {
    window.requestAnimationFrame(start);
    style_color += 0.1;
    //更改布景色hsl(色彩值，饱和度，明度)
    ctx.fillStyle = 'hsl(' + style_color + ',100%,97%)';
    ctx.fillRect(0, 0, w, h);
    if (all_element.length < all_attribute.num && Math.random() < all_attribute.start_probability) {
      all_element.push(new ready_run);
    }
    all_element.map(function (line) {
      line.to_step();
    })
  }
  function ready_run() {
    this.to_reset();
  }
  function arc_heart(x, y, z, m) {
    //制作爱心图画的办法，参数x,y是爱心的初始坐标，z是爱心的巨细，m是爱心上升的速度
    y -= m * 10;
    ctx.moveTo(x, y);
    z *= 0.05;
    ctx.bezierCurveTo(x, y - 3 * z, x - 5 * z, y - 15 * z, x - 25 * z, y - 15 * z);
    ctx.bezierCurveTo(x - 55 * z, y - 15 * z, x - 55 * z, y + 22.5 * z, x - 55 * z, y + 22.5 * z);
    ctx.bezierCurveTo(x - 55 * z, y + 40 * z, x - 35 * z, y + 62 * z, x, y + 80 * z);
    ctx.bezierCurveTo(x + 35 * z, y + 62 * z, x + 55 * z, y + 40 * z, x + 55 * z, y + 22.5 * z);
    ctx.bezierCurveTo(x + 55 * z, y + 22.5 * z, x + 55 * z, y - 15 * z, x + 25 * z, y - 15 * z);
    ctx.bezierCurveTo(x + 10 * z, y - 15 * z, x, y - 3 * z, x, y);
  }
  ready_run.prototype = {
    to_reset: function () {
      var t = this;
      t.x = find_random(0, w);
      t.y = find_random(0, h);
      t.size = find_random(all_attribute.size_min, all_attribute.size_max);
      t.size_change = find_random(all_attribute.size_add_min, all_attribute.size_add_max);
      t.opacity = find_random(all_attribute.opacity_min, all_attribute.opacity_max);
      t.opacity_change = find_random(all_attribute.opacity_prev_min, all_attribute.opacity_prev_max);
      t.light = find_random(all_attribute.light_min, all_attribute.light_max);
      t.color = 'hsl(' + style_color + ',100%,' + t.light + '%)';
    },
    to_step: function () {
      var t = this;
      t.opacity -= t.opacity_change;
      t.size += t.size_change;
      if (t.opacity <= 0) {
        t.to_reset();
        return false;
      }
      ctx.fillStyle = t.color;
      ctx.globalAlpha = t.opacity;
      ctx.beginPath();
      arc_heart(t.x, t.y, t.size, t.size);
      ctx.closePath();
      ctx.fill();
      ctx.globalAlpha = 1;
    }
  }
  function window_resize() {
    w = window.innerWidth;
    h = window.innerHeight;
    canvas.width = w;
    canvas.height = h;
  }
  $(window).resize(function () {
    window_resize();
  });
  //回来一个介于参数1和参数2之间的随机数
  function find_random(num_one, num_two) {
    return Math.random() * (num_two - num_one) + num_one;
  }
  start();
});

因为运用了jquery的CDN，所以咱们在js中就能够直接运用 $(document).ready办法

土豪金色的标题

为了时间展现出对 TA 的爱，咱们除了在布景中体现出来之外，还能够再文字中体现出来，所以需求取一个充溢爱意的标题。

<body>
  <canvas id="c" style="position: absolute;z-index: -1;text-align: center;"></canvas> 
  <div class="middle">
    <h1 class="label">Every Day About You</h1>
  </div>
</body>

<style>
  @import url("https://fonts.googleapis.com/css?family=Aleo");
  :root {
    font-family: "Aleo", sans-serif;
  }
  html,
  body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
  }
  .middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    user-select: none;
  }
  .label {
    font-size: 2.2rem;
    background: url("text_bg.png");
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: moveBg 30s linear infinite;
  }
  @keyframes moveBg {
    0% {
      background-position: 0% 30%;
    }
    100% {
      background-position: 1000% 500%;
    }
  }
</style>

这儿引入了googleapis中的字体款式。
给label一个布景，并运用了动画作用。

这个便是文字后边的静态图片，能够另存为然后运用的哦~

百度搜索框

关于你心爱的 TA 来说，不论干什么估量都得用百度直接搜出来，就算是看个优酷、微博都不会记住域名，都会直接去百度一下，所以咱们需求在标签页中直接集成百度搜索。让 TA 能够高枕无忧的搜索想要的东西。

因为现在百度搜索框不能直接去站长东西中获取了，所以咱们能够参阅标签页插件中的百度搜索框。

依据的标签页插件咱们能够发现，输入成果之后，直接跳转到百度的网址，并在url后边携带了一个 wd 的参数，wd 也便是咱们输入的内容了。

www.baidu.com/s?wd=这儿是输入的…

<div class="search">
  <input id="input" type="text">
  <button>百度一下</button>
</div>

<script>
  var input = document.getElementById("input")
  var btn = document.querySelector('button')
  btn.addEventListener('click', function () {
    location.href = 'http://www.baidu.com/s?wd=' + input.value
  })
</script>

.search {
  width: 750px;
  height: 50px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-content: center;
  min-width: 750px;
  position: relative;
}
input {
  width: 550px;
  height: 40px;
  border-right: none;
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;
  border-color: #f5f5f5;
  /* 去除搜索框激活状况的边框 */
  outline: none;
}
input:hover {
  /* 鼠标移入状况 */
  box-shadow: 2px 2px 2px #ccc;
}
input:focus {
  /* 选中状况,边框色彩改变 */
  border-color: rgb(78, 110, 242);
}
.search span {
  position: absolute;
  font-size: 23px;
  top: 10px;
  right: 170px;
}
.search span:hover {
  color: rgb(78, 110, 242);
}
button {
  width: 100px;
  height: 44px;
  background-color: rgb(78, 110, 242);
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  border-color: rgb(78, 110, 242);
  color: white;
  font-size: 14px;
}

关于 TA

这儿能够放置你们之间的一些生日，纪念日等等，也能够放置你想放置的任何浪漫，典礼感满满~

假如你不记得两个人之间的纪念日，那就换其他的日子吧。比方你和 TA 闺蜜的纪念日也能够。

<body>
  <canvas id="c" style="position: absolute;z-index: -1;text-align: center;"></canvas> 
  <div class="middle">
    <h1 class="label">Every Day About You</h1>
    <div class="time">
      <span>
        <div id="d">
          00
        </div>
        Love day
      </span> <span>
        <div id="h">
          00
        </div>
        First Met
      </span> <span>
        <div id="m">
          00
        </div>
        birthday
      </span> <span>
        <div id="s">
          00
        </div>
        age
      </span>
    </div>
  </div>
  <script type="text/javascript" src="demo.js"></script>
</body>

这儿我界说了四个日期，爱情纪念日、相识纪念日、TA 的生日、TA 的年纪。
在页面最终引证了一个js文件，主要是等候页面烘托完结之后调用js去核算日期的逻辑。

爱情纪念日

var date1 = new Date('2019-10-07')
var date2 = new Date()
var s1 = date1.getTime(),
  s2 = date2.getTime();
var total = (s2 - s1) / 1000;
var day = parseInt(total / (24 * 60 * 60)); //核算整数天数
const d = document.getElementById("d");
d.innerHTML = getTrueNumber(day);

相识纪念日

var date1 = new Date('2019-09-20')
var date2 = new Date()
var s1 = date1.getTime(),
  s2 = date2.getTime();
var total = (s2 - s1) / 1000;
var day = parseInt(total / (24 * 60 * 60)); //核算整数天数
h.innerHTML = getTrueNumber(day);

公共办法(将核算出来的日子转为绝对值)

const getTrueNumber = x => (x < 0 ? Math.abs(x) : x);

因为生日和年纪的核算代码有些多，所以放在码上中展现了。

增加到chrome浏览器中

开发完结之后，一切的文件便是这样的了，里边的icon能够依据自己的喜爱去规划或许网上下载。

运用chrome浏览器翻开：chrome://extensions/ 即可跳转到增加扩展程序页面。

翻开右上角的开发者形式
点击加载已解压的扩展程序
挑选自己的chrome标签页项目目录即可

总结一下

为了让心爱的 TA 高兴，作为程序员的咱们可谓是煞费苦心呀！！

在给目标装置插件的时分，发现了一个小问题，或许是chrome版别原因，导致jquery的cdn无法直接引证，所以或许需求手动把jquery保存到项目文件中，然后在manifest.json装备js的当地把jquery的js加上即可。

码上中我现已把jquery的代码、canvas的代码、核算纪念日的代码都放进去了，能够直接复制到自己项目中哦！！！

七夕节快到了，祝福全国有情人终成眷属！

我正在参与「构思开发投稿大赛」概况请看：构思开发大赛来了！

前语

（更多…）

新建HTML和JS

在装备项中的content_scripts和chrome_url_overrides中别离界说了html文件和js文件，所以咱们需求新建这两个文件，称号对应即可。

HTML布景

没有哪个小天使能够回绝来自程序猿蛮横的满屏小心心好吗？接下来我来教咱们做一个飘满屏的爱心。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Every Day About You</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="canvas.js" ></script>
  </head>
  <body>
    <canvas id="c" style="position: absolute;z-index: -1;text-align: center;"></canvas>
  </body>
</html>

这儿引入的 jquery 是百度的CDN（matches中装备了能够运用一切的URL，所以CDN是能够运用外部链接的。）
canvas.js中主要是针对爱心和布景色进行绘画。

canvas

$(document).ready(function () {
  var canvas = document.getElementById("c");
  var ctx = canvas.getContext("2d");
  var c = $("#c");
  var w, h;
  var pi = Math.PI;
  var all_attribute = {
    num: 100, // 个数
    start_probability: 0.1, // 假如数量小于num，有这些几率增加一个新的     		     
    size_min: 1, // 初始爱心巨细的最小值
    size_max: 2, // 初始爱心巨细的最大值
    size_add_min: 0.3, // 每次变大的最小值（便是速度）
    size_add_max: 0.5, // 每次变大的最大值
    opacity_min: 0.3, // 初始透明度最小值
    opacity_max: 0.5, // 初始透明度最大值
    opacity_prev_min: .003, // 透明度递减值最小值
    opacity_prev_max: .005, // 透明度递减值最大值
    light_min: 0, // 色彩亮度最小值
    light_max: 90, // 色彩亮度最大值
  };
  var style_color = find_random(0, 360);
  var all_element = [];
  window_resize();
  function start() {
    window.requestAnimationFrame(start);
    style_color += 0.1;
    //更改布景色hsl(色彩值，饱和度，明度)
    ctx.fillStyle = 'hsl(' + style_color + ',100%,97%)';
    ctx.fillRect(0, 0, w, h);
    if (all_element.length < all_attribute.num && Math.random() < all_attribute.start_probability) {
      all_element.push(new ready_run);
    }
    all_element.map(function (line) {
      line.to_step();
    })
  }
  function ready_run() {
    this.to_reset();
  }
  function arc_heart(x, y, z, m) {
    //制作爱心图画的办法，参数x,y是爱心的初始坐标，z是爱心的巨细，m是爱心上升的速度
    y -= m * 10;
    ctx.moveTo(x, y);
    z *= 0.05;
    ctx.bezierCurveTo(x, y - 3 * z, x - 5 * z, y - 15 * z, x - 25 * z, y - 15 * z);
    ctx.bezierCurveTo(x - 55 * z, y - 15 * z, x - 55 * z, y + 22.5 * z, x - 55 * z, y + 22.5 * z);
    ctx.bezierCurveTo(x - 55 * z, y + 40 * z, x - 35 * z, y + 62 * z, x, y + 80 * z);
    ctx.bezierCurveTo(x + 35 * z, y + 62 * z, x + 55 * z, y + 40 * z, x + 55 * z, y + 22.5 * z);
    ctx.bezierCurveTo(x + 55 * z, y + 22.5 * z, x + 55 * z, y - 15 * z, x + 25 * z, y - 15 * z);
    ctx.bezierCurveTo(x + 10 * z, y - 15 * z, x, y - 3 * z, x, y);
  }
  ready_run.prototype = {
    to_reset: function () {
      var t = this;
      t.x = find_random(0, w);
      t.y = find_random(0, h);
      t.size = find_random(all_attribute.size_min, all_attribute.size_max);
      t.size_change = find_random(all_attribute.size_add_min, all_attribute.size_add_max);
      t.opacity = find_random(all_attribute.opacity_min, all_attribute.opacity_max);
      t.opacity_change = find_random(all_attribute.opacity_prev_min, all_attribute.opacity_prev_max);
      t.light = find_random(all_attribute.light_min, all_attribute.light_max);
      t.color = 'hsl(' + style_color + ',100%,' + t.light + '%)';
    },
    to_step: function () {
      var t = this;
      t.opacity -= t.opacity_change;
      t.size += t.size_change;
      if (t.opacity <= 0) {
        t.to_reset();
        return false;
      }
      ctx.fillStyle = t.color;
      ctx.globalAlpha = t.opacity;
      ctx.beginPath();
      arc_heart(t.x, t.y, t.size, t.size);
      ctx.closePath();
      ctx.fill();
      ctx.globalAlpha = 1;
    }
  }
  function window_resize() {
    w = window.innerWidth;
    h = window.innerHeight;
    canvas.width = w;
    canvas.height = h;
  }
  $(window).resize(function () {
    window_resize();
  });
  //回来一个介于参数1和参数2之间的随机数
  function find_random(num_one, num_two) {
    return Math.random() * (num_two - num_one) + num_one;
  }
  start();
});

因为运用了jquery的CDN，所以咱们在js中就能够直接运用 $(document).ready办法

土豪金色的标题

为了时间展现出对 TA 的爱，咱们除了在布景中体现出来之外，还能够再文字中体现出来，所以需求取一个充溢爱意的标题。

<body>
  <canvas id="c" style="position: absolute;z-index: -1;text-align: center;"></canvas> 
  <div class="middle">
    <h1 class="label">Every Day About You</h1>
  </div>
</body>

<style>
  @import url("https://fonts.googleapis.com/css?family=Aleo");
  :root {
    font-family: "Aleo", sans-serif;
  }
  html,
  body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
  }
  .middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    user-select: none;
  }
  .label {
    font-size: 2.2rem;
    background: url("text_bg.png");
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: moveBg 30s linear infinite;
  }
  @keyframes moveBg {
    0% {
      background-position: 0% 30%;
    }
    100% {
      background-position: 1000% 500%;
    }
  }
</style>

这儿引入了googleapis中的字体款式。
给label一个布景，并运用了动画作用。

这个便是文字后边的静态图片，能够另存为然后运用的哦~

百度搜索框

关于你心爱的 TA 来说，不论干什么估量都得用百度直接搜出来，就算是看个优酷、微博都不会记住域名，都会直接去百度一下，所以咱们需求在标签页中直接集成百度搜索。让 TA 能够高枕无忧的搜索想要的东西。

因为现在百度搜索框不能直接去站长东西中获取了，所以咱们能够参阅标签页插件中的百度搜索框。

依据的标签页插件咱们能够发现，输入成果之后，直接跳转到百度的网址，并在url后边携带了一个 wd 的参数，wd 也便是咱们输入的内容了。

www.baidu.com/s?wd=这儿是输入的…

<div class="search">
  <input id="input" type="text">
  <button>百度一下</button>
</div>

<script>
  var input = document.getElementById("input")
  var btn = document.querySelector('button')
  btn.addEventListener('click', function () {
    location.href = 'http://www.baidu.com/s?wd=' + input.value
  })
</script>

.search {
  width: 750px;
  height: 50px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-content: center;
  min-width: 750px;
  position: relative;
}
input {
  width: 550px;
  height: 40px;
  border-right: none;
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;
  border-color: #f5f5f5;
  /* 去除搜索框激活状况的边框 */
  outline: none;
}
input:hover {
  /* 鼠标移入状况 */
  box-shadow: 2px 2px 2px #ccc;
}
input:focus {
  /* 选中状况,边框色彩改变 */
  border-color: rgb(78, 110, 242);
}
.search span {
  position: absolute;
  font-size: 23px;
  top: 10px;
  right: 170px;
}
.search span:hover {
  color: rgb(78, 110, 242);
}
button {
  width: 100px;
  height: 44px;
  background-color: rgb(78, 110, 242);
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  border-color: rgb(78, 110, 242);
  color: white;
  font-size: 14px;
}

关于 TA

这儿能够放置你们之间的一些生日，纪念日等等，也能够放置你想放置的任何浪漫，典礼感满满~

假如你不记得两个人之间的纪念日，那就换其他的日子吧。比方你和 TA 闺蜜的纪念日也能够。

<body>
  <canvas id="c" style="position: absolute;z-index: -1;text-align: center;"></canvas> 
  <div class="middle">
    <h1 class="label">Every Day About You</h1>
    <div class="time">
      <span>
        <div id="d">
          00
        </div>
        Love day
      </span> <span>
        <div id="h">
          00
        </div>
        First Met
      </span> <span>
        <div id="m">
          00
        </div>
        birthday
      </span> <span>
        <div id="s">
          00
        </div>
        age
      </span>
    </div>
  </div>
  <script type="text/javascript" src="demo.js"></script>
</body>

这儿我界说了四个日期，爱情纪念日、相识纪念日、TA 的生日、TA 的年纪。
在页面最终引证了一个js文件，主要是等候页面烘托完结之后调用js去核算日期的逻辑。

爱情纪念日

var date1 = new Date('2019-10-07')
var date2 = new Date()
var s1 = date1.getTime(),
  s2 = date2.getTime();
var total = (s2 - s1) / 1000;
var day = parseInt(total / (24 * 60 * 60)); //核算整数天数
const d = document.getElementById("d");
d.innerHTML = getTrueNumber(day);

相识纪念日

var date1 = new Date('2019-09-20')
var date2 = new Date()
var s1 = date1.getTime(),
  s2 = date2.getTime();
var total = (s2 - s1) / 1000;
var day = parseInt(total / (24 * 60 * 60)); //核算整数天数
h.innerHTML = getTrueNumber(day);

公共办法(将核算出来的日子转为绝对值)

const getTrueNumber = x => (x < 0 ? Math.abs(x) : x);

因为生日和年纪的核算代码有些多，所以放在码上中展现了。

增加到chrome浏览器中

开发完结之后，一切的文件便是这样的了，里边的icon能够依据自己的喜爱去规划或许网上下载。

运用chrome浏览器翻开：chrome://extensions/ 即可跳转到增加扩展程序页面。

翻开右上角的开发者形式
点击加载已解压的扩展程序
挑选自己的chrome标签页项目目录即可

总结一下

为了让心爱的 TA 高兴，作为程序员的咱们可谓是煞费苦心呀！！

在给目标装置插件的时分，发现了一个小问题，或许是chrome版别原因，导致jquery的cdn无法直接引证，所以或许需求手动把jquery保存到项目文件中，然后在manifest.json装备js的当地把jquery的js加上即可。

码上中我现已把jquery的代码、canvas的代码、核算纪念日的代码都放进去了，能够直接复制到自己项目中哦！！！

七夕节快到了，祝福全国有情人终成眷属！

我正在参与「构思开发投稿大赛」概况请看：构思开发大赛来了！

前语

（更多…）

新建HTML和JS

在装备项中的content_scripts和chrome_url_overrides中别离界说了html文件和js文件，所以咱们需求新建这两个文件，称号对应即可。

HTML布景

没有哪个小天使能够回绝来自程序猿蛮横的满屏小心心好吗？接下来我来教咱们做一个飘满屏的爱心。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Every Day About You</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="canvas.js" ></script>
  </head>
  <body>
    <canvas id="c" style="position: absolute;z-index: -1;text-align: center;"></canvas>
  </body>
</html>

这儿引入的 jquery 是百度的CDN（matches中装备了能够运用一切的URL，所以CDN是能够运用外部链接的。）
canvas.js中主要是针对爱心和布景色进行绘画。

canvas

$(document).ready(function () {
  var canvas = document.getElementById("c");
  var ctx = canvas.getContext("2d");
  var c = $("#c");
  var w, h;
  var pi = Math.PI;
  var all_attribute = {
    num: 100, // 个数
    start_probability: 0.1, // 假如数量小于num，有这些几率增加一个新的     		     
    size_min: 1, // 初始爱心巨细的最小值
    size_max: 2, // 初始爱心巨细的最大值
    size_add_min: 0.3, // 每次变大的最小值（便是速度）
    size_add_max: 0.5, // 每次变大的最大值
    opacity_min: 0.3, // 初始透明度最小值
    opacity_max: 0.5, // 初始透明度最大值
    opacity_prev_min: .003, // 透明度递减值最小值
    opacity_prev_max: .005, // 透明度递减值最大值
    light_min: 0, // 色彩亮度最小值
    light_max: 90, // 色彩亮度最大值
  };
  var style_color = find_random(0, 360);
  var all_element = [];
  window_resize();
  function start() {
    window.requestAnimationFrame(start);
    style_color += 0.1;
    //更改布景色hsl(色彩值，饱和度，明度)
    ctx.fillStyle = 'hsl(' + style_color + ',100%,97%)';
    ctx.fillRect(0, 0, w, h);
    if (all_element.length < all_attribute.num && Math.random() < all_attribute.start_probability) {
      all_element.push(new ready_run);
    }
    all_element.map(function (line) {
      line.to_step();
    })
  }
  function ready_run() {
    this.to_reset();
  }
  function arc_heart(x, y, z, m) {
    //制作爱心图画的办法，参数x,y是爱心的初始坐标，z是爱心的巨细，m是爱心上升的速度
    y -= m * 10;
    ctx.moveTo(x, y);
    z *= 0.05;
    ctx.bezierCurveTo(x, y - 3 * z, x - 5 * z, y - 15 * z, x - 25 * z, y - 15 * z);
    ctx.bezierCurveTo(x - 55 * z, y - 15 * z, x - 55 * z, y + 22.5 * z, x - 55 * z, y + 22.5 * z);
    ctx.bezierCurveTo(x - 55 * z, y + 40 * z, x - 35 * z, y + 62 * z, x, y + 80 * z);
    ctx.bezierCurveTo(x + 35 * z, y + 62 * z, x + 55 * z, y + 40 * z, x + 55 * z, y + 22.5 * z);
    ctx.bezierCurveTo(x + 55 * z, y + 22.5 * z, x + 55 * z, y - 15 * z, x + 25 * z, y - 15 * z);
    ctx.bezierCurveTo(x + 10 * z, y - 15 * z, x, y - 3 * z, x, y);
  }
  ready_run.prototype = {
    to_reset: function () {
      var t = this;
      t.x = find_random(0, w);
      t.y = find_random(0, h);
      t.size = find_random(all_attribute.size_min, all_attribute.size_max);
      t.size_change = find_random(all_attribute.size_add_min, all_attribute.size_add_max);
      t.opacity = find_random(all_attribute.opacity_min, all_attribute.opacity_max);
      t.opacity_change = find_random(all_attribute.opacity_prev_min, all_attribute.opacity_prev_max);
      t.light = find_random(all_attribute.light_min, all_attribute.light_max);
      t.color = 'hsl(' + style_color + ',100%,' + t.light + '%)';
    },
    to_step: function () {
      var t = this;
      t.opacity -= t.opacity_change;
      t.size += t.size_change;
      if (t.opacity <= 0) {
        t.to_reset();
        return false;
      }
      ctx.fillStyle = t.color;
      ctx.globalAlpha = t.opacity;
      ctx.beginPath();
      arc_heart(t.x, t.y, t.size, t.size);
      ctx.closePath();
      ctx.fill();
      ctx.globalAlpha = 1;
    }
  }
  function window_resize() {
    w = window.innerWidth;
    h = window.innerHeight;
    canvas.width = w;
    canvas.height = h;
  }
  $(window).resize(function () {
    window_resize();
  });
  //回来一个介于参数1和参数2之间的随机数
  function find_random(num_one, num_two) {
    return Math.random() * (num_two - num_one) + num_one;
  }
  start();
});

因为运用了jquery的CDN，所以咱们在js中就能够直接运用 $(document).ready办法

土豪金色的标题

为了时间展现出对 TA 的爱，咱们除了在布景中体现出来之外，还能够再文字中体现出来，所以需求取一个充溢爱意的标题。

<body>
  <canvas id="c" style="position: absolute;z-index: -1;text-align: center;"></canvas> 
  <div class="middle">
    <h1 class="label">Every Day About You</h1>
  </div>
</body>

<style>
  @import url("https://fonts.googleapis.com/css?family=Aleo");
  :root {
    font-family: "Aleo", sans-serif;
  }
  html,
  body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
  }
  .middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    user-select: none;
  }
  .label {
    font-size: 2.2rem;
    background: url("text_bg.png");
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: moveBg 30s linear infinite;
  }
  @keyframes moveBg {
    0% {
      background-position: 0% 30%;
    }
    100% {
      background-position: 1000% 500%;
    }
  }
</style>

这儿引入了googleapis中的字体款式。
给label一个布景，并运用了动画作用。

这个便是文字后边的静态图片，能够另存为然后运用的哦~

百度搜索框

关于你心爱的 TA 来说，不论干什么估量都得用百度直接搜出来，就算是看个优酷、微博都不会记住域名，都会直接去百度一下，所以咱们需求在标签页中直接集成百度搜索。让 TA 能够高枕无忧的搜索想要的东西。

因为现在百度搜索框不能直接去站长东西中获取了，所以咱们能够参阅标签页插件中的百度搜索框。

依据的标签页插件咱们能够发现，输入成果之后，直接跳转到百度的网址，并在url后边携带了一个 wd 的参数，wd 也便是咱们输入的内容了。

www.baidu.com/s?wd=这儿是输入的…

<div class="search">
  <input id="input" type="text">
  <button>百度一下</button>
</div>

<script>
  var input = document.getElementById("input")
  var btn = document.querySelector('button')
  btn.addEventListener('click', function () {
    location.href = 'http://www.baidu.com/s?wd=' + input.value
  })
</script>

.search {
  width: 750px;
  height: 50px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-content: center;
  min-width: 750px;
  position: relative;
}
input {
  width: 550px;
  height: 40px;
  border-right: none;
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;
  border-color: #f5f5f5;
  /* 去除搜索框激活状况的边框 */
  outline: none;
}
input:hover {
  /* 鼠标移入状况 */
  box-shadow: 2px 2px 2px #ccc;
}
input:focus {
  /* 选中状况,边框色彩改变 */
  border-color: rgb(78, 110, 242);
}
.search span {
  position: absolute;
  font-size: 23px;
  top: 10px;
  right: 170px;
}
.search span:hover {
  color: rgb(78, 110, 242);
}
button {
  width: 100px;
  height: 44px;
  background-color: rgb(78, 110, 242);
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  border-color: rgb(78, 110, 242);
  color: white;
  font-size: 14px;
}

关于 TA

这儿能够放置你们之间的一些生日，纪念日等等，也能够放置你想放置的任何浪漫，典礼感满满~

假如你不记得两个人之间的纪念日，那就换其他的日子吧。比方你和 TA 闺蜜的纪念日也能够。

<body>
  <canvas id="c" style="position: absolute;z-index: -1;text-align: center;"></canvas> 
  <div class="middle">
    <h1 class="label">Every Day About You</h1>
    <div class="time">
      <span>
        <div id="d">
          00
        </div>
        Love day
      </span> <span>
        <div id="h">
          00
        </div>
        First Met
      </span> <span>
        <div id="m">
          00
        </div>
        birthday
      </span> <span>
        <div id="s">
          00
        </div>
        age
      </span>
    </div>
  </div>
  <script type="text/javascript" src="demo.js"></script>
</body>

这儿我界说了四个日期，爱情纪念日、相识纪念日、TA 的生日、TA 的年纪。
在页面最终引证了一个js文件，主要是等候页面烘托完结之后调用js去核算日期的逻辑。

爱情纪念日

var date1 = new Date('2019-10-07')
var date2 = new Date()
var s1 = date1.getTime(),
  s2 = date2.getTime();
var total = (s2 - s1) / 1000;
var day = parseInt(total / (24 * 60 * 60)); //核算整数天数
const d = document.getElementById("d");
d.innerHTML = getTrueNumber(day);

相识纪念日

var date1 = new Date('2019-09-20')
var date2 = new Date()
var s1 = date1.getTime(),
  s2 = date2.getTime();
var total = (s2 - s1) / 1000;
var day = parseInt(total / (24 * 60 * 60)); //核算整数天数
h.innerHTML = getTrueNumber(day);

公共办法(将核算出来的日子转为绝对值)

const getTrueNumber = x => (x < 0 ? Math.abs(x) : x);

因为生日和年纪的核算代码有些多，所以放在码上中展现了。

增加到chrome浏览器中

开发完结之后，一切的文件便是这样的了，里边的icon能够依据自己的喜爱去规划或许网上下载。

运用chrome浏览器翻开：chrome://extensions/ 即可跳转到增加扩展程序页面。

翻开右上角的开发者形式
点击加载已解压的扩展程序
挑选自己的chrome标签页项目目录即可

总结一下

为了让心爱的 TA 高兴，作为程序员的咱们可谓是煞费苦心呀！！

在给目标装置插件的时分，发现了一个小问题，或许是chrome版别原因，导致jquery的cdn无法直接引证，所以或许需求手动把jquery保存到项目文件中，然后在manifest.json装备js的当地把jquery的js加上即可。

码上中我现已把jquery的代码、canvas的代码、核算纪念日的代码都放进去了，能够直接复制到自己项目中哦！！！

七夕节快到了，祝福全国有情人终成眷属！

我正在参与「构思开发投稿大赛」概况请看：构思开发大赛来了！

前语

（更多…）

新建HTML和JS

在装备项中的content_scripts和chrome_url_overrides中别离界说了html文件和js文件，所以咱们需求新建这两个文件，称号对应即可。

HTML布景

没有哪个小天使能够回绝来自程序猿蛮横的满屏小心心好吗？接下来我来教咱们做一个飘满屏的爱心。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Every Day About You</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="canvas.js" ></script>
  </head>
  <body>
    <canvas id="c" style="position: absolute;z-index: -1;text-align: center;"></canvas>
  </body>
</html>

这儿引入的 jquery 是百度的CDN（matches中装备了能够运用一切的URL，所以CDN是能够运用外部链接的。）
canvas.js中主要是针对爱心和布景色进行绘画。

canvas

$(document).ready(function () {
  var canvas = document.getElementById("c");
  var ctx = canvas.getContext("2d");
  var c = $("#c");
  var w, h;
  var pi = Math.PI;
  var all_attribute = {
    num: 100, // 个数
    start_probability: 0.1, // 假如数量小于num，有这些几率增加一个新的     		     
    size_min: 1, // 初始爱心巨细的最小值
    size_max: 2, // 初始爱心巨细的最大值
    size_add_min: 0.3, // 每次变大的最小值（便是速度）
    size_add_max: 0.5, // 每次变大的最大值
    opacity_min: 0.3, // 初始透明度最小值
    opacity_max: 0.5, // 初始透明度最大值
    opacity_prev_min: .003, // 透明度递减值最小值
    opacity_prev_max: .005, // 透明度递减值最大值
    light_min: 0, // 色彩亮度最小值
    light_max: 90, // 色彩亮度最大值
  };
  var style_color = find_random(0, 360);
  var all_element = [];
  window_resize();
  function start() {
    window.requestAnimationFrame(start);
    style_color += 0.1;
    //更改布景色hsl(色彩值，饱和度，明度)
    ctx.fillStyle = 'hsl(' + style_color + ',100%,97%)';
    ctx.fillRect(0, 0, w, h);
    if (all_element.length < all_attribute.num && Math.random() < all_attribute.start_probability) {
      all_element.push(new ready_run);
    }
    all_element.map(function (line) {
      line.to_step();
    })
  }
  function ready_run() {
    this.to_reset();
  }
  function arc_heart(x, y, z, m) {
    //制作爱心图画的办法，参数x,y是爱心的初始坐标，z是爱心的巨细，m是爱心上升的速度
    y -= m * 10;
    ctx.moveTo(x, y);
    z *= 0.05;
    ctx.bezierCurveTo(x, y - 3 * z, x - 5 * z, y - 15 * z, x - 25 * z, y - 15 * z);
    ctx.bezierCurveTo(x - 55 * z, y - 15 * z, x - 55 * z, y + 22.5 * z, x - 55 * z, y + 22.5 * z);
    ctx.bezierCurveTo(x - 55 * z, y + 40 * z, x - 35 * z, y + 62 * z, x, y + 80 * z);
    ctx.bezierCurveTo(x + 35 * z, y + 62 * z, x + 55 * z, y + 40 * z, x + 55 * z, y + 22.5 * z);
    ctx.bezierCurveTo(x + 55 * z, y + 22.5 * z, x + 55 * z, y - 15 * z, x + 25 * z, y - 15 * z);
    ctx.bezierCurveTo(x + 10 * z, y - 15 * z, x, y - 3 * z, x, y);
  }
  ready_run.prototype = {
    to_reset: function () {
      var t = this;
      t.x = find_random(0, w);
      t.y = find_random(0, h);
      t.size = find_random(all_attribute.size_min, all_attribute.size_max);
      t.size_change = find_random(all_attribute.size_add_min, all_attribute.size_add_max);
      t.opacity = find_random(all_attribute.opacity_min, all_attribute.opacity_max);
      t.opacity_change = find_random(all_attribute.opacity_prev_min, all_attribute.opacity_prev_max);
      t.light = find_random(all_attribute.light_min, all_attribute.light_max);
      t.color = 'hsl(' + style_color + ',100%,' + t.light + '%)';
    },
    to_step: function () {
      var t = this;
      t.opacity -= t.opacity_change;
      t.size += t.size_change;
      if (t.opacity <= 0) {
        t.to_reset();
        return false;
      }
      ctx.fillStyle = t.color;
      ctx.globalAlpha = t.opacity;
      ctx.beginPath();
      arc_heart(t.x, t.y, t.size, t.size);
      ctx.closePath();
      ctx.fill();
      ctx.globalAlpha = 1;
    }
  }
  function window_resize() {
    w = window.innerWidth;
    h = window.innerHeight;
    canvas.width = w;
    canvas.height = h;
  }
  $(window).resize(function () {
    window_resize();
  });
  //回来一个介于参数1和参数2之间的随机数
  function find_random(num_one, num_two) {
    return Math.random() * (num_two - num_one) + num_one;
  }
  start();
});

因为运用了jquery的CDN，所以咱们在js中就能够直接运用 $(document).ready办法

土豪金色的标题

为了时间展现出对 TA 的爱，咱们除了在布景中体现出来之外，还能够再文字中体现出来，所以需求取一个充溢爱意的标题。

<body>
  <canvas id="c" style="position: absolute;z-index: -1;text-align: center;"></canvas> 
  <div class="middle">
    <h1 class="label">Every Day About You</h1>
  </div>
</body>

<style>
  @import url("https://fonts.googleapis.com/css?family=Aleo");
  :root {
    font-family: "Aleo", sans-serif;
  }
  html,
  body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
  }
  .middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    user-select: none;
  }
  .label {
    font-size: 2.2rem;
    background: url("text_bg.png");
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: moveBg 30s linear infinite;
  }
  @keyframes moveBg {
    0% {
      background-position: 0% 30%;
    }
    100% {
      background-position: 1000% 500%;
    }
  }
</style>

这儿引入了googleapis中的字体款式。
给label一个布景，并运用了动画作用。

这个便是文字后边的静态图片，能够另存为然后运用的哦~

百度搜索框

关于你心爱的 TA 来说，不论干什么估量都得用百度直接搜出来，就算是看个优酷、微博都不会记住域名，都会直接去百度一下，所以咱们需求在标签页中直接集成百度搜索。让 TA 能够高枕无忧的搜索想要的东西。

因为现在百度搜索框不能直接去站长东西中获取了，所以咱们能够参阅标签页插件中的百度搜索框。

依据的标签页插件咱们能够发现，输入成果之后，直接跳转到百度的网址，并在url后边携带了一个 wd 的参数，wd 也便是咱们输入的内容了。

www.baidu.com/s?wd=这儿是输入的…

<div class="search">
  <input id="input" type="text">
  <button>百度一下</button>
</div>

<script>
  var input = document.getElementById("input")
  var btn = document.querySelector('button')
  btn.addEventListener('click', function () {
    location.href = 'http://www.baidu.com/s?wd=' + input.value
  })
</script>

.search {
  width: 750px;
  height: 50px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-content: center;
  min-width: 750px;
  position: relative;
}
input {
  width: 550px;
  height: 40px;
  border-right: none;
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;
  border-color: #f5f5f5;
  /* 去除搜索框激活状况的边框 */
  outline: none;
}
input:hover {
  /* 鼠标移入状况 */
  box-shadow: 2px 2px 2px #ccc;
}
input:focus {
  /* 选中状况,边框色彩改变 */
  border-color: rgb(78, 110, 242);
}
.search span {
  position: absolute;
  font-size: 23px;
  top: 10px;
  right: 170px;
}
.search span:hover {
  color: rgb(78, 110, 242);
}
button {
  width: 100px;
  height: 44px;
  background-color: rgb(78, 110, 242);
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  border-color: rgb(78, 110, 242);
  color: white;
  font-size: 14px;
}

关于 TA

这儿能够放置你们之间的一些生日，纪念日等等，也能够放置你想放置的任何浪漫，典礼感满满~

假如你不记得两个人之间的纪念日，那就换其他的日子吧。比方你和 TA 闺蜜的纪念日也能够。

<body>
  <canvas id="c" style="position: absolute;z-index: -1;text-align: center;"></canvas> 
  <div class="middle">
    <h1 class="label">Every Day About You</h1>
    <div class="time">
      <span>
        <div id="d">
          00
        </div>
        Love day
      </span> <span>
        <div id="h">
          00
        </div>
        First Met
      </span> <span>
        <div id="m">
          00
        </div>
        birthday
      </span> <span>
        <div id="s">
          00
        </div>
        age
      </span>
    </div>
  </div>
  <script type="text/javascript" src="demo.js"></script>
</body>

这儿我界说了四个日期，爱情纪念日、相识纪念日、TA 的生日、TA 的年纪。
在页面最终引证了一个js文件，主要是等候页面烘托完结之后调用js去核算日期的逻辑。

爱情纪念日

var date1 = new Date('2019-10-07')
var date2 = new Date()
var s1 = date1.getTime(),
  s2 = date2.getTime();
var total = (s2 - s1) / 1000;
var day = parseInt(total / (24 * 60 * 60)); //核算整数天数
const d = document.getElementById("d");
d.innerHTML = getTrueNumber(day);

相识纪念日

var date1 = new Date('2019-09-20')
var date2 = new Date()
var s1 = date1.getTime(),
  s2 = date2.getTime();
var total = (s2 - s1) / 1000;
var day = parseInt(total / (24 * 60 * 60)); //核算整数天数
h.innerHTML = getTrueNumber(day);

公共办法(将核算出来的日子转为绝对值)

const getTrueNumber = x => (x < 0 ? Math.abs(x) : x);

因为生日和年纪的核算代码有些多，所以放在码上中展现了。

增加到chrome浏览器中

开发完结之后，一切的文件便是这样的了，里边的icon能够依据自己的喜爱去规划或许网上下载。

运用chrome浏览器翻开：chrome://extensions/ 即可跳转到增加扩展程序页面。

翻开右上角的开发者形式
点击加载已解压的扩展程序
挑选自己的chrome标签页项目目录即可

总结一下

为了让心爱的 TA 高兴，作为程序员的咱们可谓是煞费苦心呀！！

在给目标装置插件的时分，发现了一个小问题，或许是chrome版别原因，导致jquery的cdn无法直接引证，所以或许需求手动把jquery保存到项目文件中，然后在manifest.json装备js的当地把jquery的js加上即可。

码上中我现已把jquery的代码、canvas的代码、核算纪念日的代码都放进去了，能够直接复制到自己项目中哦！！！

七夕节快到了，祝福全国有情人终成眷属！

我正在参与「构思开发投稿大赛」概况请看：构思开发大赛来了！

前语

（更多…）

新建HTML和JS

在装备项中的content_scripts和chrome_url_overrides中别离界说了html文件和js文件，所以咱们需求新建这两个文件，称号对应即可。

HTML布景

没有哪个小天使能够回绝来自程序猿蛮横的满屏小心心好吗？接下来我来教咱们做一个飘满屏的爱心。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Every Day About You</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="canvas.js" ></script>
  </head>
  <body>
    <canvas id="c" style="position: absolute;z-index: -1;text-align: center;"></canvas>
  </body>
</html>

这儿引入的 jquery 是百度的CDN（matches中装备了能够运用一切的URL，所以CDN是能够运用外部链接的。）
canvas.js中主要是针对爱心和布景色进行绘画。

canvas

$(document).ready(function () {
  var canvas = document.getElementById("c");
  var ctx = canvas.getContext("2d");
  var c = $("#c");
  var w, h;
  var pi = Math.PI;
  var all_attribute = {
    num: 100, // 个数
    start_probability: 0.1, // 假如数量小于num，有这些几率增加一个新的     		     
    size_min: 1, // 初始爱心巨细的最小值
    size_max: 2, // 初始爱心巨细的最大值
    size_add_min: 0.3, // 每次变大的最小值（便是速度）
    size_add_max: 0.5, // 每次变大的最大值
    opacity_min: 0.3, // 初始透明度最小值
    opacity_max: 0.5, // 初始透明度最大值
    opacity_prev_min: .003, // 透明度递减值最小值
    opacity_prev_max: .005, // 透明度递减值最大值
    light_min: 0, // 色彩亮度最小值
    light_max: 90, // 色彩亮度最大值
  };
  var style_color = find_random(0, 360);
  var all_element = [];
  window_resize();
  function start() {
    window.requestAnimationFrame(start);
    style_color += 0.1;
    //更改布景色hsl(色彩值，饱和度，明度)
    ctx.fillStyle = 'hsl(' + style_color + ',100%,97%)';
    ctx.fillRect(0, 0, w, h);
    if (all_element.length < all_attribute.num && Math.random() < all_attribute.start_probability) {
      all_element.push(new ready_run);
    }
    all_element.map(function (line) {
      line.to_step();
    })
  }
  function ready_run() {
    this.to_reset();
  }
  function arc_heart(x, y, z, m) {
    //制作爱心图画的办法，参数x,y是爱心的初始坐标，z是爱心的巨细，m是爱心上升的速度
    y -= m * 10;
    ctx.moveTo(x, y);
    z *= 0.05;
    ctx.bezierCurveTo(x, y - 3 * z, x - 5 * z, y - 15 * z, x - 25 * z, y - 15 * z);
    ctx.bezierCurveTo(x - 55 * z, y - 15 * z, x - 55 * z, y + 22.5 * z, x - 55 * z, y + 22.5 * z);
    ctx.bezierCurveTo(x - 55 * z, y + 40 * z, x - 35 * z, y + 62 * z, x, y + 80 * z);
    ctx.bezierCurveTo(x + 35 * z, y + 62 * z, x + 55 * z, y + 40 * z, x + 55 * z, y + 22.5 * z);
    ctx.bezierCurveTo(x + 55 * z, y + 22.5 * z, x + 55 * z, y - 15 * z, x + 25 * z, y - 15 * z);
    ctx.bezierCurveTo(x + 10 * z, y - 15 * z, x, y - 3 * z, x, y);
  }
  ready_run.prototype = {
    to_reset: function () {
      var t = this;
      t.x = find_random(0, w);
      t.y = find_random(0, h);
      t.size = find_random(all_attribute.size_min, all_attribute.size_max);
      t.size_change = find_random(all_attribute.size_add_min, all_attribute.size_add_max);
      t.opacity = find_random(all_attribute.opacity_min, all_attribute.opacity_max);
      t.opacity_change = find_random(all_attribute.opacity_prev_min, all_attribute.opacity_prev_max);
      t.light = find_random(all_attribute.light_min, all_attribute.light_max);
      t.color = 'hsl(' + style_color + ',100%,' + t.light + '%)';
    },
    to_step: function () {
      var t = this;
      t.opacity -= t.opacity_change;
      t.size += t.size_change;
      if (t.opacity <= 0) {
        t.to_reset();
        return false;
      }
      ctx.fillStyle = t.color;
      ctx.globalAlpha = t.opacity;
      ctx.beginPath();
      arc_heart(t.x, t.y, t.size, t.size);
      ctx.closePath();
      ctx.fill();
      ctx.globalAlpha = 1;
    }
  }
  function window_resize() {
    w = window.innerWidth;
    h = window.innerHeight;
    canvas.width = w;
    canvas.height = h;
  }
  $(window).resize(function () {
    window_resize();
  });
  //回来一个介于参数1和参数2之间的随机数
  function find_random(num_one, num_two) {
    return Math.random() * (num_two - num_one) + num_one;
  }
  start();
});

因为运用了jquery的CDN，所以咱们在js中就能够直接运用 $(document).ready办法

土豪金色的标题

为了时间展现出对 TA 的爱，咱们除了在布景中体现出来之外，还能够再文字中体现出来，所以需求取一个充溢爱意的标题。

<body>
  <canvas id="c" style="position: absolute;z-index: -1;text-align: center;"></canvas> 
  <div class="middle">
    <h1 class="label">Every Day About You</h1>
  </div>
</body>

<style>
  @import url("https://fonts.googleapis.com/css?family=Aleo");
  :root {
    font-family: "Aleo", sans-serif;
  }
  html,
  body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
  }
  .middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    user-select: none;
  }
  .label {
    font-size: 2.2rem;
    background: url("text_bg.png");
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: moveBg 30s linear infinite;
  }
  @keyframes moveBg {
    0% {
      background-position: 0% 30%;
    }
    100% {
      background-position: 1000% 500%;
    }
  }
</style>

这儿引入了googleapis中的字体款式。
给label一个布景，并运用了动画作用。

这个便是文字后边的静态图片，能够另存为然后运用的哦~

百度搜索框

关于你心爱的 TA 来说，不论干什么估量都得用百度直接搜出来，就算是看个优酷、微博都不会记住域名，都会直接去百度一下，所以咱们需求在标签页中直接集成百度搜索。让 TA 能够高枕无忧的搜索想要的东西。

因为现在百度搜索框不能直接去站长东西中获取了，所以咱们能够参阅标签页插件中的百度搜索框。

依据的标签页插件咱们能够发现，输入成果之后，直接跳转到百度的网址，并在url后边携带了一个 wd 的参数，wd 也便是咱们输入的内容了。

www.baidu.com/s?wd=这儿是输入的…

<div class="search">
  <input id="input" type="text">
  <button>百度一下</button>
</div>

<script>
  var input = document.getElementById("input")
  var btn = document.querySelector('button')
  btn.addEventListener('click', function () {
    location.href = 'http://www.baidu.com/s?wd=' + input.value
  })
</script>

.search {
  width: 750px;
  height: 50px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-content: center;
  min-width: 750px;
  position: relative;
}
input {
  width: 550px;
  height: 40px;
  border-right: none;
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;
  border-color: #f5f5f5;
  /* 去除搜索框激活状况的边框 */
  outline: none;
}
input:hover {
  /* 鼠标移入状况 */
  box-shadow: 2px 2px 2px #ccc;
}
input:focus {
  /* 选中状况,边框色彩改变 */
  border-color: rgb(78, 110, 242);
}
.search span {
  position: absolute;
  font-size: 23px;
  top: 10px;
  right: 170px;
}
.search span:hover {
  color: rgb(78, 110, 242);
}
button {
  width: 100px;
  height: 44px;
  background-color: rgb(78, 110, 242);
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  border-color: rgb(78, 110, 242);
  color: white;
  font-size: 14px;
}

关于 TA

这儿能够放置你们之间的一些生日，纪念日等等，也能够放置你想放置的任何浪漫，典礼感满满~

假如你不记得两个人之间的纪念日，那就换其他的日子吧。比方你和 TA 闺蜜的纪念日也能够。

<body>
  <canvas id="c" style="position: absolute;z-index: -1;text-align: center;"></canvas> 
  <div class="middle">
    <h1 class="label">Every Day About You</h1>
    <div class="time">
      <span>
        <div id="d">
          00
        </div>
        Love day
      </span> <span>
        <div id="h">
          00
        </div>
        First Met
      </span> <span>
        <div id="m">
          00
        </div>
        birthday
      </span> <span>
        <div id="s">
          00
        </div>
        age
      </span>
    </div>
  </div>
  <script type="text/javascript" src="demo.js"></script>
</body>

这儿我界说了四个日期，爱情纪念日、相识纪念日、TA 的生日、TA 的年纪。
在页面最终引证了一个js文件，主要是等候页面烘托完结之后调用js去核算日期的逻辑。

爱情纪念日

var date1 = new Date('2019-10-07')
var date2 = new Date()
var s1 = date1.getTime(),
  s2 = date2.getTime();
var total = (s2 - s1) / 1000;
var day = parseInt(total / (24 * 60 * 60)); //核算整数天数
const d = document.getElementById("d");
d.innerHTML = getTrueNumber(day);

相识纪念日

var date1 = new Date('2019-09-20')
var date2 = new Date()
var s1 = date1.getTime(),
  s2 = date2.getTime();
var total = (s2 - s1) / 1000;
var day = parseInt(total / (24 * 60 * 60)); //核算整数天数
h.innerHTML = getTrueNumber(day);

公共办法(将核算出来的日子转为绝对值)

const getTrueNumber = x => (x < 0 ? Math.abs(x) : x);

因为生日和年纪的核算代码有些多，所以放在码上中展现了。

增加到chrome浏览器中

开发完结之后，一切的文件便是这样的了，里边的icon能够依据自己的喜爱去规划或许网上下载。

运用chrome浏览器翻开：chrome://extensions/ 即可跳转到增加扩展程序页面。

翻开右上角的开发者形式
点击加载已解压的扩展程序
挑选自己的chrome标签页项目目录即可

总结一下

为了让心爱的 TA 高兴，作为程序员的咱们可谓是煞费苦心呀！！

在给目标装置插件的时分，发现了一个小问题，或许是chrome版别原因，导致jquery的cdn无法直接引证，所以或许需求手动把jquery保存到项目文件中，然后在manifest.json装备js的当地把jquery的js加上即可。

码上中我现已把jquery的代码、canvas的代码、核算纪念日的代码都放进去了，能够直接复制到自己项目中哦！！！

七夕节快到了，祝福全国有情人终成眷属！

我正在参与「构思开发投稿大赛」概况请看：构思开发大赛来了！

前语

（更多…）

HTML布景

没有哪个小天使能够回绝来自程序猿蛮横的满屏小心心好吗？接下来我来教咱们做一个飘满屏的爱心。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Every Day About You</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="canvas.js" ></script>
  </head>
  <body>
    <canvas id="c" style="position: absolute;z-index: -1;text-align: center;"></canvas>
  </body>
</html>

这儿引入的 jquery 是百度的CDN（matches中装备了能够运用一切的URL，所以CDN是能够运用外部链接的。）
canvas.js中主要是针对爱心和布景色进行绘画。

canvas

$(document).ready(function () {
  var canvas = document.getElementById("c");
  var ctx = canvas.getContext("2d");
  var c = $("#c");
  var w, h;
  var pi = Math.PI;
  var all_attribute = {
    num: 100, // 个数
    start_probability: 0.1, // 假如数量小于num，有这些几率增加一个新的     		     
    size_min: 1, // 初始爱心巨细的最小值
    size_max: 2, // 初始爱心巨细的最大值
    size_add_min: 0.3, // 每次变大的最小值（便是速度）
    size_add_max: 0.5, // 每次变大的最大值
    opacity_min: 0.3, // 初始透明度最小值
    opacity_max: 0.5, // 初始透明度最大值
    opacity_prev_min: .003, // 透明度递减值最小值
    opacity_prev_max: .005, // 透明度递减值最大值
    light_min: 0, // 色彩亮度最小值
    light_max: 90, // 色彩亮度最大值
  };
  var style_color = find_random(0, 360);
  var all_element = [];
  window_resize();
  function start() {
    window.requestAnimationFrame(start);
    style_color += 0.1;
    //更改布景色hsl(色彩值，饱和度，明度)
    ctx.fillStyle = 'hsl(' + style_color + ',100%,97%)';
    ctx.fillRect(0, 0, w, h);
    if (all_element.length < all_attribute.num && Math.random() < all_attribute.start_probability) {
      all_element.push(new ready_run);
    }
    all_element.map(function (line) {
      line.to_step();
    })
  }
  function ready_run() {
    this.to_reset();
  }
  function arc_heart(x, y, z, m) {
    //制作爱心图画的办法，参数x,y是爱心的初始坐标，z是爱心的巨细，m是爱心上升的速度
    y -= m * 10;
    ctx.moveTo(x, y);
    z *= 0.05;
    ctx.bezierCurveTo(x, y - 3 * z, x - 5 * z, y - 15 * z, x - 25 * z, y - 15 * z);
    ctx.bezierCurveTo(x - 55 * z, y - 15 * z, x - 55 * z, y + 22.5 * z, x - 55 * z, y + 22.5 * z);
    ctx.bezierCurveTo(x - 55 * z, y + 40 * z, x - 35 * z, y + 62 * z, x, y + 80 * z);
    ctx.bezierCurveTo(x + 35 * z, y + 62 * z, x + 55 * z, y + 40 * z, x + 55 * z, y + 22.5 * z);
    ctx.bezierCurveTo(x + 55 * z, y + 22.5 * z, x + 55 * z, y - 15 * z, x + 25 * z, y - 15 * z);
    ctx.bezierCurveTo(x + 10 * z, y - 15 * z, x, y - 3 * z, x, y);
  }
  ready_run.prototype = {
    to_reset: function () {
      var t = this;
      t.x = find_random(0, w);
      t.y = find_random(0, h);
      t.size = find_random(all_attribute.size_min, all_attribute.size_max);
      t.size_change = find_random(all_attribute.size_add_min, all_attribute.size_add_max);
      t.opacity = find_random(all_attribute.opacity_min, all_attribute.opacity_max);
      t.opacity_change = find_random(all_attribute.opacity_prev_min, all_attribute.opacity_prev_max);
      t.light = find_random(all_attribute.light_min, all_attribute.light_max);
      t.color = 'hsl(' + style_color + ',100%,' + t.light + '%)';
    },
    to_step: function () {
      var t = this;
      t.opacity -= t.opacity_change;
      t.size += t.size_change;
      if (t.opacity <= 0) {
        t.to_reset();
        return false;
      }
      ctx.fillStyle = t.color;
      ctx.globalAlpha = t.opacity;
      ctx.beginPath();
      arc_heart(t.x, t.y, t.size, t.size);
      ctx.closePath();
      ctx.fill();
      ctx.globalAlpha = 1;
    }
  }
  function window_resize() {
    w = window.innerWidth;
    h = window.innerHeight;
    canvas.width = w;
    canvas.height = h;
  }
  $(window).resize(function () {
    window_resize();
  });
  //回来一个介于参数1和参数2之间的随机数
  function find_random(num_one, num_two) {
    return Math.random() * (num_two - num_one) + num_one;
  }
  start();
});

因为运用了jquery的CDN，所以咱们在js中就能够直接运用 $(document).ready办法

土豪金色的标题

为了时间展现出对 TA 的爱，咱们除了在布景中体现出来之外，还能够再文字中体现出来，所以需求取一个充溢爱意的标题。

<body>
  <canvas id="c" style="position: absolute;z-index: -1;text-align: center;"></canvas> 
  <div class="middle">
    <h1 class="label">Every Day About You</h1>
  </div>
</body>

<style>
  @import url("https://fonts.googleapis.com/css?family=Aleo");
  :root {
    font-family: "Aleo", sans-serif;
  }
  html,
  body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
  }
  .middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    user-select: none;
  }
  .label {
    font-size: 2.2rem;
    background: url("text_bg.png");
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: moveBg 30s linear infinite;
  }
  @keyframes moveBg {
    0% {
      background-position: 0% 30%;
    }
    100% {
      background-position: 1000% 500%;
    }
  }
</style>

这儿引入了googleapis中的字体款式。
给label一个布景，并运用了动画作用。

这个便是文字后边的静态图片，能够另存为然后运用的哦~

百度搜索框

关于你心爱的 TA 来说，不论干什么估量都得用百度直接搜出来，就算是看个优酷、微博都不会记住域名，都会直接去百度一下，所以咱们需求在标签页中直接集成百度搜索。让 TA 能够高枕无忧的搜索想要的东西。

因为现在百度搜索框不能直接去站长东西中获取了，所以咱们能够参阅标签页插件中的百度搜索框。

依据的标签页插件咱们能够发现，输入成果之后，直接跳转到百度的网址，并在url后边携带了一个 wd 的参数，wd 也便是咱们输入的内容了。

www.baidu.com/s?wd=这儿是输入的…

<div class="search">
  <input id="input" type="text">
  <button>百度一下</button>
</div>

<script>
  var input = document.getElementById("input")
  var btn = document.querySelector('button')
  btn.addEventListener('click', function () {
    location.href = 'http://www.baidu.com/s?wd=' + input.value
  })
</script>

.search {
  width: 750px;
  height: 50px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-content: center;
  min-width: 750px;
  position: relative;
}
input {
  width: 550px;
  height: 40px;
  border-right: none;
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;
  border-color: #f5f5f5;
  /* 去除搜索框激活状况的边框 */
  outline: none;
}
input:hover {
  /* 鼠标移入状况 */
  box-shadow: 2px 2px 2px #ccc;
}
input:focus {
  /* 选中状况,边框色彩改变 */
  border-color: rgb(78, 110, 242);
}
.search span {
  position: absolute;
  font-size: 23px;
  top: 10px;
  right: 170px;
}
.search span:hover {
  color: rgb(78, 110, 242);
}
button {
  width: 100px;
  height: 44px;
  background-color: rgb(78, 110, 242);
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  border-color: rgb(78, 110, 242);
  color: white;
  font-size: 14px;
}

关于 TA

这儿能够放置你们之间的一些生日，纪念日等等，也能够放置你想放置的任何浪漫，典礼感满满~

假如你不记得两个人之间的纪念日，那就换其他的日子吧。比方你和 TA 闺蜜的纪念日也能够。

<body>
  <canvas id="c" style="position: absolute;z-index: -1;text-align: center;"></canvas> 
  <div class="middle">
    <h1 class="label">Every Day About You</h1>
    <div class="time">
      <span>
        <div id="d">
          00
        </div>
        Love day
      </span> <span>
        <div id="h">
          00
        </div>
        First Met
      </span> <span>
        <div id="m">
          00
        </div>
        birthday
      </span> <span>
        <div id="s">
          00
        </div>
        age
      </span>
    </div>
  </div>
  <script type="text/javascript" src="demo.js"></script>
</body>

这儿我界说了四个日期，爱情纪念日、相识纪念日、TA 的生日、TA 的年纪。
在页面最终引证了一个js文件，主要是等候页面烘托完结之后调用js去核算日期的逻辑。

爱情纪念日

var date1 = new Date('2019-10-07')
var date2 = new Date()
var s1 = date1.getTime(),
  s2 = date2.getTime();
var total = (s2 - s1) / 1000;
var day = parseInt(total / (24 * 60 * 60)); //核算整数天数
const d = document.getElementById("d");
d.innerHTML = getTrueNumber(day);

相识纪念日

var date1 = new Date('2019-09-20')
var date2 = new Date()
var s1 = date1.getTime(),
  s2 = date2.getTime();
var total = (s2 - s1) / 1000;
var day = parseInt(total / (24 * 60 * 60)); //核算整数天数
h.innerHTML = getTrueNumber(day);

公共办法(将核算出来的日子转为绝对值)

const getTrueNumber = x => (x < 0 ? Math.abs(x) : x);

因为生日和年纪的核算代码有些多，所以放在码上中展现了。

增加到chrome浏览器中

开发完结之后，一切的文件便是这样的了，里边的icon能够依据自己的喜爱去规划或许网上下载。

运用chrome浏览器翻开：chrome://extensions/ 即可跳转到增加扩展程序页面。

翻开右上角的开发者形式
点击加载已解压的扩展程序
挑选自己的chrome标签页项目目录即可

总结一下

为了让心爱的 TA 高兴，作为程序员的咱们可谓是煞费苦心呀！！

在给目标装置插件的时分，发现了一个小问题，或许是chrome版别原因，导致jquery的cdn无法直接引证，所以或许需求手动把jquery保存到项目文件中，然后在manifest.json装备js的当地把jquery的js加上即可。

码上中我现已把jquery的代码、canvas的代码、核算纪念日的代码都放进去了，能够直接复制到自己项目中哦！！！

七夕节快到了，祝福全国有情人终成眷属！

我正在参与「构思开发投稿大赛」概况请看：构思开发大赛来了！

HTML布景

没有哪个小天使能够回绝来自程序猿蛮横的满屏小心心好吗？接下来我来教咱们做一个飘满屏的爱心。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Every Day About You</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="canvas.js" ></script>
  </head>
  <body>
    <canvas id="c" style="position: absolute;z-index: -1;text-align: center;"></canvas>
  </body>
</html>

这儿引入的 jquery 是百度的CDN（matches中装备了能够运用一切的URL，所以CDN是能够运用外部链接的。）
canvas.js中主要是针对爱心和布景色进行绘画。

canvas

$(document).ready(function () {
  var canvas = document.getElementById("c");
  var ctx = canvas.getContext("2d");
  var c = $("#c");
  var w, h;
  var pi = Math.PI;
  var all_attribute = {
    num: 100, // 个数
    start_probability: 0.1, // 假如数量小于num，有这些几率增加一个新的     		     
    size_min: 1, // 初始爱心巨细的最小值
    size_max: 2, // 初始爱心巨细的最大值
    size_add_min: 0.3, // 每次变大的最小值（便是速度）
    size_add_max: 0.5, // 每次变大的最大值
    opacity_min: 0.3, // 初始透明度最小值
    opacity_max: 0.5, // 初始透明度最大值
    opacity_prev_min: .003, // 透明度递减值最小值
    opacity_prev_max: .005, // 透明度递减值最大值
    light_min: 0, // 色彩亮度最小值
    light_max: 90, // 色彩亮度最大值
  };
  var style_color = find_random(0, 360);
  var all_element = [];
  window_resize();
  function start() {
    window.requestAnimationFrame(start);
    style_color += 0.1;
    //更改布景色hsl(色彩值，饱和度，明度)
    ctx.fillStyle = 'hsl(' + style_color + ',100%,97%)';
    ctx.fillRect(0, 0, w, h);
    if (all_element.length < all_attribute.num && Math.random() < all_attribute.start_probability) {
      all_element.push(new ready_run);
    }
    all_element.map(function (line) {
      line.to_step();
    })
  }
  function ready_run() {
    this.to_reset();
  }
  function arc_heart(x, y, z, m) {
    //制作爱心图画的办法，参数x,y是爱心的初始坐标，z是爱心的巨细，m是爱心上升的速度
    y -= m * 10;
    ctx.moveTo(x, y);
    z *= 0.05;
    ctx.bezierCurveTo(x, y - 3 * z, x - 5 * z, y - 15 * z, x - 25 * z, y - 15 * z);
    ctx.bezierCurveTo(x - 55 * z, y - 15 * z, x - 55 * z, y + 22.5 * z, x - 55 * z, y + 22.5 * z);
    ctx.bezierCurveTo(x - 55 * z, y + 40 * z, x - 35 * z, y + 62 * z, x, y + 80 * z);
    ctx.bezierCurveTo(x + 35 * z, y + 62 * z, x + 55 * z, y + 40 * z, x + 55 * z, y + 22.5 * z);
    ctx.bezierCurveTo(x + 55 * z, y + 22.5 * z, x + 55 * z, y - 15 * z, x + 25 * z, y - 15 * z);
    ctx.bezierCurveTo(x + 10 * z, y - 15 * z, x, y - 3 * z, x, y);
  }
  ready_run.prototype = {
    to_reset: function () {
      var t = this;
      t.x = find_random(0, w);
      t.y = find_random(0, h);
      t.size = find_random(all_attribute.size_min, all_attribute.size_max);
      t.size_change = find_random(all_attribute.size_add_min, all_attribute.size_add_max);
      t.opacity = find_random(all_attribute.opacity_min, all_attribute.opacity_max);
      t.opacity_change = find_random(all_attribute.opacity_prev_min, all_attribute.opacity_prev_max);
      t.light = find_random(all_attribute.light_min, all_attribute.light_max);
      t.color = 'hsl(' + style_color + ',100%,' + t.light + '%)';
    },
    to_step: function () {
      var t = this;
      t.opacity -= t.opacity_change;
      t.size += t.size_change;
      if (t.opacity <= 0) {
        t.to_reset();
        return false;
      }
      ctx.fillStyle = t.color;
      ctx.globalAlpha = t.opacity;
      ctx.beginPath();
      arc_heart(t.x, t.y, t.size, t.size);
      ctx.closePath();
      ctx.fill();
      ctx.globalAlpha = 1;
    }
  }
  function window_resize() {
    w = window.innerWidth;
    h = window.innerHeight;
    canvas.width = w;
    canvas.height = h;
  }
  $(window).resize(function () {
    window_resize();
  });
  //回来一个介于参数1和参数2之间的随机数
  function find_random(num_one, num_two) {
    return Math.random() * (num_two - num_one) + num_one;
  }
  start();
});

因为运用了jquery的CDN，所以咱们在js中就能够直接运用 $(document).ready办法

土豪金色的标题

为了时间展现出对 TA 的爱，咱们除了在布景中体现出来之外，还能够再文字中体现出来，所以需求取一个充溢爱意的标题。

<body>
  <canvas id="c" style="position: absolute;z-index: -1;text-align: center;"></canvas> 
  <div class="middle">
    <h1 class="label">Every Day About You</h1>
  </div>
</body>

<style>
  @import url("https://fonts.googleapis.com/css?family=Aleo");
  :root {
    font-family: "Aleo", sans-serif;
  }
  html,
  body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
  }
  .middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    user-select: none;
  }
  .label {
    font-size: 2.2rem;
    background: url("text_bg.png");
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: moveBg 30s linear infinite;
  }
  @keyframes moveBg {
    0% {
      background-position: 0% 30%;
    }
    100% {
      background-position: 1000% 500%;
    }
  }
</style>

这儿引入了googleapis中的字体款式。
给label一个布景，并运用了动画作用。

这个便是文字后边的静态图片，能够另存为然后运用的哦~

百度搜索框

关于你心爱的 TA 来说，不论干什么估量都得用百度直接搜出来，就算是看个优酷、微博都不会记住域名，都会直接去百度一下，所以咱们需求在标签页中直接集成百度搜索。让 TA 能够高枕无忧的搜索想要的东西。

因为现在百度搜索框不能直接去站长东西中获取了，所以咱们能够参阅标签页插件中的百度搜索框。

依据的标签页插件咱们能够发现，输入成果之后，直接跳转到百度的网址，并在url后边携带了一个 wd 的参数，wd 也便是咱们输入的内容了。

www.baidu.com/s?wd=这儿是输入的…

<div class="search">
  <input id="input" type="text">
  <button>百度一下</button>
</div>

<script>
  var input = document.getElementById("input")
  var btn = document.querySelector('button')
  btn.addEventListener('click', function () {
    location.href = 'http://www.baidu.com/s?wd=' + input.value
  })
</script>

.search {
  width: 750px;
  height: 50px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-content: center;
  min-width: 750px;
  position: relative;
}
input {
  width: 550px;
  height: 40px;
  border-right: none;
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;
  border-color: #f5f5f5;
  /* 去除搜索框激活状况的边框 */
  outline: none;
}
input:hover {
  /* 鼠标移入状况 */
  box-shadow: 2px 2px 2px #ccc;
}
input:focus {
  /* 选中状况,边框色彩改变 */
  border-color: rgb(78, 110, 242);
}
.search span {
  position: absolute;
  font-size: 23px;
  top: 10px;
  right: 170px;
}
.search span:hover {
  color: rgb(78, 110, 242);
}
button {
  width: 100px;
  height: 44px;
  background-color: rgb(78, 110, 242);
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  border-color: rgb(78, 110, 242);
  color: white;
  font-size: 14px;
}

关于 TA

这儿能够放置你们之间的一些生日，纪念日等等，也能够放置你想放置的任何浪漫，典礼感满满~

假如你不记得两个人之间的纪念日，那就换其他的日子吧。比方你和 TA 闺蜜的纪念日也能够。

<body>
  <canvas id="c" style="position: absolute;z-index: -1;text-align: center;"></canvas> 
  <div class="middle">
    <h1 class="label">Every Day About You</h1>
    <div class="time">
      <span>
        <div id="d">
          00
        </div>
        Love day
      </span> <span>
        <div id="h">
          00
        </div>
        First Met
      </span> <span>
        <div id="m">
          00
        </div>
        birthday
      </span> <span>
        <div id="s">
          00
        </div>
        age
      </span>
    </div>
  </div>
  <script type="text/javascript" src="demo.js"></script>
</body>

这儿我界说了四个日期，爱情纪念日、相识纪念日、TA 的生日、TA 的年纪。
在页面最终引证了一个js文件，主要是等候页面烘托完结之后调用js去核算日期的逻辑。

爱情纪念日

var date1 = new Date('2019-10-07')
var date2 = new Date()
var s1 = date1.getTime(),
  s2 = date2.getTime();
var total = (s2 - s1) / 1000;
var day = parseInt(total / (24 * 60 * 60)); //核算整数天数
const d = document.getElementById("d");
d.innerHTML = getTrueNumber(day);

相识纪念日

var date1 = new Date('2019-09-20')
var date2 = new Date()
var s1 = date1.getTime(),
  s2 = date2.getTime();
var total = (s2 - s1) / 1000;
var day = parseInt(total / (24 * 60 * 60)); //核算整数天数
h.innerHTML = getTrueNumber(day);

公共办法(将核算出来的日子转为绝对值)

const getTrueNumber = x => (x < 0 ? Math.abs(x) : x);

因为生日和年纪的核算代码有些多，所以放在码上中展现了。

增加到chrome浏览器中

开发完结之后，一切的文件便是这样的了，里边的icon能够依据自己的喜爱去规划或许网上下载。

运用chrome浏览器翻开：chrome://extensions/ 即可跳转到增加扩展程序页面。

翻开右上角的开发者形式
点击加载已解压的扩展程序
挑选自己的chrome标签页项目目录即可

总结一下

为了让心爱的 TA 高兴，作为程序员的咱们可谓是煞费苦心呀！！

在给目标装置插件的时分，发现了一个小问题，或许是chrome版别原因，导致jquery的cdn无法直接引证，所以或许需求手动把jquery保存到项目文件中，然后在manifest.json装备js的当地把jquery的js加上即可。

码上中我现已把jquery的代码、canvas的代码、核算纪念日的代码都放进去了，能够直接复制到自己项目中哦！！！

七夕节快到了，祝福全国有情人终成眷属！

我正在参与「构思开发投稿大赛」概况请看：构思开发大赛来了！

HTML布景

没有哪个小天使能够回绝来自程序猿蛮横的满屏小心心好吗？接下来我来教咱们做一个飘满屏的爱心。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Every Day About You</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="canvas.js" ></script>
  </head>
  <body>
    <canvas id="c" style="position: absolute;z-index: -1;text-align: center;"></canvas>
  </body>
</html>

这儿引入的 jquery 是百度的CDN（matches中装备了能够运用一切的URL，所以CDN是能够运用外部链接的。）
canvas.js中主要是针对爱心和布景色进行绘画。

canvas

$(document).ready(function () {
  var canvas = document.getElementById("c");
  var ctx = canvas.getContext("2d");
  var c = $("#c");
  var w, h;
  var pi = Math.PI;
  var all_attribute = {
    num: 100, // 个数
    start_probability: 0.1, // 假如数量小于num，有这些几率增加一个新的     		     
    size_min: 1, // 初始爱心巨细的最小值
    size_max: 2, // 初始爱心巨细的最大值
    size_add_min: 0.3, // 每次变大的最小值（便是速度）
    size_add_max: 0.5, // 每次变大的最大值
    opacity_min: 0.3, // 初始透明度最小值
    opacity_max: 0.5, // 初始透明度最大值
    opacity_prev_min: .003, // 透明度递减值最小值
    opacity_prev_max: .005, // 透明度递减值最大值
    light_min: 0, // 色彩亮度最小值
    light_max: 90, // 色彩亮度最大值
  };
  var style_color = find_random(0, 360);
  var all_element = [];
  window_resize();
  function start() {
    window.requestAnimationFrame(start);
    style_color += 0.1;
    //更改布景色hsl(色彩值，饱和度，明度)
    ctx.fillStyle = 'hsl(' + style_color + ',100%,97%)';
    ctx.fillRect(0, 0, w, h);
    if (all_element.length < all_attribute.num && Math.random() < all_attribute.start_probability) {
      all_element.push(new ready_run);
    }
    all_element.map(function (line) {
      line.to_step();
    })
  }
  function ready_run() {
    this.to_reset();
  }
  function arc_heart(x, y, z, m) {
    //制作爱心图画的办法，参数x,y是爱心的初始坐标，z是爱心的巨细，m是爱心上升的速度
    y -= m * 10;
    ctx.moveTo(x, y);
    z *= 0.05;
    ctx.bezierCurveTo(x, y - 3 * z, x - 5 * z, y - 15 * z, x - 25 * z, y - 15 * z);
    ctx.bezierCurveTo(x - 55 * z, y - 15 * z, x - 55 * z, y + 22.5 * z, x - 55 * z, y + 22.5 * z);
    ctx.bezierCurveTo(x - 55 * z, y + 40 * z, x - 35 * z, y + 62 * z, x, y + 80 * z);
    ctx.bezierCurveTo(x + 35 * z, y + 62 * z, x + 55 * z, y + 40 * z, x + 55 * z, y + 22.5 * z);
    ctx.bezierCurveTo(x + 55 * z, y + 22.5 * z, x + 55 * z, y - 15 * z, x + 25 * z, y - 15 * z);
    ctx.bezierCurveTo(x + 10 * z, y - 15 * z, x, y - 3 * z, x, y);
  }
  ready_run.prototype = {
    to_reset: function () {
      var t = this;
      t.x = find_random(0, w);
      t.y = find_random(0, h);
      t.size = find_random(all_attribute.size_min, all_attribute.size_max);
      t.size_change = find_random(all_attribute.size_add_min, all_attribute.size_add_max);
      t.opacity = find_random(all_attribute.opacity_min, all_attribute.opacity_max);
      t.opacity_change = find_random(all_attribute.opacity_prev_min, all_attribute.opacity_prev_max);
      t.light = find_random(all_attribute.light_min, all_attribute.light_max);
      t.color = 'hsl(' + style_color + ',100%,' + t.light + '%)';
    },
    to_step: function () {
      var t = this;
      t.opacity -= t.opacity_change;
      t.size += t.size_change;
      if (t.opacity <= 0) {
        t.to_reset();
        return false;
      }
      ctx.fillStyle = t.color;
      ctx.globalAlpha = t.opacity;
      ctx.beginPath();
      arc_heart(t.x, t.y, t.size, t.size);
      ctx.closePath();
      ctx.fill();
      ctx.globalAlpha = 1;
    }
  }
  function window_resize() {
    w = window.innerWidth;
    h = window.innerHeight;
    canvas.width = w;
    canvas.height = h;
  }
  $(window).resize(function () {
    window_resize();
  });
  //回来一个介于参数1和参数2之间的随机数
  function find_random(num_one, num_two) {
    return Math.random() * (num_two - num_one) + num_one;
  }
  start();
});

因为运用了jquery的CDN，所以咱们在js中就能够直接运用 $(document).ready办法

土豪金色的标题

为了时间展现出对 TA 的爱，咱们除了在布景中体现出来之外，还能够再文字中体现出来，所以需求取一个充溢爱意的标题。

<body>
  <canvas id="c" style="position: absolute;z-index: -1;text-align: center;"></canvas> 
  <div class="middle">
    <h1 class="label">Every Day About You</h1>
  </div>
</body>

<style>
  @import url("https://fonts.googleapis.com/css?family=Aleo");
  :root {
    font-family: "Aleo", sans-serif;
  }
  html,
  body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
  }
  .middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    user-select: none;
  }
  .label {
    font-size: 2.2rem;
    background: url("text_bg.png");
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: moveBg 30s linear infinite;
  }
  @keyframes moveBg {
    0% {
      background-position: 0% 30%;
    }
    100% {
      background-position: 1000% 500%;
    }
  }
</style>

这儿引入了googleapis中的字体款式。
给label一个布景，并运用了动画作用。

这个便是文字后边的静态图片，能够另存为然后运用的哦~

百度搜索框

关于你心爱的 TA 来说，不论干什么估量都得用百度直接搜出来，就算是看个优酷、微博都不会记住域名，都会直接去百度一下，所以咱们需求在标签页中直接集成百度搜索。让 TA 能够高枕无忧的搜索想要的东西。

因为现在百度搜索框不能直接去站长东西中获取了，所以咱们能够参阅标签页插件中的百度搜索框。

依据的标签页插件咱们能够发现，输入成果之后，直接跳转到百度的网址，并在url后边携带了一个 wd 的参数，wd 也便是咱们输入的内容了。

www.baidu.com/s?wd=这儿是输入的…

<div class="search">
  <input id="input" type="text">
  <button>百度一下</button>
</div>

<script>
  var input = document.getElementById("input")
  var btn = document.querySelector('button')
  btn.addEventListener('click', function () {
    location.href = 'http://www.baidu.com/s?wd=' + input.value
  })
</script>

.search {
  width: 750px;
  height: 50px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-content: center;
  min-width: 750px;
  position: relative;
}
input {
  width: 550px;
  height: 40px;
  border-right: none;
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;
  border-color: #f5f5f5;
  /* 去除搜索框激活状况的边框 */
  outline: none;
}
input:hover {
  /* 鼠标移入状况 */
  box-shadow: 2px 2px 2px #ccc;
}
input:focus {
  /* 选中状况,边框色彩改变 */
  border-color: rgb(78, 110, 242);
}
.search span {
  position: absolute;
  font-size: 23px;
  top: 10px;
  right: 170px;
}
.search span:hover {
  color: rgb(78, 110, 242);
}
button {
  width: 100px;
  height: 44px;
  background-color: rgb(78, 110, 242);
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  border-color: rgb(78, 110, 242);
  color: white;
  font-size: 14px;
}

关于 TA

这儿能够放置你们之间的一些生日，纪念日等等，也能够放置你想放置的任何浪漫，典礼感满满~

假如你不记得两个人之间的纪念日，那就换其他的日子吧。比方你和 TA 闺蜜的纪念日也能够。

<body>
  <canvas id="c" style="position: absolute;z-index: -1;text-align: center;"></canvas> 
  <div class="middle">
    <h1 class="label">Every Day About You</h1>
    <div class="time">
      <span>
        <div id="d">
          00
        </div>
        Love day
      </span> <span>
        <div id="h">
          00
        </div>
        First Met
      </span> <span>
        <div id="m">
          00
        </div>
        birthday
      </span> <span>
        <div id="s">
          00
        </div>
        age
      </span>
    </div>
  </div>
  <script type="text/javascript" src="demo.js"></script>
</body>

这儿我界说了四个日期，爱情纪念日、相识纪念日、TA 的生日、TA 的年纪。
在页面最终引证了一个js文件，主要是等候页面烘托完结之后调用js去核算日期的逻辑。

爱情纪念日

var date1 = new Date('2019-10-07')
var date2 = new Date()
var s1 = date1.getTime(),
  s2 = date2.getTime();
var total = (s2 - s1) / 1000;
var day = parseInt(total / (24 * 60 * 60)); //核算整数天数
const d = document.getElementById("d");
d.innerHTML = getTrueNumber(day);

相识纪念日

var date1 = new Date('2019-09-20')
var date2 = new Date()
var s1 = date1.getTime(),
  s2 = date2.getTime();
var total = (s2 - s1) / 1000;
var day = parseInt(total / (24 * 60 * 60)); //核算整数天数
h.innerHTML = getTrueNumber(day);

公共办法(将核算出来的日子转为绝对值)

const getTrueNumber = x => (x < 0 ? Math.abs(x) : x);

因为生日和年纪的核算代码有些多，所以放在码上中展现了。

增加到chrome浏览器中

开发完结之后，一切的文件便是这样的了，里边的icon能够依据自己的喜爱去规划或许网上下载。

运用chrome浏览器翻开：chrome://extensions/ 即可跳转到增加扩展程序页面。

翻开右上角的开发者形式
点击加载已解压的扩展程序
挑选自己的chrome标签页项目目录即可

总结一下

为了让心爱的 TA 高兴，作为程序员的咱们可谓是煞费苦心呀！！

在给目标装置插件的时分，发现了一个小问题，或许是chrome版别原因，导致jquery的cdn无法直接引证，所以或许需求手动把jquery保存到项目文件中，然后在manifest.json装备js的当地把jquery的js加上即可。

码上中我现已把jquery的代码、canvas的代码、核算纪念日的代码都放进去了，能够直接复制到自己项目中哦！！！

七夕节快到了，祝福全国有情人终成眷属！

我正在参与「构思开发投稿大赛」概况请看：构思开发大赛来了！

HTML布景

没有哪个小天使能够回绝来自程序猿蛮横的满屏小心心好吗？接下来我来教咱们做一个飘满屏的爱心。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Every Day About You</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="canvas.js" ></script>
  </head>
  <body>
    <canvas id="c" style="position: absolute;z-index: -1;text-align: center;"></canvas>
  </body>
</html>

这儿引入的 jquery 是百度的CDN（matches中装备了能够运用一切的URL，所以CDN是能够运用外部链接的。）
canvas.js中主要是针对爱心和布景色进行绘画。

canvas

$(document).ready(function () {
  var canvas = document.getElementById("c");
  var ctx = canvas.getContext("2d");
  var c = $("#c");
  var w, h;
  var pi = Math.PI;
  var all_attribute = {
    num: 100, // 个数
    start_probability: 0.1, // 假如数量小于num，有这些几率增加一个新的     		     
    size_min: 1, // 初始爱心巨细的最小值
    size_max: 2, // 初始爱心巨细的最大值
    size_add_min: 0.3, // 每次变大的最小值（便是速度）
    size_add_max: 0.5, // 每次变大的最大值
    opacity_min: 0.3, // 初始透明度最小值
    opacity_max: 0.5, // 初始透明度最大值
    opacity_prev_min: .003, // 透明度递减值最小值
    opacity_prev_max: .005, // 透明度递减值最大值
    light_min: 0, // 色彩亮度最小值
    light_max: 90, // 色彩亮度最大值
  };
  var style_color = find_random(0, 360);
  var all_element = [];
  window_resize();
  function start() {
    window.requestAnimationFrame(start);
    style_color += 0.1;
    //更改布景色hsl(色彩值，饱和度，明度)
    ctx.fillStyle = 'hsl(' + style_color + ',100%,97%)';
    ctx.fillRect(0, 0, w, h);
    if (all_element.length < all_attribute.num && Math.random() < all_attribute.start_probability) {
      all_element.push(new ready_run);
    }
    all_element.map(function (line) {
      line.to_step();
    })
  }
  function ready_run() {
    this.to_reset();
  }
  function arc_heart(x, y, z, m) {
    //制作爱心图画的办法，参数x,y是爱心的初始坐标，z是爱心的巨细，m是爱心上升的速度
    y -= m * 10;
    ctx.moveTo(x, y);
    z *= 0.05;
    ctx.bezierCurveTo(x, y - 3 * z, x - 5 * z, y - 15 * z, x - 25 * z, y - 15 * z);
    ctx.bezierCurveTo(x - 55 * z, y - 15 * z, x - 55 * z, y + 22.5 * z, x - 55 * z, y + 22.5 * z);
    ctx.bezierCurveTo(x - 55 * z, y + 40 * z, x - 35 * z, y + 62 * z, x, y + 80 * z);
    ctx.bezierCurveTo(x + 35 * z, y + 62 * z, x + 55 * z, y + 40 * z, x + 55 * z, y + 22.5 * z);
    ctx.bezierCurveTo(x + 55 * z, y + 22.5 * z, x + 55 * z, y - 15 * z, x + 25 * z, y - 15 * z);
    ctx.bezierCurveTo(x + 10 * z, y - 15 * z, x, y - 3 * z, x, y);
  }
  ready_run.prototype = {
    to_reset: function () {
      var t = this;
      t.x = find_random(0, w);
      t.y = find_random(0, h);
      t.size = find_random(all_attribute.size_min, all_attribute.size_max);
      t.size_change = find_random(all_attribute.size_add_min, all_attribute.size_add_max);
      t.opacity = find_random(all_attribute.opacity_min, all_attribute.opacity_max);
      t.opacity_change = find_random(all_attribute.opacity_prev_min, all_attribute.opacity_prev_max);
      t.light = find_random(all_attribute.light_min, all_attribute.light_max);
      t.color = 'hsl(' + style_color + ',100%,' + t.light + '%)';
    },
    to_step: function () {
      var t = this;
      t.opacity -= t.opacity_change;
      t.size += t.size_change;
      if (t.opacity <= 0) {
        t.to_reset();
        return false;
      }
      ctx.fillStyle = t.color;
      ctx.globalAlpha = t.opacity;
      ctx.beginPath();
      arc_heart(t.x, t.y, t.size, t.size);
      ctx.closePath();
      ctx.fill();
      ctx.globalAlpha = 1;
    }
  }
  function window_resize() {
    w = window.innerWidth;
    h = window.innerHeight;
    canvas.width = w;
    canvas.height = h;
  }
  $(window).resize(function () {
    window_resize();
  });
  //回来一个介于参数1和参数2之间的随机数
  function find_random(num_one, num_two) {
    return Math.random() * (num_two - num_one) + num_one;
  }
  start();
});

因为运用了jquery的CDN，所以咱们在js中就能够直接运用 $(document).ready办法

土豪金色的标题

为了时间展现出对 TA 的爱，咱们除了在布景中体现出来之外，还能够再文字中体现出来，所以需求取一个充溢爱意的标题。

<body>
  <canvas id="c" style="position: absolute;z-index: -1;text-align: center;"></canvas> 
  <div class="middle">
    <h1 class="label">Every Day About You</h1>
  </div>
</body>

<style>
  @import url("https://fonts.googleapis.com/css?family=Aleo");
  :root {
    font-family: "Aleo", sans-serif;
  }
  html,
  body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
  }
  .middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    user-select: none;
  }
  .label {
    font-size: 2.2rem;
    background: url("text_bg.png");
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: moveBg 30s linear infinite;
  }
  @keyframes moveBg {
    0% {
      background-position: 0% 30%;
    }
    100% {
      background-position: 1000% 500%;
    }
  }
</style>

这儿引入了googleapis中的字体款式。
给label一个布景，并运用了动画作用。

这个便是文字后边的静态图片，能够另存为然后运用的哦~

百度搜索框

关于你心爱的 TA 来说，不论干什么估量都得用百度直接搜出来，就算是看个优酷、微博都不会记住域名，都会直接去百度一下，所以咱们需求在标签页中直接集成百度搜索。让 TA 能够高枕无忧的搜索想要的东西。

因为现在百度搜索框不能直接去站长东西中获取了，所以咱们能够参阅标签页插件中的百度搜索框。

依据的标签页插件咱们能够发现，输入成果之后，直接跳转到百度的网址，并在url后边携带了一个 wd 的参数，wd 也便是咱们输入的内容了。

www.baidu.com/s?wd=这儿是输入的…

<div class="search">
  <input id="input" type="text">
  <button>百度一下</button>
</div>

<script>
  var input = document.getElementById("input")
  var btn = document.querySelector('button')
  btn.addEventListener('click', function () {
    location.href = 'http://www.baidu.com/s?wd=' + input.value
  })
</script>

.search {
  width: 750px;
  height: 50px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-content: center;
  min-width: 750px;
  position: relative;
}
input {
  width: 550px;
  height: 40px;
  border-right: none;
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;
  border-color: #f5f5f5;
  /* 去除搜索框激活状况的边框 */
  outline: none;
}
input:hover {
  /* 鼠标移入状况 */
  box-shadow: 2px 2px 2px #ccc;
}
input:focus {
  /* 选中状况,边框色彩改变 */
  border-color: rgb(78, 110, 242);
}
.search span {
  position: absolute;
  font-size: 23px;
  top: 10px;
  right: 170px;
}
.search span:hover {
  color: rgb(78, 110, 242);
}
button {
  width: 100px;
  height: 44px;
  background-color: rgb(78, 110, 242);
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  border-color: rgb(78, 110, 242);
  color: white;
  font-size: 14px;
}

关于 TA

这儿能够放置你们之间的一些生日，纪念日等等，也能够放置你想放置的任何浪漫，典礼感满满~

假如你不记得两个人之间的纪念日，那就换其他的日子吧。比方你和 TA 闺蜜的纪念日也能够。

<body>
  <canvas id="c" style="position: absolute;z-index: -1;text-align: center;"></canvas> 
  <div class="middle">
    <h1 class="label">Every Day About You</h1>
    <div class="time">
      <span>
        <div id="d">
          00
        </div>
        Love day
      </span> <span>
        <div id="h">
          00
        </div>
        First Met
      </span> <span>
        <div id="m">
          00
        </div>
        birthday
      </span> <span>
        <div id="s">
          00
        </div>
        age
      </span>
    </div>
  </div>
  <script type="text/javascript" src="demo.js"></script>
</body>

这儿我界说了四个日期，爱情纪念日、相识纪念日、TA 的生日、TA 的年纪。
在页面最终引证了一个js文件，主要是等候页面烘托完结之后调用js去核算日期的逻辑。

爱情纪念日

var date1 = new Date('2019-10-07')
var date2 = new Date()
var s1 = date1.getTime(),
  s2 = date2.getTime();
var total = (s2 - s1) / 1000;
var day = parseInt(total / (24 * 60 * 60)); //核算整数天数
const d = document.getElementById("d");
d.innerHTML = getTrueNumber(day);

相识纪念日

var date1 = new Date('2019-09-20')
var date2 = new Date()
var s1 = date1.getTime(),
  s2 = date2.getTime();
var total = (s2 - s1) / 1000;
var day = parseInt(total / (24 * 60 * 60)); //核算整数天数
h.innerHTML = getTrueNumber(day);

公共办法(将核算出来的日子转为绝对值)

const getTrueNumber = x => (x < 0 ? Math.abs(x) : x);

因为生日和年纪的核算代码有些多，所以放在码上中展现了。

增加到chrome浏览器中

开发完结之后，一切的文件便是这样的了，里边的icon能够依据自己的喜爱去规划或许网上下载。

运用chrome浏览器翻开：chrome://extensions/ 即可跳转到增加扩展程序页面。

翻开右上角的开发者形式
点击加载已解压的扩展程序
挑选自己的chrome标签页项目目录即可

总结一下

为了让心爱的 TA 高兴，作为程序员的咱们可谓是煞费苦心呀！！

在给目标装置插件的时分，发现了一个小问题，或许是chrome版别原因，导致jquery的cdn无法直接引证，所以或许需求手动把jquery保存到项目文件中，然后在manifest.json装备js的当地把jquery的js加上即可。

码上中我现已把jquery的代码、canvas的代码、核算纪念日的代码都放进去了，能够直接复制到自己项目中哦！！！

七夕节快到了，祝福全国有情人终成眷属！

我正在参与「构思开发投稿大赛」概况请看：构思开发大赛来了！

HTML布景

没有哪个小天使能够回绝来自程序猿蛮横的满屏小心心好吗？接下来我来教咱们做一个飘满屏的爱心。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Every Day About You</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="canvas.js" ></script>
  </head>
  <body>
    <canvas id="c" style="position: absolute;z-index: -1;text-align: center;"></canvas>
  </body>
</html>

这儿引入的 jquery 是百度的CDN（matches中装备了能够运用一切的URL，所以CDN是能够运用外部链接的。）
canvas.js中主要是针对爱心和布景色进行绘画。

canvas

$(document).ready(function () {
  var canvas = document.getElementById("c");
  var ctx = canvas.getContext("2d");
  var c = $("#c");
  var w, h;
  var pi = Math.PI;
  var all_attribute = {
    num: 100, // 个数
    start_probability: 0.1, // 假如数量小于num，有这些几率增加一个新的     		     
    size_min: 1, // 初始爱心巨细的最小值
    size_max: 2, // 初始爱心巨细的最大值
    size_add_min: 0.3, // 每次变大的最小值（便是速度）
    size_add_max: 0.5, // 每次变大的最大值
    opacity_min: 0.3, // 初始透明度最小值
    opacity_max: 0.5, // 初始透明度最大值
    opacity_prev_min: .003, // 透明度递减值最小值
    opacity_prev_max: .005, // 透明度递减值最大值
    light_min: 0, // 色彩亮度最小值
    light_max: 90, // 色彩亮度最大值
  };
  var style_color = find_random(0, 360);
  var all_element = [];
  window_resize();
  function start() {
    window.requestAnimationFrame(start);
    style_color += 0.1;
    //更改布景色hsl(色彩值，饱和度，明度)
    ctx.fillStyle = 'hsl(' + style_color + ',100%,97%)';
    ctx.fillRect(0, 0, w, h);
    if (all_element.length < all_attribute.num && Math.random() < all_attribute.start_probability) {
      all_element.push(new ready_run);
    }
    all_element.map(function (line) {
      line.to_step();
    })
  }
  function ready_run() {
    this.to_reset();
  }
  function arc_heart(x, y, z, m) {
    //制作爱心图画的办法，参数x,y是爱心的初始坐标，z是爱心的巨细，m是爱心上升的速度
    y -= m * 10;
    ctx.moveTo(x, y);
    z *= 0.05;
    ctx.bezierCurveTo(x, y - 3 * z, x - 5 * z, y - 15 * z, x - 25 * z, y - 15 * z);
    ctx.bezierCurveTo(x - 55 * z, y - 15 * z, x - 55 * z, y + 22.5 * z, x - 55 * z, y + 22.5 * z);
    ctx.bezierCurveTo(x - 55 * z, y + 40 * z, x - 35 * z, y + 62 * z, x, y + 80 * z);
    ctx.bezierCurveTo(x + 35 * z, y + 62 * z, x + 55 * z, y + 40 * z, x + 55 * z, y + 22.5 * z);
    ctx.bezierCurveTo(x + 55 * z, y + 22.5 * z, x + 55 * z, y - 15 * z, x + 25 * z, y - 15 * z);
    ctx.bezierCurveTo(x + 10 * z, y - 15 * z, x, y - 3 * z, x, y);
  }
  ready_run.prototype = {
    to_reset: function () {
      var t = this;
      t.x = find_random(0, w);
      t.y = find_random(0, h);
      t.size = find_random(all_attribute.size_min, all_attribute.size_max);
      t.size_change = find_random(all_attribute.size_add_min, all_attribute.size_add_max);
      t.opacity = find_random(all_attribute.opacity_min, all_attribute.opacity_max);
      t.opacity_change = find_random(all_attribute.opacity_prev_min, all_attribute.opacity_prev_max);
      t.light = find_random(all_attribute.light_min, all_attribute.light_max);
      t.color = 'hsl(' + style_color + ',100%,' + t.light + '%)';
    },
    to_step: function () {
      var t = this;
      t.opacity -= t.opacity_change;
      t.size += t.size_change;
      if (t.opacity <= 0) {
        t.to_reset();
        return false;
      }
      ctx.fillStyle = t.color;
      ctx.globalAlpha = t.opacity;
      ctx.beginPath();
      arc_heart(t.x, t.y, t.size, t.size);
      ctx.closePath();
      ctx.fill();
      ctx.globalAlpha = 1;
    }
  }
  function window_resize() {
    w = window.innerWidth;
    h = window.innerHeight;
    canvas.width = w;
    canvas.height = h;
  }
  $(window).resize(function () {
    window_resize();
  });
  //回来一个介于参数1和参数2之间的随机数
  function find_random(num_one, num_two) {
    return Math.random() * (num_two - num_one) + num_one;
  }
  start();
});

因为运用了jquery的CDN，所以咱们在js中就能够直接运用 $(document).ready办法

土豪金色的标题

为了时间展现出对 TA 的爱，咱们除了在布景中体现出来之外，还能够再文字中体现出来，所以需求取一个充溢爱意的标题。

<body>
  <canvas id="c" style="position: absolute;z-index: -1;text-align: center;"></canvas> 
  <div class="middle">
    <h1 class="label">Every Day About You</h1>
  </div>
</body>

<style>
  @import url("https://fonts.googleapis.com/css?family=Aleo");
  :root {
    font-family: "Aleo", sans-serif;
  }
  html,
  body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
  }
  .middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    user-select: none;
  }
  .label {
    font-size: 2.2rem;
    background: url("text_bg.png");
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: moveBg 30s linear infinite;
  }
  @keyframes moveBg {
    0% {
      background-position: 0% 30%;
    }
    100% {
      background-position: 1000% 500%;
    }
  }
</style>

这儿引入了googleapis中的字体款式。
给label一个布景，并运用了动画作用。

这个便是文字后边的静态图片，能够另存为然后运用的哦~

百度搜索框

关于你心爱的 TA 来说，不论干什么估量都得用百度直接搜出来，就算是看个优酷、微博都不会记住域名，都会直接去百度一下，所以咱们需求在标签页中直接集成百度搜索。让 TA 能够高枕无忧的搜索想要的东西。

因为现在百度搜索框不能直接去站长东西中获取了，所以咱们能够参阅标签页插件中的百度搜索框。

依据的标签页插件咱们能够发现，输入成果之后，直接跳转到百度的网址，并在url后边携带了一个 wd 的参数，wd 也便是咱们输入的内容了。

www.baidu.com/s?wd=这儿是输入的…

<div class="search">
  <input id="input" type="text">
  <button>百度一下</button>
</div>

<script>
  var input = document.getElementById("input")
  var btn = document.querySelector('button')
  btn.addEventListener('click', function () {
    location.href = 'http://www.baidu.com/s?wd=' + input.value
  })
</script>

.search {
  width: 750px;
  height: 50px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-content: center;
  min-width: 750px;
  position: relative;
}
input {
  width: 550px;
  height: 40px;
  border-right: none;
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;
  border-color: #f5f5f5;
  /* 去除搜索框激活状况的边框 */
  outline: none;
}
input:hover {
  /* 鼠标移入状况 */
  box-shadow: 2px 2px 2px #ccc;
}
input:focus {
  /* 选中状况,边框色彩改变 */
  border-color: rgb(78, 110, 242);
}
.search span {
  position: absolute;
  font-size: 23px;
  top: 10px;
  right: 170px;
}
.search span:hover {
  color: rgb(78, 110, 242);
}
button {
  width: 100px;
  height: 44px;
  background-color: rgb(78, 110, 242);
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  border-color: rgb(78, 110, 242);
  color: white;
  font-size: 14px;
}

关于 TA

这儿能够放置你们之间的一些生日，纪念日等等，也能够放置你想放置的任何浪漫，典礼感满满~

假如你不记得两个人之间的纪念日，那就换其他的日子吧。比方你和 TA 闺蜜的纪念日也能够。

<body>
  <canvas id="c" style="position: absolute;z-index: -1;text-align: center;"></canvas> 
  <div class="middle">
    <h1 class="label">Every Day About You</h1>
    <div class="time">
      <span>
        <div id="d">
          00
        </div>
        Love day
      </span> <span>
        <div id="h">
          00
        </div>
        First Met
      </span> <span>
        <div id="m">
          00
        </div>
        birthday
      </span> <span>
        <div id="s">
          00
        </div>
        age
      </span>
    </div>
  </div>
  <script type="text/javascript" src="demo.js"></script>
</body>

这儿我界说了四个日期，爱情纪念日、相识纪念日、TA 的生日、TA 的年纪。
在页面最终引证了一个js文件，主要是等候页面烘托完结之后调用js去核算日期的逻辑。

爱情纪念日

var date1 = new Date('2019-10-07')
var date2 = new Date()
var s1 = date1.getTime(),
  s2 = date2.getTime();
var total = (s2 - s1) / 1000;
var day = parseInt(total / (24 * 60 * 60)); //核算整数天数
const d = document.getElementById("d");
d.innerHTML = getTrueNumber(day);

相识纪念日

var date1 = new Date('2019-09-20')
var date2 = new Date()
var s1 = date1.getTime(),
  s2 = date2.getTime();
var total = (s2 - s1) / 1000;
var day = parseInt(total / (24 * 60 * 60)); //核算整数天数
h.innerHTML = getTrueNumber(day);

公共办法(将核算出来的日子转为绝对值)

const getTrueNumber = x => (x < 0 ? Math.abs(x) : x);

因为生日和年纪的核算代码有些多，所以放在码上中展现了。

增加到chrome浏览器中

开发完结之后，一切的文件便是这样的了，里边的icon能够依据自己的喜爱去规划或许网上下载。

运用chrome浏览器翻开：chrome://extensions/ 即可跳转到增加扩展程序页面。

翻开右上角的开发者形式
点击加载已解压的扩展程序
挑选自己的chrome标签页项目目录即可

总结一下

为了让心爱的 TA 高兴，作为程序员的咱们可谓是煞费苦心呀！！

在给目标装置插件的时分，发现了一个小问题，或许是chrome版别原因，导致jquery的cdn无法直接引证，所以或许需求手动把jquery保存到项目文件中，然后在manifest.json装备js的当地把jquery的js加上即可。

码上中我现已把jquery的代码、canvas的代码、核算纪念日的代码都放进去了，能够直接复制到自己项目中哦！！！

七夕节快到了，祝福全国有情人终成眷属！

我正在参与「构思开发投稿大赛」概况请看：构思开发大赛来了！

土豪金色的标题

为了时间展现出对 TA 的爱，咱们除了在布景中体现出来之外，还能够再文字中体现出来，所以需求取一个充溢爱意的标题。

<body>
  <canvas id="c" style="position: absolute;z-index: -1;text-align: center;"></canvas> 
  <div class="middle">
    <h1 class="label">Every Day About You</h1>
  </div>
</body>

<style>
  @import url("https://fonts.googleapis.com/css?family=Aleo");
  :root {
    font-family: "Aleo", sans-serif;
  }
  html,
  body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
  }
  .middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    user-select: none;
  }
  .label {
    font-size: 2.2rem;
    background: url("text_bg.png");
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: moveBg 30s linear infinite;
  }
  @keyframes moveBg {
    0% {
      background-position: 0% 30%;
    }
    100% {
      background-position: 1000% 500%;
    }
  }
</style>

这儿引入了googleapis中的字体款式。
给label一个布景，并运用了动画作用。

这个便是文字后边的静态图片，能够另存为然后运用的哦~

百度搜索框

关于你心爱的 TA 来说，不论干什么估量都得用百度直接搜出来，就算是看个优酷、微博都不会记住域名，都会直接去百度一下，所以咱们需求在标签页中直接集成百度搜索。让 TA 能够高枕无忧的搜索想要的东西。

因为现在百度搜索框不能直接去站长东西中获取了，所以咱们能够参阅标签页插件中的百度搜索框。

依据的标签页插件咱们能够发现，输入成果之后，直接跳转到百度的网址，并在url后边携带了一个 wd 的参数，wd 也便是咱们输入的内容了。

www.baidu.com/s?wd=这儿是输入的…

<div class="search">
  <input id="input" type="text">
  <button>百度一下</button>
</div>

<script>
  var input = document.getElementById("input")
  var btn = document.querySelector('button')
  btn.addEventListener('click', function () {
    location.href = 'http://www.baidu.com/s?wd=' + input.value
  })
</script>

.search {
  width: 750px;
  height: 50px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-content: center;
  min-width: 750px;
  position: relative;
}
input {
  width: 550px;
  height: 40px;
  border-right: none;
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;
  border-color: #f5f5f5;
  /* 去除搜索框激活状况的边框 */
  outline: none;
}
input:hover {
  /* 鼠标移入状况 */
  box-shadow: 2px 2px 2px #ccc;
}
input:focus {
  /* 选中状况,边框色彩改变 */
  border-color: rgb(78, 110, 242);
}
.search span {
  position: absolute;
  font-size: 23px;
  top: 10px;
  right: 170px;
}
.search span:hover {
  color: rgb(78, 110, 242);
}
button {
  width: 100px;
  height: 44px;
  background-color: rgb(78, 110, 242);
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  border-color: rgb(78, 110, 242);
  color: white;
  font-size: 14px;
}

关于 TA

这儿能够放置你们之间的一些生日，纪念日等等，也能够放置你想放置的任何浪漫，典礼感满满~

假如你不记得两个人之间的纪念日，那就换其他的日子吧。比方你和 TA 闺蜜的纪念日也能够。

<body>
  <canvas id="c" style="position: absolute;z-index: -1;text-align: center;"></canvas> 
  <div class="middle">
    <h1 class="label">Every Day About You</h1>
    <div class="time">
      <span>
        <div id="d">
          00
        </div>
        Love day
      </span> <span>
        <div id="h">
          00
        </div>
        First Met
      </span> <span>
        <div id="m">
          00
        </div>
        birthday
      </span> <span>
        <div id="s">
          00
        </div>
        age
      </span>
    </div>
  </div>
  <script type="text/javascript" src="demo.js"></script>
</body>

这儿我界说了四个日期，爱情纪念日、相识纪念日、TA 的生日、TA 的年纪。
在页面最终引证了一个js文件，主要是等候页面烘托完结之后调用js去核算日期的逻辑。

爱情纪念日

var date1 = new Date('2019-10-07')
var date2 = new Date()
var s1 = date1.getTime(),
  s2 = date2.getTime();
var total = (s2 - s1) / 1000;
var day = parseInt(total / (24 * 60 * 60)); //核算整数天数
const d = document.getElementById("d");
d.innerHTML = getTrueNumber(day);

相识纪念日

var date1 = new Date('2019-09-20')
var date2 = new Date()
var s1 = date1.getTime(),
  s2 = date2.getTime();
var total = (s2 - s1) / 1000;
var day = parseInt(total / (24 * 60 * 60)); //核算整数天数
h.innerHTML = getTrueNumber(day);

公共办法(将核算出来的日子转为绝对值)

const getTrueNumber = x => (x < 0 ? Math.abs(x) : x);

因为生日和年纪的核算代码有些多，所以放在码上中展现了。

增加到chrome浏览器中

开发完结之后，一切的文件便是这样的了，里边的icon能够依据自己的喜爱去规划或许网上下载。

运用chrome浏览器翻开：chrome://extensions/ 即可跳转到增加扩展程序页面。

翻开右上角的开发者形式
点击加载已解压的扩展程序
挑选自己的chrome标签页项目目录即可

总结一下

为了让心爱的 TA 高兴，作为程序员的咱们可谓是煞费苦心呀！！

在给目标装置插件的时分，发现了一个小问题，或许是chrome版别原因，导致jquery的cdn无法直接引证，所以或许需求手动把jquery保存到项目文件中，然后在manifest.json装备js的当地把jquery的js加上即可。

码上中我现已把jquery的代码、canvas的代码、核算纪念日的代码都放进去了，能够直接复制到自己项目中哦！！！

七夕节快到了，祝福全国有情人终成眷属！

我正在参与「构思开发投稿大赛」概况请看：构思开发大赛来了！

土豪金色的标题

为了时间展现出对 TA 的爱，咱们除了在布景中体现出来之外，还能够再文字中体现出来，所以需求取一个充溢爱意的标题。

<body>
  <canvas id="c" style="position: absolute;z-index: -1;text-align: center;"></canvas> 
  <div class="middle">
    <h1 class="label">Every Day About You</h1>
  </div>
</body>

<style>
  @import url("https://fonts.googleapis.com/css?family=Aleo");
  :root {
    font-family: "Aleo", sans-serif;
  }
  html,
  body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
  }
  .middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    user-select: none;
  }
  .label {
    font-size: 2.2rem;
    background: url("text_bg.png");
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: moveBg 30s linear infinite;
  }
  @keyframes moveBg {
    0% {
      background-position: 0% 30%;
    }
    100% {
      background-position: 1000% 500%;
    }
  }
</style>

这儿引入了googleapis中的字体款式。
给label一个布景，并运用了动画作用。

这个便是文字后边的静态图片，能够另存为然后运用的哦~

百度搜索框

关于你心爱的 TA 来说，不论干什么估量都得用百度直接搜出来，就算是看个优酷、微博都不会记住域名，都会直接去百度一下，所以咱们需求在标签页中直接集成百度搜索。让 TA 能够高枕无忧的搜索想要的东西。

因为现在百度搜索框不能直接去站长东西中获取了，所以咱们能够参阅标签页插件中的百度搜索框。

依据的标签页插件咱们能够发现，输入成果之后，直接跳转到百度的网址，并在url后边携带了一个 wd 的参数，wd 也便是咱们输入的内容了。

www.baidu.com/s?wd=这儿是输入的…

<div class="search">
  <input id="input" type="text">
  <button>百度一下</button>
</div>

<script>
  var input = document.getElementById("input")
  var btn = document.querySelector('button')
  btn.addEventListener('click', function () {
    location.href = 'http://www.baidu.com/s?wd=' + input.value
  })
</script>

.search {
  width: 750px;
  height: 50px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-content: center;
  min-width: 750px;
  position: relative;
}
input {
  width: 550px;
  height: 40px;
  border-right: none;
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;
  border-color: #f5f5f5;
  /* 去除搜索框激活状况的边框 */
  outline: none;
}
input:hover {
  /* 鼠标移入状况 */
  box-shadow: 2px 2px 2px #ccc;
}
input:focus {
  /* 选中状况,边框色彩改变 */
  border-color: rgb(78, 110, 242);
}
.search span {
  position: absolute;
  font-size: 23px;
  top: 10px;
  right: 170px;
}
.search span:hover {
  color: rgb(78, 110, 242);
}
button {
  width: 100px;
  height: 44px;
  background-color: rgb(78, 110, 242);
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  border-color: rgb(78, 110, 242);
  color: white;
  font-size: 14px;
}

关于 TA

这儿能够放置你们之间的一些生日，纪念日等等，也能够放置你想放置的任何浪漫，典礼感满满~

假如你不记得两个人之间的纪念日，那就换其他的日子吧。比方你和 TA 闺蜜的纪念日也能够。

<body>
  <canvas id="c" style="position: absolute;z-index: -1;text-align: center;"></canvas> 
  <div class="middle">
    <h1 class="label">Every Day About You</h1>
    <div class="time">
      <span>
        <div id="d">
          00
        </div>
        Love day
      </span> <span>
        <div id="h">
          00
        </div>
        First Met
      </span> <span>
        <div id="m">
          00
        </div>
        birthday
      </span> <span>
        <div id="s">
          00
        </div>
        age
      </span>
    </div>
  </div>
  <script type="text/javascript" src="demo.js"></script>
</body>

这儿我界说了四个日期，爱情纪念日、相识纪念日、TA 的生日、TA 的年纪。
在页面最终引证了一个js文件，主要是等候页面烘托完结之后调用js去核算日期的逻辑。

爱情纪念日

var date1 = new Date('2019-10-07')
var date2 = new Date()
var s1 = date1.getTime(),
  s2 = date2.getTime();
var total = (s2 - s1) / 1000;
var day = parseInt(total / (24 * 60 * 60)); //核算整数天数
const d = document.getElementById("d");
d.innerHTML = getTrueNumber(day);

相识纪念日

var date1 = new Date('2019-09-20')
var date2 = new Date()
var s1 = date1.getTime(),
  s2 = date2.getTime();
var total = (s2 - s1) / 1000;
var day = parseInt(total / (24 * 60 * 60)); //核算整数天数
h.innerHTML = getTrueNumber(day);

公共办法(将核算出来的日子转为绝对值)

const getTrueNumber = x => (x < 0 ? Math.abs(x) : x);

因为生日和年纪的核算代码有些多，所以放在码上中展现了。

增加到chrome浏览器中

开发完结之后，一切的文件便是这样的了，里边的icon能够依据自己的喜爱去规划或许网上下载。

运用chrome浏览器翻开：chrome://extensions/ 即可跳转到增加扩展程序页面。

翻开右上角的开发者形式
点击加载已解压的扩展程序
挑选自己的chrome标签页项目目录即可

总结一下

为了让心爱的 TA 高兴，作为程序员的咱们可谓是煞费苦心呀！！

在给目标装置插件的时分，发现了一个小问题，或许是chrome版别原因，导致jquery的cdn无法直接引证，所以或许需求手动把jquery保存到项目文件中，然后在manifest.json装备js的当地把jquery的js加上即可。

码上中我现已把jquery的代码、canvas的代码、核算纪念日的代码都放进去了，能够直接复制到自己项目中哦！！！

七夕节快到了，祝福全国有情人终成眷属！

我正在参与「构思开发投稿大赛」概况请看：构思开发大赛来了！

土豪金色的标题

为了时间展现出对 TA 的爱，咱们除了在布景中体现出来之外，还能够再文字中体现出来，所以需求取一个充溢爱意的标题。

<body>
  <canvas id="c" style="position: absolute;z-index: -1;text-align: center;"></canvas> 
  <div class="middle">
    <h1 class="label">Every Day About You</h1>
  </div>
</body>

<style>
  @import url("https://fonts.googleapis.com/css?family=Aleo");
  :root {
    font-family: "Aleo", sans-serif;
  }
  html,
  body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
  }
  .middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    user-select: none;
  }
  .label {
    font-size: 2.2rem;
    background: url("text_bg.png");
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: moveBg 30s linear infinite;
  }
  @keyframes moveBg {
    0% {
      background-position: 0% 30%;
    }
    100% {
      background-position: 1000% 500%;
    }
  }
</style>

这儿引入了googleapis中的字体款式。
给label一个布景，并运用了动画作用。

这个便是文字后边的静态图片，能够另存为然后运用的哦~

百度搜索框

关于你心爱的 TA 来说，不论干什么估量都得用百度直接搜出来，就算是看个优酷、微博都不会记住域名，都会直接去百度一下，所以咱们需求在标签页中直接集成百度搜索。让 TA 能够高枕无忧的搜索想要的东西。

因为现在百度搜索框不能直接去站长东西中获取了，所以咱们能够参阅标签页插件中的百度搜索框。

依据的标签页插件咱们能够发现，输入成果之后，直接跳转到百度的网址，并在url后边携带了一个 wd 的参数，wd 也便是咱们输入的内容了。

www.baidu.com/s?wd=这儿是输入的…

<div class="search">
  <input id="input" type="text">
  <button>百度一下</button>
</div>

<script>
  var input = document.getElementById("input")
  var btn = document.querySelector('button')
  btn.addEventListener('click', function () {
    location.href = 'http://www.baidu.com/s?wd=' + input.value
  })
</script>

.search {
  width: 750px;
  height: 50px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-content: center;
  min-width: 750px;
  position: relative;
}
input {
  width: 550px;
  height: 40px;
  border-right: none;
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;
  border-color: #f5f5f5;
  /* 去除搜索框激活状况的边框 */
  outline: none;
}
input:hover {
  /* 鼠标移入状况 */
  box-shadow: 2px 2px 2px #ccc;
}
input:focus {
  /* 选中状况,边框色彩改变 */
  border-color: rgb(78, 110, 242);
}
.search span {
  position: absolute;
  font-size: 23px;
  top: 10px;
  right: 170px;
}
.search span:hover {
  color: rgb(78, 110, 242);
}
button {
  width: 100px;
  height: 44px;
  background-color: rgb(78, 110, 242);
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  border-color: rgb(78, 110, 242);
  color: white;
  font-size: 14px;
}

关于 TA

这儿能够放置你们之间的一些生日，纪念日等等，也能够放置你想放置的任何浪漫，典礼感满满~

假如你不记得两个人之间的纪念日，那就换其他的日子吧。比方你和 TA 闺蜜的纪念日也能够。

<body>
  <canvas id="c" style="position: absolute;z-index: -1;text-align: center;"></canvas> 
  <div class="middle">
    <h1 class="label">Every Day About You</h1>
    <div class="time">
      <span>
        <div id="d">
          00
        </div>
        Love day
      </span> <span>
        <div id="h">
          00
        </div>
        First Met
      </span> <span>
        <div id="m">
          00
        </div>
        birthday
      </span> <span>
        <div id="s">
          00
        </div>
        age
      </span>
    </div>
  </div>
  <script type="text/javascript" src="demo.js"></script>
</body>

这儿我界说了四个日期，爱情纪念日、相识纪念日、TA 的生日、TA 的年纪。
在页面最终引证了一个js文件，主要是等候页面烘托完结之后调用js去核算日期的逻辑。

爱情纪念日

var date1 = new Date('2019-10-07')
var date2 = new Date()
var s1 = date1.getTime(),
  s2 = date2.getTime();
var total = (s2 - s1) / 1000;
var day = parseInt(total / (24 * 60 * 60)); //核算整数天数
const d = document.getElementById("d");
d.innerHTML = getTrueNumber(day);

相识纪念日

var date1 = new Date('2019-09-20')
var date2 = new Date()
var s1 = date1.getTime(),
  s2 = date2.getTime();
var total = (s2 - s1) / 1000;
var day = parseInt(total / (24 * 60 * 60)); //核算整数天数
h.innerHTML = getTrueNumber(day);

公共办法(将核算出来的日子转为绝对值)

const getTrueNumber = x => (x < 0 ? Math.abs(x) : x);

因为生日和年纪的核算代码有些多，所以放在码上中展现了。

增加到chrome浏览器中

开发完结之后，一切的文件便是这样的了，里边的icon能够依据自己的喜爱去规划或许网上下载。

运用chrome浏览器翻开：chrome://extensions/ 即可跳转到增加扩展程序页面。

翻开右上角的开发者形式
点击加载已解压的扩展程序
挑选自己的chrome标签页项目目录即可

总结一下

为了让心爱的 TA 高兴，作为程序员的咱们可谓是煞费苦心呀！！

在给目标装置插件的时分，发现了一个小问题，或许是chrome版别原因，导致jquery的cdn无法直接引证，所以或许需求手动把jquery保存到项目文件中，然后在manifest.json装备js的当地把jquery的js加上即可。

码上中我现已把jquery的代码、canvas的代码、核算纪念日的代码都放进去了，能够直接复制到自己项目中哦！！！

七夕节快到了，祝福全国有情人终成眷属！

我正在参与「构思开发投稿大赛」概况请看：构思开发大赛来了！

土豪金色的标题

为了时间展现出对 TA 的爱，咱们除了在布景中体现出来之外，还能够再文字中体现出来，所以需求取一个充溢爱意的标题。

<body>
  <canvas id="c" style="position: absolute;z-index: -1;text-align: center;"></canvas> 
  <div class="middle">
    <h1 class="label">Every Day About You</h1>
  </div>
</body>

<style>
  @import url("https://fonts.googleapis.com/css?family=Aleo");
  :root {
    font-family: "Aleo", sans-serif;
  }
  html,
  body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
  }
  .middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    user-select: none;
  }
  .label {
    font-size: 2.2rem;
    background: url("text_bg.png");
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: moveBg 30s linear infinite;
  }
  @keyframes moveBg {
    0% {
      background-position: 0% 30%;
    }
    100% {
      background-position: 1000% 500%;
    }
  }
</style>

这儿引入了googleapis中的字体款式。
给label一个布景，并运用了动画作用。

这个便是文字后边的静态图片，能够另存为然后运用的哦~

百度搜索框

关于你心爱的 TA 来说，不论干什么估量都得用百度直接搜出来，就算是看个优酷、微博都不会记住域名，都会直接去百度一下，所以咱们需求在标签页中直接集成百度搜索。让 TA 能够高枕无忧的搜索想要的东西。

因为现在百度搜索框不能直接去站长东西中获取了，所以咱们能够参阅标签页插件中的百度搜索框。

依据的标签页插件咱们能够发现，输入成果之后，直接跳转到百度的网址，并在url后边携带了一个 wd 的参数，wd 也便是咱们输入的内容了。

www.baidu.com/s?wd=这儿是输入的…

<div class="search">
  <input id="input" type="text">
  <button>百度一下</button>
</div>

<script>
  var input = document.getElementById("input")
  var btn = document.querySelector('button')
  btn.addEventListener('click', function () {
    location.href = 'http://www.baidu.com/s?wd=' + input.value
  })
</script>

.search {
  width: 750px;
  height: 50px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-content: center;
  min-width: 750px;
  position: relative;
}
input {
  width: 550px;
  height: 40px;
  border-right: none;
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;
  border-color: #f5f5f5;
  /* 去除搜索框激活状况的边框 */
  outline: none;
}
input:hover {
  /* 鼠标移入状况 */
  box-shadow: 2px 2px 2px #ccc;
}
input:focus {
  /* 选中状况,边框色彩改变 */
  border-color: rgb(78, 110, 242);
}
.search span {
  position: absolute;
  font-size: 23px;
  top: 10px;
  right: 170px;
}
.search span:hover {
  color: rgb(78, 110, 242);
}
button {
  width: 100px;
  height: 44px;
  background-color: rgb(78, 110, 242);
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  border-color: rgb(78, 110, 242);
  color: white;
  font-size: 14px;
}

关于 TA

这儿能够放置你们之间的一些生日，纪念日等等，也能够放置你想放置的任何浪漫，典礼感满满~

假如你不记得两个人之间的纪念日，那就换其他的日子吧。比方你和 TA 闺蜜的纪念日也能够。

<body>
  <canvas id="c" style="position: absolute;z-index: -1;text-align: center;"></canvas> 
  <div class="middle">
    <h1 class="label">Every Day About You</h1>
    <div class="time">
      <span>
        <div id="d">
          00
        </div>
        Love day
      </span> <span>
        <div id="h">
          00
        </div>
        First Met
      </span> <span>
        <div id="m">
          00
        </div>
        birthday
      </span> <span>
        <div id="s">
          00
        </div>
        age
      </span>
    </div>
  </div>
  <script type="text/javascript" src="demo.js"></script>
</body>

这儿我界说了四个日期，爱情纪念日、相识纪念日、TA 的生日、TA 的年纪。
在页面最终引证了一个js文件，主要是等候页面烘托完结之后调用js去核算日期的逻辑。

爱情纪念日

var date1 = new Date('2019-10-07')
var date2 = new Date()
var s1 = date1.getTime(),
  s2 = date2.getTime();
var total = (s2 - s1) / 1000;
var day = parseInt(total / (24 * 60 * 60)); //核算整数天数
const d = document.getElementById("d");
d.innerHTML = getTrueNumber(day);

相识纪念日

var date1 = new Date('2019-09-20')
var date2 = new Date()
var s1 = date1.getTime(),
  s2 = date2.getTime();
var total = (s2 - s1) / 1000;
var day = parseInt(total / (24 * 60 * 60)); //核算整数天数
h.innerHTML = getTrueNumber(day);

公共办法(将核算出来的日子转为绝对值)

const getTrueNumber = x => (x < 0 ? Math.abs(x) : x);

因为生日和年纪的核算代码有些多，所以放在码上中展现了。

增加到chrome浏览器中

开发完结之后，一切的文件便是这样的了，里边的icon能够依据自己的喜爱去规划或许网上下载。

运用chrome浏览器翻开：chrome://extensions/ 即可跳转到增加扩展程序页面。

翻开右上角的开发者形式
点击加载已解压的扩展程序
挑选自己的chrome标签页项目目录即可

总结一下

为了让心爱的 TA 高兴，作为程序员的咱们可谓是煞费苦心呀！！

在给目标装置插件的时分，发现了一个小问题，或许是chrome版别原因，导致jquery的cdn无法直接引证，所以或许需求手动把jquery保存到项目文件中，然后在manifest.json装备js的当地把jquery的js加上即可。

码上中我现已把jquery的代码、canvas的代码、核算纪念日的代码都放进去了，能够直接复制到自己项目中哦！！！

七夕节快到了，祝福全国有情人终成眷属！

我正在参与「构思开发投稿大赛」概况请看：构思开发大赛来了！

这个便是文字后边的静态图片，能够另存为然后运用的哦~

百度搜索框

关于你心爱的 TA 来说，不论干什么估量都得用百度直接搜出来，就算是看个优酷、微博都不会记住域名，都会直接去百度一下，所以咱们需求在标签页中直接集成百度搜索。让 TA 能够高枕无忧的搜索想要的东西。

因为现在百度搜索框不能直接去站长东西中获取了，所以咱们能够参阅标签页插件中的百度搜索框。

依据的标签页插件咱们能够发现，输入成果之后，直接跳转到百度的网址，并在url后边携带了一个 wd 的参数，wd 也便是咱们输入的内容了。

www.baidu.com/s?wd=这儿是输入的…

<div class="search">
  <input id="input" type="text">
  <button>百度一下</button>
</div>

<script>
  var input = document.getElementById("input")
  var btn = document.querySelector('button')
  btn.addEventListener('click', function () {
    location.href = 'http://www.baidu.com/s?wd=' + input.value
  })
</script>

.search {
  width: 750px;
  height: 50px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-content: center;
  min-width: 750px;
  position: relative;
}
input {
  width: 550px;
  height: 40px;
  border-right: none;
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;
  border-color: #f5f5f5;
  /* 去除搜索框激活状况的边框 */
  outline: none;
}
input:hover {
  /* 鼠标移入状况 */
  box-shadow: 2px 2px 2px #ccc;
}
input:focus {
  /* 选中状况,边框色彩改变 */
  border-color: rgb(78, 110, 242);
}
.search span {
  position: absolute;
  font-size: 23px;
  top: 10px;
  right: 170px;
}
.search span:hover {
  color: rgb(78, 110, 242);
}
button {
  width: 100px;
  height: 44px;
  background-color: rgb(78, 110, 242);
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  border-color: rgb(78, 110, 242);
  color: white;
  font-size: 14px;
}

关于 TA

这儿能够放置你们之间的一些生日，纪念日等等，也能够放置你想放置的任何浪漫，典礼感满满~

假如你不记得两个人之间的纪念日，那就换其他的日子吧。比方你和 TA 闺蜜的纪念日也能够。

<body>
  <canvas id="c" style="position: absolute;z-index: -1;text-align: center;"></canvas> 
  <div class="middle">
    <h1 class="label">Every Day About You</h1>
    <div class="time">
      <span>
        <div id="d">
          00
        </div>
        Love day
      </span> <span>
        <div id="h">
          00
        </div>
        First Met
      </span> <span>
        <div id="m">
          00
        </div>
        birthday
      </span> <span>
        <div id="s">
          00
        </div>
        age
      </span>
    </div>
  </div>
  <script type="text/javascript" src="demo.js"></script>
</body>

这儿我界说了四个日期，爱情纪念日、相识纪念日、TA 的生日、TA 的年纪。
在页面最终引证了一个js文件，主要是等候页面烘托完结之后调用js去核算日期的逻辑。

爱情纪念日

var date1 = new Date('2019-10-07')
var date2 = new Date()
var s1 = date1.getTime(),
  s2 = date2.getTime();
var total = (s2 - s1) / 1000;
var day = parseInt(total / (24 * 60 * 60)); //核算整数天数
const d = document.getElementById("d");
d.innerHTML = getTrueNumber(day);

相识纪念日

var date1 = new Date('2019-09-20')
var date2 = new Date()
var s1 = date1.getTime(),
  s2 = date2.getTime();
var total = (s2 - s1) / 1000;
var day = parseInt(total / (24 * 60 * 60)); //核算整数天数
h.innerHTML = getTrueNumber(day);

公共办法(将核算出来的日子转为绝对值)

const getTrueNumber = x => (x < 0 ? Math.abs(x) : x);

因为生日和年纪的核算代码有些多，所以放在码上中展现了。

增加到chrome浏览器中

开发完结之后，一切的文件便是这样的了，里边的icon能够依据自己的喜爱去规划或许网上下载。

运用chrome浏览器翻开：chrome://extensions/ 即可跳转到增加扩展程序页面。

翻开右上角的开发者形式
点击加载已解压的扩展程序
挑选自己的chrome标签页项目目录即可

总结一下

为了让心爱的 TA 高兴，作为程序员的咱们可谓是煞费苦心呀！！

在给目标装置插件的时分，发现了一个小问题，或许是chrome版别原因，导致jquery的cdn无法直接引证，所以或许需求手动把jquery保存到项目文件中，然后在manifest.json装备js的当地把jquery的js加上即可。

码上中我现已把jquery的代码、canvas的代码、核算纪念日的代码都放进去了，能够直接复制到自己项目中哦！！！

七夕节快到了，祝福全国有情人终成眷属！

我正在参与「构思开发投稿大赛」概况请看：构思开发大赛来了！

这个便是文字后边的静态图片，能够另存为然后运用的哦~

百度搜索框

关于你心爱的 TA 来说，不论干什么估量都得用百度直接搜出来，就算是看个优酷、微博都不会记住域名，都会直接去百度一下，所以咱们需求在标签页中直接集成百度搜索。让 TA 能够高枕无忧的搜索想要的东西。

因为现在百度搜索框不能直接去站长东西中获取了，所以咱们能够参阅标签页插件中的百度搜索框。

依据的标签页插件咱们能够发现，输入成果之后，直接跳转到百度的网址，并在url后边携带了一个 wd 的参数，wd 也便是咱们输入的内容了。

www.baidu.com/s?wd=这儿是输入的…

<div class="search">
  <input id="input" type="text">
  <button>百度一下</button>
</div>

<script>
  var input = document.getElementById("input")
  var btn = document.querySelector('button')
  btn.addEventListener('click', function () {
    location.href = 'http://www.baidu.com/s?wd=' + input.value
  })
</script>

.search {
  width: 750px;
  height: 50px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-content: center;
  min-width: 750px;
  position: relative;
}
input {
  width: 550px;
  height: 40px;
  border-right: none;
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;
  border-color: #f5f5f5;
  /* 去除搜索框激活状况的边框 */
  outline: none;
}
input:hover {
  /* 鼠标移入状况 */
  box-shadow: 2px 2px 2px #ccc;
}
input:focus {
  /* 选中状况,边框色彩改变 */
  border-color: rgb(78, 110, 242);
}
.search span {
  position: absolute;
  font-size: 23px;
  top: 10px;
  right: 170px;
}
.search span:hover {
  color: rgb(78, 110, 242);
}
button {
  width: 100px;
  height: 44px;
  background-color: rgb(78, 110, 242);
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  border-color: rgb(78, 110, 242);
  color: white;
  font-size: 14px;
}

关于 TA

这儿能够放置你们之间的一些生日，纪念日等等，也能够放置你想放置的任何浪漫，典礼感满满~

假如你不记得两个人之间的纪念日，那就换其他的日子吧。比方你和 TA 闺蜜的纪念日也能够。

<body>
  <canvas id="c" style="position: absolute;z-index: -1;text-align: center;"></canvas> 
  <div class="middle">
    <h1 class="label">Every Day About You</h1>
    <div class="time">
      <span>
        <div id="d">
          00
        </div>
        Love day
      </span> <span>
        <div id="h">
          00
        </div>
        First Met
      </span> <span>
        <div id="m">
          00
        </div>
        birthday
      </span> <span>
        <div id="s">
          00
        </div>
        age
      </span>
    </div>
  </div>
  <script type="text/javascript" src="demo.js"></script>
</body>

这儿我界说了四个日期，爱情纪念日、相识纪念日、TA 的生日、TA 的年纪。
在页面最终引证了一个js文件，主要是等候页面烘托完结之后调用js去核算日期的逻辑。

爱情纪念日

var date1 = new Date('2019-10-07')
var date2 = new Date()
var s1 = date1.getTime(),
  s2 = date2.getTime();
var total = (s2 - s1) / 1000;
var day = parseInt(total / (24 * 60 * 60)); //核算整数天数
const d = document.getElementById("d");
d.innerHTML = getTrueNumber(day);

相识纪念日

var date1 = new Date('2019-09-20')
var date2 = new Date()
var s1 = date1.getTime(),
  s2 = date2.getTime();
var total = (s2 - s1) / 1000;
var day = parseInt(total / (24 * 60 * 60)); //核算整数天数
h.innerHTML = getTrueNumber(day);

公共办法(将核算出来的日子转为绝对值)

const getTrueNumber = x => (x < 0 ? Math.abs(x) : x);

因为生日和年纪的核算代码有些多，所以放在码上中展现了。

增加到chrome浏览器中

开发完结之后，一切的文件便是这样的了，里边的icon能够依据自己的喜爱去规划或许网上下载。

运用chrome浏览器翻开：chrome://extensions/ 即可跳转到增加扩展程序页面。

翻开右上角的开发者形式
点击加载已解压的扩展程序
挑选自己的chrome标签页项目目录即可

总结一下

为了让心爱的 TA 高兴，作为程序员的咱们可谓是煞费苦心呀！！

在给目标装置插件的时分，发现了一个小问题，或许是chrome版别原因，导致jquery的cdn无法直接引证，所以或许需求手动把jquery保存到项目文件中，然后在manifest.json装备js的当地把jquery的js加上即可。

码上中我现已把jquery的代码、canvas的代码、核算纪念日的代码都放进去了，能够直接复制到自己项目中哦！！！

七夕节快到了，祝福全国有情人终成眷属！

我正在参与「构思开发投稿大赛」概况请看：构思开发大赛来了！

这个便是文字后边的静态图片，能够另存为然后运用的哦~

百度搜索框

关于你心爱的 TA 来说，不论干什么估量都得用百度直接搜出来，就算是看个优酷、微博都不会记住域名，都会直接去百度一下，所以咱们需求在标签页中直接集成百度搜索。让 TA 能够高枕无忧的搜索想要的东西。

因为现在百度搜索框不能直接去站长东西中获取了，所以咱们能够参阅标签页插件中的百度搜索框。

依据的标签页插件咱们能够发现，输入成果之后，直接跳转到百度的网址，并在url后边携带了一个 wd 的参数，wd 也便是咱们输入的内容了。

www.baidu.com/s?wd=这儿是输入的…

<div class="search">
  <input id="input" type="text">
  <button>百度一下</button>
</div>

<script>
  var input = document.getElementById("input")
  var btn = document.querySelector('button')
  btn.addEventListener('click', function () {
    location.href = 'http://www.baidu.com/s?wd=' + input.value
  })
</script>

.search {
  width: 750px;
  height: 50px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-content: center;
  min-width: 750px;
  position: relative;
}
input {
  width: 550px;
  height: 40px;
  border-right: none;
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;
  border-color: #f5f5f5;
  /* 去除搜索框激活状况的边框 */
  outline: none;
}
input:hover {
  /* 鼠标移入状况 */
  box-shadow: 2px 2px 2px #ccc;
}
input:focus {
  /* 选中状况,边框色彩改变 */
  border-color: rgb(78, 110, 242);
}
.search span {
  position: absolute;
  font-size: 23px;
  top: 10px;
  right: 170px;
}
.search span:hover {
  color: rgb(78, 110, 242);
}
button {
  width: 100px;
  height: 44px;
  background-color: rgb(78, 110, 242);
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  border-color: rgb(78, 110, 242);
  color: white;
  font-size: 14px;
}

关于 TA

这儿能够放置你们之间的一些生日，纪念日等等，也能够放置你想放置的任何浪漫，典礼感满满~

假如你不记得两个人之间的纪念日，那就换其他的日子吧。比方你和 TA 闺蜜的纪念日也能够。

<body>
  <canvas id="c" style="position: absolute;z-index: -1;text-align: center;"></canvas> 
  <div class="middle">
    <h1 class="label">Every Day About You</h1>
    <div class="time">
      <span>
        <div id="d">
          00
        </div>
        Love day
      </span> <span>
        <div id="h">
          00
        </div>
        First Met
      </span> <span>
        <div id="m">
          00
        </div>
        birthday
      </span> <span>
        <div id="s">
          00
        </div>
        age
      </span>
    </div>
  </div>
  <script type="text/javascript" src="demo.js"></script>
</body>

这儿我界说了四个日期，爱情纪念日、相识纪念日、TA 的生日、TA 的年纪。
在页面最终引证了一个js文件，主要是等候页面烘托完结之后调用js去核算日期的逻辑。

爱情纪念日

var date1 = new Date('2019-10-07')
var date2 = new Date()
var s1 = date1.getTime(),
  s2 = date2.getTime();
var total = (s2 - s1) / 1000;
var day = parseInt(total / (24 * 60 * 60)); //核算整数天数
const d = document.getElementById("d");
d.innerHTML = getTrueNumber(day);

相识纪念日

var date1 = new Date('2019-09-20')
var date2 = new Date()
var s1 = date1.getTime(),
  s2 = date2.getTime();
var total = (s2 - s1) / 1000;
var day = parseInt(total / (24 * 60 * 60)); //核算整数天数
h.innerHTML = getTrueNumber(day);

公共办法(将核算出来的日子转为绝对值)

const getTrueNumber = x => (x < 0 ? Math.abs(x) : x);

因为生日和年纪的核算代码有些多，所以放在码上中展现了。

增加到chrome浏览器中

开发完结之后，一切的文件便是这样的了，里边的icon能够依据自己的喜爱去规划或许网上下载。

运用chrome浏览器翻开：chrome://extensions/ 即可跳转到增加扩展程序页面。

翻开右上角的开发者形式
点击加载已解压的扩展程序
挑选自己的chrome标签页项目目录即可

总结一下

为了让心爱的 TA 高兴，作为程序员的咱们可谓是煞费苦心呀！！

在给目标装置插件的时分，发现了一个小问题，或许是chrome版别原因，导致jquery的cdn无法直接引证，所以或许需求手动把jquery保存到项目文件中，然后在manifest.json装备js的当地把jquery的js加上即可。

码上中我现已把jquery的代码、canvas的代码、核算纪念日的代码都放进去了，能够直接复制到自己项目中哦！！！

七夕节快到了，祝福全国有情人终成眷属！

我正在参与「构思开发投稿大赛」概况请看：构思开发大赛来了！

百度搜索框

关于你心爱的 TA 来说，不论干什么估量都得用百度直接搜出来，就算是看个优酷、微博都不会记住域名，都会直接去百度一下，所以咱们需求在标签页中直接集成百度搜索。让 TA 能够高枕无忧的搜索想要的东西。

因为现在百度搜索框不能直接去站长东西中获取了，所以咱们能够参阅标签页插件中的百度搜索框。

依据的标签页插件咱们能够发现，输入成果之后，直接跳转到百度的网址，并在url后边携带了一个 wd 的参数，wd 也便是咱们输入的内容了。

www.baidu.com/s?wd=这儿是输入的…

<div class="search">
  <input id="input" type="text">
  <button>百度一下</button>
</div>

<script>
  var input = document.getElementById("input")
  var btn = document.querySelector('button')
  btn.addEventListener('click', function () {
    location.href = 'http://www.baidu.com/s?wd=' + input.value
  })
</script>

.search {
  width: 750px;
  height: 50px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-content: center;
  min-width: 750px;
  position: relative;
}
input {
  width: 550px;
  height: 40px;
  border-right: none;
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;
  border-color: #f5f5f5;
  /* 去除搜索框激活状况的边框 */
  outline: none;
}
input:hover {
  /* 鼠标移入状况 */
  box-shadow: 2px 2px 2px #ccc;
}
input:focus {
  /* 选中状况,边框色彩改变 */
  border-color: rgb(78, 110, 242);
}
.search span {
  position: absolute;
  font-size: 23px;
  top: 10px;
  right: 170px;
}
.search span:hover {
  color: rgb(78, 110, 242);
}
button {
  width: 100px;
  height: 44px;
  background-color: rgb(78, 110, 242);
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  border-color: rgb(78, 110, 242);
  color: white;
  font-size: 14px;
}

关于 TA

这儿能够放置你们之间的一些生日，纪念日等等，也能够放置你想放置的任何浪漫，典礼感满满~

假如你不记得两个人之间的纪念日，那就换其他的日子吧。比方你和 TA 闺蜜的纪念日也能够。

<body>
  <canvas id="c" style="position: absolute;z-index: -1;text-align: center;"></canvas> 
  <div class="middle">
    <h1 class="label">Every Day About You</h1>
    <div class="time">
      <span>
        <div id="d">
          00
        </div>
        Love day
      </span> <span>
        <div id="h">
          00
        </div>
        First Met
      </span> <span>
        <div id="m">
          00
        </div>
        birthday
      </span> <span>
        <div id="s">
          00
        </div>
        age
      </span>
    </div>
  </div>
  <script type="text/javascript" src="demo.js"></script>
</body>

这儿我界说了四个日期，爱情纪念日、相识纪念日、TA 的生日、TA 的年纪。
在页面最终引证了一个js文件，主要是等候页面烘托完结之后调用js去核算日期的逻辑。

爱情纪念日

var date1 = new Date('2019-10-07')
var date2 = new Date()
var s1 = date1.getTime(),
  s2 = date2.getTime();
var total = (s2 - s1) / 1000;
var day = parseInt(total / (24 * 60 * 60)); //核算整数天数
const d = document.getElementById("d");
d.innerHTML = getTrueNumber(day);

相识纪念日

var date1 = new Date('2019-09-20')
var date2 = new Date()
var s1 = date1.getTime(),
  s2 = date2.getTime();
var total = (s2 - s1) / 1000;
var day = parseInt(total / (24 * 60 * 60)); //核算整数天数
h.innerHTML = getTrueNumber(day);

公共办法(将核算出来的日子转为绝对值)

const getTrueNumber = x => (x < 0 ? Math.abs(x) : x);

因为生日和年纪的核算代码有些多，所以放在码上中展现了。

增加到chrome浏览器中

开发完结之后，一切的文件便是这样的了，里边的icon能够依据自己的喜爱去规划或许网上下载。

运用chrome浏览器翻开：chrome://extensions/ 即可跳转到增加扩展程序页面。

翻开右上角的开发者形式
点击加载已解压的扩展程序
挑选自己的chrome标签页项目目录即可

总结一下

为了让心爱的 TA 高兴，作为程序员的咱们可谓是煞费苦心呀！！

在给目标装置插件的时分，发现了一个小问题，或许是chrome版别原因，导致jquery的cdn无法直接引证，所以或许需求手动把jquery保存到项目文件中，然后在manifest.json装备js的当地把jquery的js加上即可。

码上中我现已把jquery的代码、canvas的代码、核算纪念日的代码都放进去了，能够直接复制到自己项目中哦！！！

七夕节快到了，祝福全国有情人终成眷属！

我正在参与「构思开发投稿大赛」概况请看：构思开发大赛来了！

百度搜索框

关于你心爱的 TA 来说，不论干什么估量都得用百度直接搜出来，就算是看个优酷、微博都不会记住域名，都会直接去百度一下，所以咱们需求在标签页中直接集成百度搜索。让 TA 能够高枕无忧的搜索想要的东西。

因为现在百度搜索框不能直接去站长东西中获取了，所以咱们能够参阅标签页插件中的百度搜索框。

依据的标签页插件咱们能够发现，输入成果之后，直接跳转到百度的网址，并在url后边携带了一个 wd 的参数，wd 也便是咱们输入的内容了。

www.baidu.com/s?wd=这儿是输入的…

<div class="search">
  <input id="input" type="text">
  <button>百度一下</button>
</div>

<script>
  var input = document.getElementById("input")
  var btn = document.querySelector('button')
  btn.addEventListener('click', function () {
    location.href = 'http://www.baidu.com/s?wd=' + input.value
  })
</script>

.search {
  width: 750px;
  height: 50px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-content: center;
  min-width: 750px;
  position: relative;
}
input {
  width: 550px;
  height: 40px;
  border-right: none;
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;
  border-color: #f5f5f5;
  /* 去除搜索框激活状况的边框 */
  outline: none;
}
input:hover {
  /* 鼠标移入状况 */
  box-shadow: 2px 2px 2px #ccc;
}
input:focus {
  /* 选中状况,边框色彩改变 */
  border-color: rgb(78, 110, 242);
}
.search span {
  position: absolute;
  font-size: 23px;
  top: 10px;
  right: 170px;
}
.search span:hover {
  color: rgb(78, 110, 242);
}
button {
  width: 100px;
  height: 44px;
  background-color: rgb(78, 110, 242);
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  border-color: rgb(78, 110, 242);
  color: white;
  font-size: 14px;
}

关于 TA

这儿能够放置你们之间的一些生日，纪念日等等，也能够放置你想放置的任何浪漫，典礼感满满~

假如你不记得两个人之间的纪念日，那就换其他的日子吧。比方你和 TA 闺蜜的纪念日也能够。

<body>
  <canvas id="c" style="position: absolute;z-index: -1;text-align: center;"></canvas> 
  <div class="middle">
    <h1 class="label">Every Day About You</h1>
    <div class="time">
      <span>
        <div id="d">
          00
        </div>
        Love day
      </span> <span>
        <div id="h">
          00
        </div>
        First Met
      </span> <span>
        <div id="m">
          00
        </div>
        birthday
      </span> <span>
        <div id="s">
          00
        </div>
        age
      </span>
    </div>
  </div>
  <script type="text/javascript" src="demo.js"></script>
</body>

这儿我界说了四个日期，爱情纪念日、相识纪念日、TA 的生日、TA 的年纪。
在页面最终引证了一个js文件，主要是等候页面烘托完结之后调用js去核算日期的逻辑。

爱情纪念日

var date1 = new Date('2019-10-07')
var date2 = new Date()
var s1 = date1.getTime(),
  s2 = date2.getTime();
var total = (s2 - s1) / 1000;
var day = parseInt(total / (24 * 60 * 60)); //核算整数天数
const d = document.getElementById("d");
d.innerHTML = getTrueNumber(day);

相识纪念日

var date1 = new Date('2019-09-20')
var date2 = new Date()
var s1 = date1.getTime(),
  s2 = date2.getTime();
var total = (s2 - s1) / 1000;
var day = parseInt(total / (24 * 60 * 60)); //核算整数天数
h.innerHTML = getTrueNumber(day);

公共办法(将核算出来的日子转为绝对值)

const getTrueNumber = x => (x < 0 ? Math.abs(x) : x);

因为生日和年纪的核算代码有些多，所以放在码上中展现了。

增加到chrome浏览器中

开发完结之后，一切的文件便是这样的了，里边的icon能够依据自己的喜爱去规划或许网上下载。

运用chrome浏览器翻开：chrome://extensions/ 即可跳转到增加扩展程序页面。

翻开右上角的开发者形式
点击加载已解压的扩展程序
挑选自己的chrome标签页项目目录即可

总结一下

为了让心爱的 TA 高兴，作为程序员的咱们可谓是煞费苦心呀！！

在给目标装置插件的时分，发现了一个小问题，或许是chrome版别原因，导致jquery的cdn无法直接引证，所以或许需求手动把jquery保存到项目文件中，然后在manifest.json装备js的当地把jquery的js加上即可。

码上中我现已把jquery的代码、canvas的代码、核算纪念日的代码都放进去了，能够直接复制到自己项目中哦！！！

七夕节快到了，祝福全国有情人终成眷属！

我正在参与「构思开发投稿大赛」概况请看：构思开发大赛来了！

因为生日和年纪的核算代码有些多，所以放在码上中展现了。

增加到chrome浏览器中

开发完结之后，一切的文件便是这样的了，里边的icon能够依据自己的喜爱去规划或许网上下载。

运用chrome浏览器翻开：chrome://extensions/ 即可跳转到增加扩展程序页面。

翻开右上角的开发者形式
点击加载已解压的扩展程序
挑选自己的chrome标签页项目目录即可

总结一下

为了让心爱的 TA 高兴，作为程序员的咱们可谓是煞费苦心呀！！

在给目标装置插件的时分，发现了一个小问题，或许是chrome版别原因，导致jquery的cdn无法直接引证，所以或许需求手动把jquery保存到项目文件中，然后在manifest.json装备js的当地把jquery的js加上即可。

码上中我现已把jquery的代码、canvas的代码、核算纪念日的代码都放进去了，能够直接复制到自己项目中哦！！！

七夕节快到了，祝福全国有情人终成眷属！

我正在参与「构思开发投稿大赛」概况请看：构思开发大赛来了！

开发完结之后，一切的文件便是这样的了，里边的icon能够依据自己的喜爱去规划或许网上下载。

运用chrome浏览器翻开：chrome://extensions/ 即可跳转到增加扩展程序页面。

翻开右上角的开发者形式
点击加载已解压的扩展程序
挑选自己的chrome标签页项目目录即可

总结一下

为了让心爱的 TA 高兴，作为程序员的咱们可谓是煞费苦心呀！！

在给目标装置插件的时分，发现了一个小问题，或许是chrome版别原因，导致jquery的cdn无法直接引证，所以或许需求手动把jquery保存到项目文件中，然后在manifest.json装备js的当地把jquery的js加上即可。

码上中我现已把jquery的代码、canvas的代码、核算纪念日的代码都放进去了，能够直接复制到自己项目中哦！！！

七夕节快到了，祝福全国有情人终成眷属！

我正在参与「构思开发投稿大赛」概况请看：构思开发大赛来了！

标签： 手机

条件

总结一下

总结一下

前语

增加到chrome浏览器中

总结一下

前语

百度搜索框

关于 TA

爱情纪念日

相识纪念日

公共办法(将核算出来的日子转为绝对值)

增加到chrome浏览器中

总结一下

前语

百度搜索框

关于 TA

爱情纪念日

相识纪念日

公共办法(将核算出来的日子转为绝对值)

增加到chrome浏览器中

总结一下

前语

土豪金色的标题

百度搜索框

关于 TA

爱情纪念日

相识纪念日

公共办法(将核算出来的日子转为绝对值)

增加到chrome浏览器中

总结一下

前语

HTML布景

canvas

土豪金色的标题

百度搜索框

关于 TA

爱情纪念日

相识纪念日

公共办法(将核算出来的日子转为绝对值)

增加到chrome浏览器中

总结一下

前语

新建HTML和JS

HTML布景

canvas

土豪金色的标题

百度搜索框

关于 TA

爱情纪念日

相识纪念日

公共办法(将核算出来的日子转为绝对值)

增加到chrome浏览器中

总结一下

前语

总结一下

新建HTML和JS

HTML布景

canvas

土豪金色的标题

百度搜索框

关于 TA

爱情纪念日

相识纪念日

公共办法(将核算出来的日子转为绝对值)

增加到chrome浏览器中

总结一下

前语

增加到chrome浏览器中

总结一下

新建HTML和JS

HTML布景

canvas

土豪金色的标题

百度搜索框

关于 TA

爱情纪念日

相识纪念日

公共办法(将核算出来的日子转为绝对值)

标签：手机