【前端库】favico.js 浏览器消息提示 【待更新】
前言
在你的导航栏定义图标。可以使用动画作为您的图标。您可以自定义动画的类型，位置，背景颜色和文字颜色。你可以做来消息了，就可以这么做。
地址
官方地址： http://lab.ejci.net/favico.js/
cdn地址： http://www.bootcdn.cn/favico.js/
GitHub 地址：https://github.com/ejci/favico.js
案例单击我
api
| 方法或属性 | 默认值 | 方法说明 |
|---|---|---|
| bgColor | #d00 | 设置消息的背景颜色 |
| textColor | #fff | 设置字体颜色 |
| fontFamily | sans-serif | 设置字体的字体样式（黑体、宋体等） |
| fontStyle | bold | 字体加粗(normal, italic, oblique, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900) |
| type | circle | 圆角还是正方形 (circle, rectangle) |
| position | down | 消息的定位位置 (up, down, left, upleft) |
| animation | slide | 动画效果 (slide, fade, pop, popFade, none ) |
| elementId | false | 如果不使用字体的话，那么使用图标ID来标记了。 |
| element | false | 改变link标签中的图标使用的href。 |
| dataUrl | false | 可以使用URL带参数来执行动画效果。 |
使用
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>title>
<link rel="shortcut icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHYAAADICAYAAAA9ZxUUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6N0U5OUNBRTUxRDFGMTFFODlCRERCODZEOTBDNzBEMzgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6N0U5OUNBRTYxRDFGMTFFODlCRERCODZEOTBDNzBEMzgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3RTk5Q0FFMzFEMUYxMUU4OUJEREI4NkQ5MEM3MEQzOCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3RTk5Q0FFNDFEMUYxMUU4OUJEREI4NkQ5MEM3MEQzOCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pt+eLaQAABrjSURBVHja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"/>
<link rel="stylesheet" class="iconfont" type="text/css" href="//at.alicdn.com/t/font_587152_my5q8yfp0hwa5rk9.css">
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.h1 {
text-align: center;
font-size: 22px;
color: #FFFD40;
background-color: #000;
margin-bottom: 12px;
}
.box {
min-width: 720px;
max-width: 1200px;
margin: 0 auto;
}
.lists {
list-style: none;
margin: 12px 0;
}
.lists div {
display: inline-block;
}
.color {
width: 120px;
height: 34px;
border: 1px solid #ccc;
}
.imgs {
margin: 0 auto;
display: block;
}
.btn {
padding: 0 12px;
border: 1px solid #222;
display: inline-block;
border-radius: 8px;
cursor: pointer;
transition: background-color .4s linear;
}
.btn:hover {
background-color: #333;
color: #fff;
}
.lists .iconfont:hover {
color: teal;
cursor: pointer;
}
style>
head>
<body>
<h1 class="h1">按图中的图片，看自己浏览器中的地方h1>
<img class="imgs" src="https://wx2.sinaimg.cn/mw690/e7e107c3ly1fp8nhk3u8dj20im02eaab.jpg">
<div class="box">
<ol>
<li class="lists">
<span>背景颜色：span>
<input class="jscolor color" value="d00" onchange="bg(this)">
li>
<li class="lists">
<span>字体颜色：span>
<input class="jscolor color" value="fff" onchange="fontcolor(this)">
li>
<li class="lists">
<span>字体样式：span>
<select class="lists-section color" onchange="fontfamily(this.value)">
<option value="SimSun">宋体option>
<option value="SimHei">黑体option>
<option value="Arial">Arialoption>
<option value="Verdana">Verdanaoption>
<option value="serif">serifoption>
select>
li>
<li class="lists">
<span>字体加粗：span>
<select class="lists-section color" onchange="fontstyle(this.value)">
<option value="normal">normaloption>
<option value="italic">italicoption>
<option value="oblique">obliqueoption>
<option value="bold">boldoption>
<option value="bolder">bolderoption>
<option value="lighter">lighteroption>
<option value="100">100option>
<option value="200">200option>
<option value="300">300option>
<option value="400">400option>
<option value="500">500option>
<option value="600">600option>
<option value="700">700option>
<option value="800">800option>
<option value="900">900option>
select>
li>
<li class="lists">
<span>圆角或者正方形：span>
<select class="lists-section color" onchange="typed(this.value)">
<option value="circle">circleoption>
<option value="rectangle">rectangleoption>
select>
li>
<li class="lists">
<span>位置：span>
<select class="lists-section color" onchange="positions(this.value)">
<option value="down">downoption>
<option value="up">upoption>
<option value="left">leftoption>
<option value="upleft">upleftoption>
select>
li>
<li class="lists">
<span>动画：span>
<select class="lists-section color" onchange="positions(this.value)">
<option value="slide">slideoption>
<option value="fade">fadeoption>
<option value="pop">popoption>
<option value="popFade">popFadeoption>
<option value="none">noneoption>
select>
li>
<li class="lists">
<span>设置字体图标：这里本人已经失败了，分析了下，可能是字体不一样吧span>
<span onclick="fonticon('\\\ e614')" class="iconfont icon-shengyin">span>
<span onclick="fonticon('\\\ e6a2')" class="iconfont icon-map">span>
<span onclick="fonticon('\\\ e62c')" class="iconfont icon-iconfontriyongbaihuo">span>
<span onclick="fonticon('\\\ e630')" class="iconfont icon-deshengyinvoice21">span>
<span onclick="fonticon('\\\ e620')" class="iconfont icon-wxbsousuotuiguang">span>
<span onclick="fonticon('\\\ e619')" class="iconfont icon-wxbbiaowang">span>
li>
<li class="lists">
<span>请单击消息个数：span>
<div onclick="btn(1)" class="btn">+div>
<div onclick="btn(2)" class="btn">-div>
li>
ol>
<div class="btns">
<div class="btn">取消消息div>
<div class="btn">消息div>
<div class="btn">开启摄像头div>
div>
div>
<script src="https://cdn.bootcss.com/jscolor/2.0.4/jscolor.js">script>
<script src="https://cdn.bootcss.com/favico.js/0.3.10/favico.min.js">script>
<script type="text/javascript">
var bgColor="#d00",textColor="#fff",fontFamily="SimSun",fontStyle="",types="circle",position="down",animation="slide";
var boo = true;
var num = 1;
var favicon = null;
function bg (color) {
//favicon.bgColor(color);
bgColor = "#"+color.jscolor.valueElement.value;
badge();
}
function fontcolor (color) {
textColor = "#"+color.jscolor.valueElement.value;
badge();
}
function fontfamily (val) {
fontFamily = val;
badge();
}
function fontstyle (val) {
fontStyle = val;
badge();
}
function typed (val) {
types = val;
badge();
}
function positions (val) {
position = val;
badge();
}
function animations (val) {
position = val;
badge();
}
// 切换字体图标，失败啊
function fonticon (fontNum) {
// %5C
num = fontNum;
console.log(num)
badge();
}
// 进行运算消息个数
function btn (numS) {
if(numS==1 && typeof num== "number"){
if (num<=99) {
num++;
if(favicon==null){
badge();
}else {
favicon.badge(num);
}
}
}else if( typeof num== "number") {
if (num>0) {
num--;
if(favicon==null){
badge();
}else {
favicon.badge(num);
}
}
}else {
num=1;
badge();
}
}
function badge () {
if(favicon !== null) {
favicon.reset();
console.log("只要有这个对象，得销毁下",favicon);
delete favicon;
}
favicon=new Favico({
animation:'slide',
bgColor:bgColor,
textColor:textColor,
fontFamily:fontFamily,
fontStyle:fontStyle,
type:types,
position:position,
animation:animation
});
favicon.badge(num);
}
script>
body>
html>