HTML on Dapeng Zhang

HTML5实现浏览器的桌面通知（兼容性多个浏览器）

Mon, 30 Jun 2025 15:15:32 +0000

HTML5实现浏览器的桌面通知（兼容性多个浏览器）

提示：需要在服务器上运行才会有效果，直接运行代码是没有效果的

代码如下：

<script type="text/javascript">
	/*
	 * 桌面通知
	 * strNewsContent:通知的内容
	 */
	function windowsNotify(strNewsContent) {
		if (!("Notification" in window) && !window.webkitNotifications && window.webkitNotifications.checkPermission() != 0)
			return;

		if (Notification.permission == null || Notification.permission == undefined)
			windowsNotify360(strNewsContent);
		else if (Notification.permission === "granted")
			windowsNotifyFFAndGE(strNewsContent);
		else if (Notification.permission !== 'denied') {
			Notification.requestPermission(function (permission) {
				if (!('permission' in Notification))
					Notification.permission = permission;

				if (permission === "granted")
					windowsNotifyFFAndGE(strNewsContent);
			});
		}
	}

	//桌面通知(兼容360)
	function windowsNotify360(strNewsContent) {
		if (window.webkitNotifications && window.webkitNotifications.checkPermission() == 0) {
			var notify = window.webkitNotifications.createNotification(
			 "http://www.fx678.com/corp/images/aboutus/htw.jpg",
		 '汇通-新闻中心',
			 strNewsContent
		 );

			//设置定时撤销机制，防止通知长时间显示不被关闭
			notify.ondisplay = function (event) {
				setTimeout(function () {
					event.currentTarget.cancel();
				}, 10000);
			};
			//下面是定义点击事件，类似地还可定义其它事件
			notify.onclick = function () {
				window.focus();
				this.cancel();
			};
			//弹出
			notify.show();
		} else if (window.webkitNotifications) {
			window.webkitNotifications.requestPermission(windowsNotify360);
		}
	}


	//桌面通知(兼容火狐、谷歌)
	function windowsNotifyFFAndGE(strNewsContent) {
		var notification = new Notification('汇通-新闻中心',
							 {
							 	body: strNewsContent,
							 	icon: "http://www.fx678.com/corp/images/aboutus/htw.jpg"
							 });

		//设置定时撤销机制，防止通知长时间显示不被关闭
		notification.ondisplay = function (event) {
			setTimeout(function () {
				event.currentTarget.cancel();
			}, 10000);
		};

		//下面是定义点击事件，类似地还可定义其它事件
		notification.onclick = function () {
			window.focus();
			this.cancel();
		};
		console.log(notification);
	}
	windowsNotify('asdsd');

</script>

前端技能 Google Fonts API @font-CSS

Fri, 20 Jun 2025 11:07:41 +0000

开篇之前，先来几个链接http://www.font-face.com/#google_announcement

对于前端，强大不是一般般般的。

先来看几个例子

<html>
 <head>
 <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
 <style>
 body {
 font-family: 'Tangerine', serif;
 font-size: 48px;
 }
 </style>
 </head>
 <body>
 <div>Making the Web Beautiful!</div>
 </body>
</html>

来看一下效果图

加点css的修改

body {
 font-family: 'Tangerine', serif;
 font-size: 48px;
 text-shadow: 4px 4px 4px #aaa;
}

再来看看效果

是不是很赞啦。

这种操作，在我们的项目中，还是很必要的，尤其是前端，从美感上讲，我觉得可以跟苹果的ui媲美，没准苹果也是在用这个呢。

实现原理很简单额

1，第一步，引入css，是google字体的css

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">

2，第二步，在css中使用自己引入的字体，也可以在自己的html代码中调用的

CSS selector {
 font-family: 'Font Name', serif;
}
<div style="font-family: 'Font Name', serif;">Your text</div>

如果字体不好看的话，还有很多的字体的，请看这里http://www.google.com/fonts

对于具体的字体的话，可以去这样调用的

http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans

很好解释的

Tangerine:bold,bolditalic

Tangerine想要的字体的名字，bold,bolditalic想要得到的字体的样式，如果想要多个话，就是用|进行分割，迫不及待了，试验一下。

syntaxhighlighter 滚动条高亮代码高亮自定义主题博客主题

Fri, 20 Jun 2025 11:07:28 +0000

欢迎大家对我博客的支持，最近无意间发现自己的博客的代码高亮出现了问题，原因是自己在做搜索的时候，为了减少js的加载，将某个layout模块删掉了，导致最后出问题自己还不知道，今天改的时候，更是不知道该如何改了，因为忘记了之前自己是如何添加这段代码的啦。不过咱就是写代码的，重写会有更多的收获的。

我就贴出一下自己的css代码

/**
 * SyntaxHighlighter
 * http://alexgorbatchev.com/SyntaxHighlighter
 *
 * SyntaxHighlighter is donationware. If you are using it, please donate.
 * http://alexgorbatchev.com/SyntaxHighlighter/donate.html
 *
 * @version
 * 3.0.83 (July 02 2010)
 * 
 * @copyright
 * Copyright (C) 2004-2010 Alex Gorbatchev.
 *
 * @license
 * Dual licensed under the MIT and GPL licenses.
 */
.syntaxhighlighter {
 background-color: #34495E !important;
 border-radius: 5px;
}
.syntaxhighlighter .line.alt1 {
 background-color: #34495E !important;
}
.syntaxhighlighter .line.alt2 {
 background-color: #34495E !important;
}
.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
 background-color: #34495E !important;
}
.syntaxhighlighter .line.highlighted.number {
 color: white !important;
}
.syntaxhighlighter table{
 margin: 1px 0 !important;
}
.syntaxhighlighter table caption {
 color: #f8f8f8 !important;
}
.syntaxhighlighter .gutter {
 color: white !important;
}
.syntaxhighlighter .gutter .line {
 border-right: 3px solid #1ABC9C !important;
}
.syntaxhighlighter .gutter .line.highlighted {
 background-color: #41a83e !important;
 color: #0a2b1d !important;
}
.syntaxhighlighter.printing .line .content {
 border: none !important;
}
.syntaxhighlighter.collapsed {
 overflow: visible !important;
}
.syntaxhighlighter.collapsed .toolbar {
 color: #96dd3b !important;
 background: black !important;
 border: 1px solid #41a83e !important;
}
.syntaxhighlighter.collapsed .toolbar a {
 color: #96dd3b !important;
}
.syntaxhighlighter.collapsed .toolbar a:hover {
 color: white !important;
}
.syntaxhighlighter .toolbar {
 color: white !important;
 background: #41a83e !important;
 border: none !important;
}
.syntaxhighlighter .toolbar a {
 color: white !important;
}
.syntaxhighlighter .toolbar a:hover {
 color: #ffe862 !important;
}
.syntaxhighlighter .plain, .syntaxhighlighter .plain a {
 color: #f8f8f8 !important;
}
.syntaxhighlighter .comments, .syntaxhighlighter .comments a {
 color: #336442 !important;
}
.syntaxhighlighter .string, .syntaxhighlighter .string a {
 color: #9df39f !important;
 background-color: #34495E;
}
.syntaxhighlighter .keyword {
 color: #96dd3b !important;
}
.syntaxhighlighter .preprocessor {
 color: #91bb9e !important;
}
.syntaxhighlighter .variable {
 color: #ffaa3e !important;
}
.syntaxhighlighter .value {
 color: #f7e741 !important;
}
.syntaxhighlighter .functions {
 color: #ffaa3e !important;
}
.syntaxhighlighter .constants {
 color: #e0e8ff !important;
}
.syntaxhighlighter .script {
 font-weight: bold !important;
 color: #96dd3b !important;
 background-color: none !important;
}
.syntaxhighlighter .color1, .syntaxhighlighter .color1 a {
 color: #eb939a !important;
}
.syntaxhighlighter .color2, .syntaxhighlighter .color2 a {
 color: #91bb9e !important;
}
.syntaxhighlighter .color3, .syntaxhighlighter .color3 a {
 color: #edef7d !important;
}

.syntaxhighlighter .comments {
 font-style: italic !important;
 background-color: #34495E;
}
.syntaxhighlighter .keyword {
 font-weight: bold !important;
}

code{
 background-color: #34495E;
 border:1px solid #34495E;
}

千万注意的是，不要光之引入此css代码，还有一个核心的代码也一定要引入进来，不然会出现更乱的情况

<link href="/syntaxhighlighter/styles/shCore.css" rel="stylesheet"> 
<link href="/syntaxhighlighter/styles/shThemeFlatUI.css" rel="stylesheet">

滚动条下拉自动加载内容

Wed, 18 Jun 2025 11:28:53 +0000

先来看看代码：

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>

 <script type="text/javascript">
 $(document).ready(function(){
 var range = 50; //距下边界长度/单位px
 var elemt = 500; //插入元素高度/单位px
 var maxnum = 3; //设置加载最多次数
 var num = 0;
 $(window).scroll(function(){
 var srollPos = $(window).scrollTop(); //滚动条距顶部距离(页面超出窗口的高度)
 var dbHiht = $("body").height(); //页面(约等于窗体)高度/单位px
 var main = $("#try"); //主体元素
 var mainHiht = main.height(); //主体元素高度/单位px

 if((srollPos + dbHiht) >= (mainHiht-range) && num != maxnum){
 main.append("<div style='height:"+elemt+"' >hello world"+srollPos+"---"+num+"</div>");
 num++;
 }
 });
 });
 </script>
</head>
<body>
 <div id="try" style="height:960px">
 <div id="follow">this is a scroll test;<br/> 页面下拉自动加载内容</div>
 </div>
</body>
</html>

原理很简单，通过注释可以很清楚是怎么实现的。

有人评论说

把偏移再加70将达到更好的滚动到底部再加载的效果。如下：(srollPos + dbHiht) >= (mainHiht-range+70)

提示小插件Poshy Tip jQuery Plugin

Tue, 17 Jun 2025 15:51:08 +0000

关于Poshy Tip是个很简单的提示插件。我觉的还不错，下面做了一个简答的小例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>我的小提示</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />


	<!-- Tooltip classes -->
	<link rel="stylesheet" href="../src/tip-yellow/tip-yellow.css" type="text/css" />
	<link rel="stylesheet" href="../src/tip-violet/tip-violet.css" type="text/css" />
	<link rel="stylesheet" href="../src/tip-darkgray/tip-darkgray.css" type="text/css" />
	<link rel="stylesheet" href="../src/tip-skyblue/tip-skyblue.css" type="text/css" />
	<link rel="stylesheet" href="../src/tip-yellowsimple/tip-yellowsimple.css" type="text/css" />
	<link rel="stylesheet" href="../src/tip-twitter/tip-twitter.css" type="text/css" />
	<link rel="stylesheet" href="../src/tip-green/tip-green.css" type="text/css" />

	<!-- jQuery and the Poshy Tip plugin files -->
	<script type="text/javascript" src="includes/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="../src/jquery.poshytip.js"></script>

	<!-- Setup examples on this page -->
	<script type="text/javascript">
		//<![CDATA[
		$(function(){

			$('#demo-basic').poshytip();
		});
		//]]>
	</script>
</head>

<body>

	<div id="content">
		<p><a id="demo-basic" title="小提示出现了，你好，我是小提示" href="#">快出来小提示</a></p>
	</div>
</body>
</html>

关键几个文件要引入

样式文件

<link rel="stylesheet" href="../src/tip-yellow/tip-yellow.css" type="text/css" />
<link rel="stylesheet" href="../src/tip-violet/tip-violet.css" type="text/css" />
<link rel="stylesheet" href="../src/tip-darkgray/tip-darkgray.css" type="text/css" />
<link rel="stylesheet" href="../src/tip-skyblue/tip-skyblue.css" type="text/css" />
<link rel="stylesheet" href="../src/tip-yellowsimple/tip-yellowsimple.css" type="text/css" />
<link rel="stylesheet" href="../src/tip-twitter/tip-twitter.css" type="text/css" />
<link rel="stylesheet" href="../src/tip-green/tip-green.css" type="text/css" />

这里面的样式可以跟你自己的需要进行选择定制

脚本文件

<script type="text/javascript" src="includes/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../src/jquery.poshytip.js"></script>

这个大家都知道的

具体的演示文档，可以参考这个地址：http://vadikom.com/demos/poshytip/#download

读读英文文档还不错

结合bootstrap自定义table列表

Tue, 17 Jun 2025 15:50:38 +0000

使用bootstrap这个方便的web UI框架，方便了自己，少些了很多的代码，至少兼容性方面，我觉的我就不用操心了，呵呵。

看看我自定义的table列表

css代码:

table.smoth{width:100%}
table.smoth thead tr.caption td.item{background-color: #E4E4E4;border:1px solid #ccc}
table.smoth tbody tr.list td{border:1px solid #ccc}
table.smoth tbody tr.list:nth-child(odd) td{background-color: #fff}
table.smoth tbody tr.list:nth-child(even) td{background-color: #F2F2F2}

html代码：

<div class="table">
	<table class='smoth' >
		<thead>
			<tr class='caption'>
				<td class='item'>电视剧名称</td>
				<td class='item'>上线日期</td>
				<td class='item'>ITV状态</td>
				<td class='item'>导演</td>
				<td class='item'>编剧</td>
				<td class='item'>主演</td>
			</tr>
		</thead>
		<tbody>
			<?php for($i = 0; $i < 10; $i++):?>
			<tr class='list'>
				<td>咱俩的事</td>
				<td>2013-01-13</td>
				<td>是</td>
				<td>David Zhang</td>
				<td>David</td>
				<td>Zhang</td>
			</tr>
			<?php endfor;?>
		</tbody>
	</table>
</div>

加入了一点php代码，实则是一个简单的循环

图片展示

HTML on Dapeng Zhang

HTML5实现浏览器的桌面通知 （兼容性多个浏览器）

前端技能 Google Fonts API @font-CSS

syntaxhighlighter 滚动条 高亮 代码高亮 自定义主题 博客主题

滚动条下拉自动加载内容

提示小插件Poshy Tip jQuery Plugin

结合bootstrap自定义table列表

HTML5实现浏览器的桌面通知（兼容性多个浏览器）

syntaxhighlighter 滚动条高亮代码高亮自定义主题博客主题