【程序员的浪漫】七夕到了，还不快给你女朋友做一个专属chrome插件

前端 0 106
【程序员的浪漫】七夕到了，还不快给你女朋友做一个专属chrome插件

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

【程序员的浪漫】七夕到了，还不快给你女朋友做一个专属chrome插件

总结一下

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

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

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

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

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

【程序员的浪漫】七夕到了，还不快给你女朋友做一个专属chrome插件

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

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

【程序员的浪漫】七夕到了，还不快给你女朋友做一个专属chrome插件

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

【程序员的浪漫】七夕到了，还不快给你女朋友做一个专属chrome插件

总结一下

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

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

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

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

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

【程序员的浪漫】七夕到了，还不快给你女朋友做一个专属chrome插件

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

增加到chrome浏览器中

【程序员的浪漫】七夕到了，还不快给你女朋友做一个专属chrome插件

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

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

【程序员的浪漫】七夕到了，还不快给你女朋友做一个专属chrome插件

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

【程序员的浪漫】七夕到了，还不快给你女朋友做一个专属chrome插件

总结一下

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

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

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

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

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

【程序员的浪漫】七夕到了，还不快给你女朋友做一个专属chrome插件

百度搜索框

关于你心爱的 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插件

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

增加到chrome浏览器中

【程序员的浪漫】七夕到了，还不快给你女朋友做一个专属chrome插件

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

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

【程序员的浪漫】七夕到了，还不快给你女朋友做一个专属chrome插件

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

【程序员的浪漫】七夕到了，还不快给你女朋友做一个专属chrome插件

总结一下

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

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

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

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

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

【程序员的浪漫】七夕到了，还不快给你女朋友做一个专属chrome插件

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

【程序员的浪漫】七夕到了，还不快给你女朋友做一个专属chrome插件

百度搜索框

关于你心爱的 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插件

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

增加到chrome浏览器中

【程序员的浪漫】七夕到了，还不快给你女朋友做一个专属chrome插件

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

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

【程序员的浪漫】七夕到了，还不快给你女朋友做一个专属chrome插件

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

【程序员的浪漫】七夕到了，还不快给你女朋友做一个专属chrome插件

总结一下

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

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

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

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

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

【程序员的浪漫】七夕到了，还不快给你女朋友做一个专属chrome插件

土豪金色的标题

为了时间展现出对 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一个布景，并运用了动画作用。

【程序员的浪漫】七夕到了，还不快给你女朋友做一个专属chrome插件

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

【程序员的浪漫】七夕到了，还不快给你女朋友做一个专属chrome插件

百度搜索框

关于你心爱的 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插件

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

增加到chrome浏览器中

【程序员的浪漫】七夕到了，还不快给你女朋友做一个专属chrome插件

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

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

【程序员的浪漫】七夕到了，还不快给你女朋友做一个专属chrome插件

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

【程序员的浪漫】七夕到了，还不快给你女朋友做一个专属chrome插件

总结一下

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

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

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

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

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

【程序员的浪漫】七夕到了，还不快给你女朋友做一个专属chrome插件

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办法

【程序员的浪漫】七夕到了，还不快给你女朋友做一个专属chrome插件

土豪金色的标题

为了时间展现出对 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一个布景，并运用了动画作用。

【程序员的浪漫】七夕到了，还不快给你女朋友做一个专属chrome插件

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

【程序员的浪漫】七夕到了，还不快给你女朋友做一个专属chrome插件

百度搜索框

关于你心爱的 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插件

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

增加到chrome浏览器中

【程序员的浪漫】七夕到了，还不快给你女朋友做一个专属chrome插件

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

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

【程序员的浪漫】七夕到了，还不快给你女朋友做一个专属chrome插件

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

【程序员的浪漫】七夕到了，还不快给你女朋友做一个专属chrome插件

总结一下

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

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

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

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

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

【程序员的浪漫】七夕到了，还不快给你女朋友做一个专属chrome插件

新建HTML和JS

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

【程序员的浪漫】七夕到了，还不快给你女朋友做一个专属chrome插件

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办法

【程序员的浪漫】七夕到了，还不快给你女朋友做一个专属chrome插件

土豪金色的标题

为了时间展现出对 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一个布景，并运用了动画作用。

【程序员的浪漫】七夕到了，还不快给你女朋友做一个专属chrome插件

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

【程序员的浪漫】七夕到了，还不快给你女朋友做一个专属chrome插件

百度搜索框

关于你心爱的 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插件

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

增加到chrome浏览器中

【程序员的浪漫】七夕到了，还不快给你女朋友做一个专属chrome插件

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

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

【程序员的浪漫】七夕到了，还不快给你女朋友做一个专属chrome插件

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

【程序员的浪漫】七夕到了，还不快给你女朋友做一个专属chrome插件

总结一下

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

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

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

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

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