【前端库】favico.js 浏览器消息提示【待更新】

最新推荐文章于 2024-05-10 09:47:36 发布

搬砖老程

最新推荐文章于 2024-05-10 09:47:36 发布

阅读量5.9k

点赞数

分类专栏：前端库酷文章标签： favico.js 消息提示

本文链接：https://blog.csdn.net/weixin_41000111/article/details/79550711

版权

前端同时被 2 个专栏收录

46 篇文章 2 订阅

订阅专栏

库酷

7 篇文章 1 订阅

订阅专栏

前言

在你的导航栏定义图标。可以使用动画作为您的图标。您可以自定义动画的类型，位置，背景颜色和文字颜色。你可以做来消息了，就可以这么做。

地址

官方地址： 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带参数来执行动画效果。

使用

<!DOCTYPE html>
<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">Arial</option>
					<option value="Verdana">Verdana</option>
					<option value="serif">serif</option>
				</select>
			</li>
			<li class="lists">
				<span>字体加粗：</span>
				<select class="lists-section color" onchange="fontstyle(this.value)">
					<option value="normal">normal</option>
					<option value="italic">italic</option>
					<option value="oblique">oblique</option>
					<option value="bold">bold</option>
					<option value="bolder">bolder</option>
					<option value="lighter">lighter</option>
					<option value="100">100</option>
					<option value="200">200</option>
					<option value="300">300</option>
					<option value="400">400</option>
					<option value="500">500</option>
					<option value="600">600</option>
					<option value="700">700</option>
					<option value="800">800</option>
					<option value="900">900</option>
				</select>
			</li>
			<li class="lists">
				<span>圆角或者正方形：</span>
				<select class="lists-section color" onchange="typed(this.value)">
					<option value="circle">circle</option>
					<option value="rectangle">rectangle</option>
				</select>
			</li>
			<li class="lists">
				<span>位置：</span>
				<select class="lists-section color" onchange="positions(this.value)">
					<option value="down">down</option>
					<option value="up">up</option>
					<option value="left">left</option>
					<option value="upleft">upleft</option>
				</select>
			</li>
			<li class="lists">
				<span>动画：</span>
				<select class="lists-section color" onchange="positions(this.value)">
					<option value="slide">slide</option>
					<option value="fade">fade</option>
					<option value="pop">pop</option>
					<option value="popFade">popFade</option>
					<option value="none">none</option>
				</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>

搬砖老程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【前端库】favico.js 浏览器消息提示【待更新】

前言在你的导航栏定义图标。可以使用动画作为您的图标。您可以自定义动画的类型，位置，背景颜色和文字颜色。你可以做来消息了，就可以这么做。地址官方地址： http://lab.ejci.net/favico.js/cdn地址： http://www.bootcdn.cn/favico.js/GitHub 地址：https://github.com/ejci/favi...
复制链接

扫一扫