分类目录归档:Javascript

浏览器调用windows本地应用程序

把下面代码中的MyApp改为你的应用名,浏览器就可以用MyApp:参数 的方式打开本地应用

REGEDIT4

[HKEY_CLASSES_ROOT\MyApp]
@="URL:MyApp Protocol"
"URL Protocol"="C:\\Program Files\\MyApp\\RelationApp.exe"

[HKEY_CLASSES_ROOT\MyApp\DefaultIcon]
@="C:\\Program Files\\MyApp\\RelationApp.exe,1"

[HKEY_CLASSES_ROOT\MyApp\shell]

[HKEY_CLASSES_ROOT\MyApp\shell\open]

[HKEY_CLASSES_ROOT\MyApp\shell\open\command]
@="\"C:\\Program Files\\MyApp\\RelationApp.exe\" \"%1\""

js时间戳转为日期格式

转自:http://wyoojune.blog.163.com/blog/static/57093325201131193650725/

这个在php+mssql(日期类型为datetime)+ajax的时候才能用到,js需要把时间戳转为为普通格式,一般的情况下可能用不到

<script>   
function getLocalTime(nS) {   
   return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');   
}   
alert(getLocalTime(1293072805));   
</script> 

弹出:2010年12月23日 10:53

也可以用:

<script>   
function getLocalTime(nS) {   
    return new Date(parseInt(nS) * 1000).toLocaleString().substr(0,17)}   
alert(getLocalTime(1293072805));   
</script>   

 

如果想弹出:2010-10-20 10:00:00这个格式的也好办

<script>   
function getLocalTime(nS) {   
   return new Date(parseInt(nS) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");    
}   
alert(getLocalTime(1177824835));   
</script>

另外我也參考了別的網站的一些東東,如下:

function   formatDate(now)   {   
          var   year=now.getYear();   
          var   month=now.getMonth()+1;   
          var   date=now.getDate();   
          var   hour=now.getHours();   
          var   minute=now.getMinutes();   
          var   second=now.getSeconds();   
          return   year+"-"+month+"-"+date+"   "+hour+":"+minute+":"+second;   
          }   
   
          var   d=new   Date(1230999938);   
          alert(formatDate(d));

特別要提一下的是:

從MySQL傳過來的數據,有可能是字符串,要把他們轉化為數字,數字也要*1000,因為JS里用的是毫秒數!我的如下:

var time_num = $("date",message).text();
        var time_num = parseInt(time_num);     //传回来的是个字符串
        var d = new Date(time_num*1000);       //這個很重要,要*1000
        var temp_time = formatDate(d);

第一個例子做的就比較正規,什麽情況都考慮到了!

 

解决ie6浏览器,JSON未定义错误

ie6 這個微軟一直遲遲不更新的瀏覽器, 已經需要被淘汰的版本, 卻因為微軟壟斷市場不求進步而沿用至今!
造成目前google, safari, 與firefox..等瀏覽器都慢慢吃掉IE市佔! 微軟才拼命推出更新, 真的是要壓力才會進步…
win7已經搭配最新IE8, 這是好事! 各家公司推出自己最棒的產品互相競爭

 

IE6 我遇到了 json 未定義的問題! 其實是因為我有使用jquery當中有包含json的內容
google了一下發現不難解決, 紀錄一下:

去下载一个json2.js这个文件加到所在页面就可以了
官網
http://www.json.org/

裡面有json2下載點
https://github.com/douglascrockford/JSON-js


使用方式:
< script type="text/javascript" src="json2.js">< /script>

jQuery-强大的jQuery选择器 (详解)

1. 基础选择器 Basics

名称 说明 举例
#id 根据元素Id选择 $(“divId”) 选择ID为divId的元素
element 根据元素的名称选择, $(“a”) 选择所有<a>元素
.class 根据元素的css类选择 $(“.bgRed”) 选择所用CSS类为bgRed的元素
* 选择所有元素 $(“*”)选择页面所有元素
selector1,
selector2,
selectorN
可以将几个选择器用”,”分隔开然后再拼成一个选择器字符串.会同时选中这几个选择器匹配的内容. $(“#divId, a, .bgRed”)

继续阅读

jQuery快速入门避免少走弯路

一、JQuery的环境配置

1、JQuery分为压缩版和非压缩版

2、$=JQuery

3、$(document).ready(funtion(){});  相当于 $(function(){});

4、注释用//

5、DOM对象与JQuery对象的相互转换

var $variable (jquery对象) =$(variable)(Dom对象);

var variable(Dom对象)=$variable[0]或$variable.get(0)  (JQuery对象)

6、与其他JS库冲突的解决(主要是$符号谁生效的问题)

[1]、在其他库之后导入

使用前:先调用jQuery.noconflict(); ————$会被释放给jQuery库, 就是说在使用jquery库之前先声明一下 “我下面要用的是jquery的用法,$符号代表jquery了”

[2]、在其他库之后导入

不必调用jQuery.noconflict(); ,直接用就行了

继续阅读

impress.js使用教程

看了 分享8个超酷的javascript类库和jQuery插件帮助你打造超炫的网站和web应用 的读者应该被他的效果震撼到了吧,我在网上找到了使用教程,喜欢的读者可以试试。

Impress.js是一款基于css3转换和过渡、工作于现代浏览器(Google Chrome或Safari (或 Firefox 10 或 IE10))、并受prezi.com的理念启发的演示工具。如果你已经厌烦了使用PowerPoint制作PPT,那么impress.js是一个非常好的选择,用它做的PPT更加直观,效果也非常的不错。查看效果

impress

Impress.js 是一个非常棒的用来创建在线演示的javascript库,但在其实际的项目网页中却没有说明文档。这篇指导将会帮你开始并创建一个简单的幻灯片演示,但完成后请记住它,用它做的不只局限于此,唯一的限制是你的创造力!

为你准备的可用的教程: 请在GitHub上查看下载

必需条件

想看有效的教程,请使用Google Chrome或Safari (或 Firefox 10 或 IE10)。Impress.js目前不兼容早期版本的Firefox或Internet Explorer。

配置

首要的事情是你要创建一个新的网页,我的是index.html并且里面配置了基本的head和body元素。

<!doctype html>
<html>
    <head>
        <title>Impress Tutorial</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>

    </body>
</html>

在body元素结束前引入impress.js文件,这是Impress包引入到你的项目中。

<script type=”text/javascript” src=”impress.js”></script>

接下来我们将创建一个wrapper包含幻灯片,这里用一个简单的id为 ‘impress’<div>元素。

<div id="impress">
</div>

创建幻灯片

现在你可以看到创建一个新的幻灯片是多少的容易了。每个幻灯片是一个<div>元素 (在wrapper内) 其class名称叫做’step’。

<div>
    My first slide
</div>

虽然是创建一个简单的幻灯片,但你开始向你的幻灯片添加数据属性时还是很有趣的。数据属性表示它不是活动幻灯片时你的幻灯片的属性,您可以使用下面的数据属性:

  • data-x = 幻灯片的x坐标
  • data-y = 幻灯片的y坐标
  • data-scale = 通过指定一个值来进行缩放,data-scale为5则将会在你幻灯片原始尺寸基础放大5倍
  • data-rotate = 通过一个数字度数来确定旋转你的幻灯片
  • data-rotate-x = 为3D用,这个数字度数是它应该相对x轴旋转多少度。(前倾/后仰)
  • data-rotate-y = 为3D用,这个数字度数是它应该相对y轴旋转多少度。 (左摆/右摆)
  • data-rotate-z = 为3D用,这个数字度数是它应该相对z轴旋转多少度。

动作中的数据属性

下面的幻灯片设置将指导你完成每个动作的数据属性。

让我们从一个初始的幻灯片开始,这个幻灯片已将它自己的x和y数据属性设置为0,所以会出现在页面的中间。

<div data-x="0" data-y="0">
    This is my first slide
</div>

第二个幻灯片的x值为500,但y值为0,这意味着当它活动的时候它将会出现在穿过x轴(向左滑动)500px的地方。

<div data-x="500" data-y="0">
    This is slide 2
</div>

简单吧?下一个幻灯片将同第2个幻灯片同样的x位置开始,但其y位置为-400,这将会是从顶部400px处滑入。

<div data-x="500" data-y="-400">
    This is slide 3
</div>

幻灯片4使用缩放值来显示一个幻灯片如何放大缩小。它的scale值为0.5,意味着它应该是一半的尺寸。当它变成活动的演示时将通过必需的倍数调节所有幻灯片的缩放尺寸。在这个示例中它的意思就是这个幻灯片应该正常显示(比例为1),它将需要被放大2倍 (0.5*2 = 1),所有的其他幻灯片也将被放大至2倍而变成2倍大小。

<div data-x="500" data-y="-800" data-scale="0.5">
    This is slide 4
</div>

旋转属性允许你旋转一个幻灯片到当前视图,幻灯片5被设置旋转50度。

<div data-x="0" data-y="-800" data-rotate="90">
    This is slide 5 and it rotates in.
</div>

最后,为3D转换,你可为每个维度的轴指定旋转属性(x,y,z)。

x轴是横轴,意思是你可使事物倾斜(正值)或向后(负值),y轴是竖轴,所以你可使事物向左摇摆(负值)或向右(正值),z轴是纵轴,这将是旋转的东西向上(负值)和向下(正值)。

组合

现在你了解了所有你需要给幻灯片展示添加动画效果的的数据属性,你可以以你的想象力用不可思议的和令人惊奇的方式合并这些效果来创建你自己的幻灯片展示风格。

<div data-x="-2600" data-y="-800" data-rotate-x="30" data-rotate-y="-60" data-rotate-z="90" data-scale="4">
This is slide 7 and it has a 3D transition AND a scale.
</div>

不支持的浏览器

Impress自动检测浏览器支持与否,并且如果不支持则自动向wrapper“<div>”添加一个样式名称为“impress-not-supported”的样式,使用一些css我们可以在浏览器上向人们显示不支持Impress的信息。

在开始的<div id=”impress”>添加下面的内容:

<div>
    Your browser doesn't support impress.js.  Try Chrome or Safari.
</div>

然后,创建一个样式表单或引入一个已经存在的样式表单:

.no-support-message { display:none; }
.impress-not-supported .no-support-message { display:block; };

默认是隐藏消息的,但如果浏览器不支持时当前样式就会变成impress-not-supported。

玩得开心!

本教程介绍使用Impress.js创建自己的在线演示文稿的基本资料。整个例子您可在GitHub上下载和演示。

原文地址:http://www.cubewebsites.com/blog/guides/how-to-use-impress-js/

译文地址:http://www.woiweb.net/impress-js-tutorial/

分享8个超酷的javascript类库和jQuery插件帮助你打造超炫的网站和web应用

是不是想创建更加吸引眼球的网站和web应用?是不是想让你的网站和应用让用户感觉更加与众不同?如果你想让你的网站显得鹤立鸡群的话,绝对应该看看今天我们给大家推荐的这8个超酷的javascript类库。这些类库可能我们在以前的文章中也介绍过。如果你能够有效地整合到你的网站和web应用中,肯定会让你的网站充满乐趣和创意。我们包含了特种超酷特效,时间线(timeline)等,非常适合创建但页面的网站。大家来看看吧!希望我们的文章请务必给我们留言,谢谢!

Timelinr

jQuery Timelinr是一个简单高效的jQuery插件帮助你提高时间轴的展现方式。绝对会让你的网站显得富有创意并且酷炫无比。这个时间轴同时支持垂直和水平方向的展示。

分享8个超酷的javascript类库和jQuery插件帮助你打造超炫的网站和web应用 - gbin1.com

Timeline

Timeline在前面GBin1的文章中我们也介绍过,非常酷的一个时间轴的实现,支持整合各种不同的来源的内容,例如,图片,视频,iframe站外内容及其各种社交站点来源,twitter,youtube等。整个时间轴使用幻灯显示,非常拥有个性。

分享8个超酷的javascript类库和jQuery插件帮助你打造超炫的网站和web应用 - gbin1.com

TimergliderJS

TimergliderJS插件支持缩放,支持垂直及其水平方向的时间轴显示,并且支持透明自动播放。 一个类似Google地图的时间轴插件,当然这里是展示时间。

分享8个超酷的javascript类库和jQuery插件帮助你打造超炫的网站和web应用 - gbin1.com

Impress.js

绝对会让你尖叫的超棒的演讲展示工具。基于现代浏览器的CSS3变化和过渡效果。如果你第一次见到这个脚本,绝对让你震撼!

分享8个超酷的javascript类库和jQuery插件帮助你打造超炫的网站和web应用 - gbin1.com

Reveal.js

这是一个用来创建演讲展示的脚本,使用3D的幻灯展示工具。不依赖外部的类库,但是包含一个代码高亮的类库highlight.js。

分享8个超酷的javascript类库和jQuery插件帮助你打造超炫的网站和web应用 - gbin1.com

ScrollPath

这个脚本帮助你自定义鼠标滚轮的行为,你可以使用自己定义的方式来展示鼠标滚动的路径和行为。超酷!

分享8个超酷的javascript类库和jQuery插件帮助你打造超炫的网站和web应用 - gbin1.com

Zoomoz

一个简单实用的jQuery插件用来缩放页面上任何元素,非常适合展示产品细节或者自己的作品集。

分享8个超酷的javascript类库和jQuery插件帮助你打造超炫的网站和web应用 - gbin1.com

Chop Slider

chop slider是一个超酷的幻灯展示插件,你可以使用它来创建丰富的过渡效果和特效,122个2D变换效果:这里有105个效果支持所有的浏览器。绝对震撼!

分享8个超酷的javascript类库和jQuery插件帮助你打造超炫的网站和web应用 - gbin1.com

jQuery实现侧边栏随窗口滚动

 

方法一:

很简单,前提是你的主题必须已加载了jQuery。

把下面代码加到主题头部header.php模版中即可:

  1. <script type=“text/javascript”>
  2. $(function() {

  3. var$sidebar = $(“#sidebar”),
  4. $window = $(window),
  5. offset = $sidebar.offset(),
  6. topPadding = 15;
  7. $window.scroll(function() {
  8. if ($window.scrollTop() > offset.top) {
  9. $sidebar.stop().animate({
  10. marginTop: $window.scrollTop() – offset.top + topPadding
  11. });
  12. } else {
  13. $sidebar.stop().animate({
  14. marginTop: 0
  15. });
  16. }
  17. });
  18. });
  19. </script>

可根据不同的主题模版,自行修改一下其中的DIV标签#sidebar名称。此方法兼容所有浏览器。

演示效果

HotNews主题也可使用该功能,默认是整个侧边栏随窗口滚动,受主题布局功能限制,单独滚动某个模块效果不是很理想。

参考自:http://css-tricks.com/scrollfollow-sidebar/

方法二:

本人未试过,可以自行参阅:js页面滚动时层智能浮动定位实现