[전단 라 이브 러 리] favico. js 브 라 우 저 메시지 알림 [업데이트 대기]

머리말
네 비게 이 션 표시 줄 에 아이콘 을 정의 합 니 다.아이콘 으로 애니메이션 을 사용 할 수 있 습 니 다.애니메이션 의 종류, 위치, 배경 색, 텍스트 색 을 사용자 정의 할 수 있 습 니 다.너 는 소식 을 들 으 면 이렇게 할 수 있다.
image
주소.
공식 주소: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
애니메이션 효과 (슬라이드, 페 이 드, 팝, popFade, none)
elementId
false
글꼴 을 사용 하지 않 으 면 아이콘 ID 로 표시 합 니 다.
element
false
링크 탭 의 아이콘 을 바 꾸 는 데 사용 할 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>

좋은 웹페이지 즐겨찾기