wxqrcode.js:小程序页面中生成二维码,不依赖任何类库。

微信小程序实用Demo: 小程序内生成image格式qrcode(二维码)

wxqrcode.js 不依赖任何类库,可以生成二维码图片base64编码(data:image/gif;base64,xxx…

可以用于小程序页内生成二维码。文章后有代码下地址。

阅读详细 »

wxqrcode.js:生成二维码图片base64。不依赖任何库。

wxqrcode.js:生成二维码图片base64。不依赖任何库。

生成 图片base64编码( data:image/gif;base64, … )编码。可以用于网页,小程序生成二维码。

demo1     demo2

阅读详细 »

带复选框的下拉框chartQuota

阅读详细 »

Ztree自动触发第一个节点的点击事件

重点在这

setting.callback.onClick(null, roletree.setting.treeId, node);

阅读详细 »

js将url查询字符串转换为json数据

js将url查询字符串转换为json数据

function query2Hash(queryStr) {
    var h = {};
    console.log(window.location.search);
    var qArr = (queryStr || window.location.search.replace(/\?/, '')).split('&');
    for (var i = 0,
    len = qArr.length; i < len; i += 1) {
        var kvArr = qArr[i].split('=');
        h[kvArr[0]] = kvArr[1];
    }
    return h;
}

事件DOMContentLoaded和load的区别

事件DOMContentLoaded和load的区别

他们的区别是,触发的时机不一样,先触发DOMContentLoaded事件,后触发load事件。

DOM文档加载的步骤为

1. 解析HTML结构。
2. 加载外部脚本和样式表文件。
3. 解析并执行脚本代码。
4. DOM树构建完成。//DOMContentLoaded   //jQuery.ready
5. 加载图片等外部文件。
6. 页面加载完毕。//load

在第4步,会触发DOMContentLoaded事件。在第6步,触发load事件。

用原生js可以这么写

// 不兼容老的浏览器,兼容写法见[jQuery中ready与load事件](http://www.imooc.com/code/3253),或用jQuery
document.addEventListener("DOMContentLoaded", function() {
   // ...代码...
}, false);

window.addEventListener("load", function() {
    // ...代码...
}, false);

用jQuery这么写

// DOMContentLoaded
$(document).ready(function() {
    // ...代码...
});

//load  
$(document).load(function() {
    // ...代码...
});
//貌似1.8版本之后,load就抛弃了.只能用window.onload()或者addEventListener这两个事件监听页面加载完成

页面滚动到底部 ajax加载内容代码 示例代码

页面滚动到底部 ajax加载内容代码:

html结构:

    <div class="ipshowListA">
        <ul class="clearfix">
        <!--<li class="item">内容块</li>-->
        </ul>
    </div>
    
    <div class="pagesA">
        <div class="more" data-url = "jsonlist.php?page=1" >点击加载更多</div>
        <div class="loading"><!--数据加载中...--></div>
        <div class="nodata">没有更多数据了...</div>
    </div>

js代码:

// JavaScript Document
$(function(){
    
    var $btn_more    = $('.pagesA .more');//更多按钮
    var $btn_loading = $('.pagesA .loading');//载入中
    var $btn_nodata  = $('.pagesA .nodata');//没有数据了
    var $box         = $('.ipshowListA ul');//容器
    var lock = false;
    var nexturl =  $btn_more.data('url');//第一次url
    
    function _more(){
        $btn_more.show();
        $btn_loading.hide();
        $btn_nodata.hide();
    }
    function _loading(){
        $btn_more.hide();
        $btn_loading.show();
        $btn_nodata.hide();
    }
    function _nodata(){
        $btn_more.hide();
        $btn_loading.hide();
        $btn_nodata.show();
    }
    //点击触发 (ajax加载数据)
    $btn_more.on('click',function(){
        ajaxLoad();                       
    });
    //距离底部300触发  (ajax加载数据)
    $(window).on('scroll',function(){
        if( $(document).height() - $(window).scrollTop() - $(window).height() < 300 ){
            ajaxLoad(); 
        }                    
    })
    
    
    //ajax加载数据
    function ajaxLoad(){
        //锁
        if( lock ){return false; }else{ lock = true; }
        _loading();
        $.ajax({
            url:nexturl,
            type:'get',
            dataType:'json',
            success:function(d){
                //{"error":0 , "msg":"ok" , "html":"6666", "nexturl":"jsonlist.php?page=1"} 
                if(d.error == 0 ){
                    //加载成功
                    $box.append( d.html );
                    lock = false;
                    _more();
                    nexturl = d.nexturl; //更新下一页地址
                }else if(d.error == 1 ){
                    //没有数据了
                    _nodata();
                    
                }else{
                    //其他错误
                    alert( d.msg );
                    lock = false;
                }
                
            },
            error:function( a,b,c){
                console.log('ajax错误:', a,b,c );
            }
        })
        
    }
});

php代码:

<?php 
sleep(3);//模拟网络延时 3秒

//返回的 json数据结构
//{"error":0 , "msg":"ok" , "html":"6666", "nexturl":"jsonlist.php?page=1"} 


$page = $_GET['page'];



if( $page > 5 ){
    //没有数据了 
    //{"error":1 , "msg":"没有数据了" , "html":"", "nexturl":""} 
    $j = array();
    $j['error'] = 1;
    $j['msg'] = '没有数据了';
    $j['nexturl'] = '';
    $j['html'] = '';
    
    die( json_encode($j) ); 

}
/////////////////////////////////////////////////////////////////////////////


$page++;

$j = array();
$j['error'] = 0;
$j['msg'] = 'ok';
$j['nexturl'] = 'jsonlist.php?page=' . $page;
$j['html'] = '
    <li class="item">内容块</li>
    <li class="item">内容块</li>
    <li class="item">内容块</li>
    ...
';

die( json_encode($j) );

设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的js代码

// 设置为主页 
//<a href="javascript:void(0)" onclick="SetHome(this,window.location)">设为首页</a>
function SetHome(obj, vrl) {
    try {
        obj.style.behavior = 'url(#default#homepage)';
        obj.setHomePage(vrl);
    } catch(e) {
        if (window.netscape) {
            try {
                netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
            } catch(e) {
                alert("此操作被浏览器拒绝!\n请在浏览器地址栏输入“about:config”并回车\n然后将 [signed.applets.codebase_principal_support]的值设置为'true',双击即可。");
            }
            var prefs = Components.classes['@mozilla.org/preferences-service;1'].getService(Components.interfaces.nsIPrefBranch);
            prefs.setCharPref('browser.startup.homepage', vrl);
        } else {
            alert("您的浏览器不支持,请按照下面步骤操作:1.打开浏览器设置。2.点击设置网页。3.输入:" + vrl + "点击确定。");
        }
    }
}
// 加入收藏 兼容360和IE6
//<a href="javascript:void(0)" onclick="shoucang(document.title,window.location)">加入收藏</a>
function shoucang(sTitle, sURL) {
    try {
        window.external.addFavorite(sURL, sTitle);
    } catch(e) {
        try {
            window.sidebar.addPanel(sTitle, sURL, "");
        } catch(e) {
            alert("加入收藏失败,请使用Ctrl+D进行添加");
        }
    }
}

kindeditor编辑器中追加内容滚动条往上顶的bug

kindeditor编辑器中追加内容滚动条往上顶的bug

如题  kindeditor编辑器中追加内容滚动条往上顶的bug  无论滚动条拉到什么地方,一复制粘贴,插入图片,等操作,就会跑到最顶部,所以操作起来很不方便,各位有没有知道这个问题怎么解决???

遇到这个问题是因为使用了br换行引起的。默认使用p标签换行没有这个bug

因为加了换行符号的原因 newlineTag: ‘br’,

            KindEditor.ready(function(K) {
                editor = K.create('textarea[name="content"]', {
                    allowFileManager : true,
                    newlineTag : "br" //或者为"p"  //使用br换行
                });
            });

我调试了一下, 找到了问题的原因!!!  

版本 4.1.10 kindeditor.js 第 1514 行这个函数 box.top 是负数了, 然而这个函数返回后, 第 2763 行执行了 win.scrollTo(pos.x, pos.y); 滚动滚动条.

    pos : function() {

	pos : function() {
		var self = this, node = self[0], x = 0, y = 0;
		if (node) {
			if (node.getBoundingClientRect) {
				var box = node.getBoundingClientRect(),
					pos = _getScrollPos(self.doc);
				x = box.left + pos.x;
				y = box.top + pos.y;/*此top为负数*/
			} else {
				while (node) {
					x += node.offsetLeft;
					y += node.offsetTop;
					node = node.offsetParent;
				}
			}
		}
		return {x : _round(x), y : _round(y)};
	},

没有找到特别好的解决方案,临时解决一下。
这样滚动条就无法自动滚动了,尽管不完美,但比滚动条总往上顶强。
ps:如果不使用 br 换行完全不会产生这个bug

解决代码如下:

	pos : function() {
		var self = this, node = self[0], x = 0, y = 0;
		if (node) {
			if (node.getBoundingClientRect) {
				var box = node.getBoundingClientRect(),
					pos = _getScrollPos(self.doc);
				x = box.left + pos.x;
				//y = box.top + pos.y;
				//临时解决方案 针对  newlineTag: 'br',
				y = pos.y;
			} else {
				while (node) {
					x += node.offsetLeft;
					y += node.offsetTop;
					node = node.offsetParent;
				}
			}
		}
		return {x : _round(x), y : _round(y)};
	},

用js方法限制文字个数,文字溢出省略号。自己写了一个限制容器文字长度的jQuery插件。​

用js方法限制文字个数,文字溢出省略号。自己写了一个限制容器文字长度的jQuery插件。

自己写了一个限制容器文字长度的jQuery插件,用起来还是很方便的。

/**
 * $.txtCur();
 * @charset utf-8
 * @extends jquery.1.8.3
 * @example
 * $('.info').txtCur({n:50});
 * $('.info').txtCur({n:50,z:'...',isTitle:1});
 */
(function($) {
    $.fn.extend({
        txtCur: function(options) {
            //默认参数
            var defaults = {
                /**截取长度 */
                n: 60,
                /*结尾添加字符*/
                z: '...',
                /*是否在标签上 添加 title 属性*/
                isTitle: true

            }
            var options = $.extend(defaults, options);
            return this.each(function() {
                var o = options;
                var $this = $(this);
                var s = $this.text(),
                s = $.trim(s); //去掉收尾空格
                l = s.length,
                n = o.n; //设置字符长度为18个 
                if (l > n) {
                    //文本所有内容用a标签的title属性提示文本全部内容
                    if (o.isTitle) {
                        $(this).attr("title", s);
                    }
                    s = $this.text(s.substring(0, n) + o.z);
                }
                /**/

            });
        }
    });

})(jQuery);

//调用方法

<span txtCur="10">我是文字我是文字我是文字我是文字我是文字</span>
<script type="text/javascript">
$(function() {
    $('[txtCur]').each(function() {
        var $that = $(this);
        var maxNum = $that.attr('txtCur');
        $that.txtCur({
            n: maxNum
        });
    })
})
</script>

js判断是否在iframe和禁止网页在iframe中显示

js判断是否在iframe和禁止网页在iframe中显示

如果也没在frame框架中打开,则在顶层窗口中打开啊

<script type="text/javascript">
    if (self != top) { top.location.href=location.href; } 
</script>

js判断在iframe里:

//方式一    
if (self.frameElement && self.frameElement.tagName == "IFRAME") {    
         alert('在iframe中');    
}    
//方式二    
if (window.frames.length != parent.frames.length) {    
         alert('在iframe中');    
}    
//方式三    
if (self != top) {      
         alert('在iframe中');    
}  

  

防止网页被别站用iframe引用:

通过js防止:

//方式一    
if (self.frameElement && self.frameElement.tagName == "IFRAME") {    
         location.href="about:blank";   
}    
//方式二    
if (window.frames.length != parent.frames.length) {    
         location.href="about:blank";  
}    
//方式三    
if (self != top) {      
         location.href="about:blank";   
}

通过header配置防止:
php配置:

header("X-Frame-Options:deny");  
header("X-Frame-Options:SAMEORIGIN");  

Nginx配置:

add_header X-Frame-Options SAMEORIGIN  

Apache配置:

Header always append X-Fram-Options SAMEORIGIN  

IIS配置:

X-Frame-Options:
DENY:禁止当前页面放在IFrame内
SAMEORIGIN:在同源情况下可以使用IFrame内
ALLOW-FROM http://a.com/:在a.com的域名内可以使用Iframe

通过meta设置:

<meta http-equiv="X-Frame-Options" content="deny">  

js时间格式化函数,js秒数转日期时间格式字符串

js时间格式化函数,js秒数转日期时间格式字符串

//调用方法
//日期字符串 -> 日期字符串 (重新格式化日期时间)
alert(new Date(Date.parse(‘2016-12-12 12:12:12’)).Format(“yyyy-MM-dd hh:mm:ss”));
//时间戳(秒数) -> 日期字符串 (秒数转格式化日期时间 记得 * 1000)
alert(new Date(1479132772*1000).Format(“yyyy-MM-dd hh:mm:ss”));
//当前时间 -> 日期字符串 
alert(new Date().format(“yyyy-MM-dd hh:mm:ss”));

Date.prototype.Format = function(fmt) { //author: meizz
    var o = {
        "M+": this.getMonth() + 1,
        //月份
        "d+": this.getDate(),
        //日
        "h+": this.getHours(),
        //小时
        "m+": this.getMinutes(),
        //分
        "s+": this.getSeconds(),
        //秒
        "q+": Math.floor((this.getMonth() + 3) / 3),
        //季度
        "S": this.getMilliseconds() //毫秒
    };
    if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    }
    for (var k in o) {
        if (new RegExp("(" + k + ")").test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        }
    }
    return fmt;
};

//调用方法
//日期字符串 -> 日期字符串 (重新格式化日期时间)
alert(new Date(Date.parse('2016-12-12 12:12:12')).Format("yyyy-MM-dd hh:mm:ss"));
//时间戳(秒数) -> 日期字符串 (秒数转格式化日期时间 记得 * 1000)
alert(new Date(1479132772 * 1000).Format("yyyy-MM-dd hh:mm:ss"));
//当前时间 -> 日期字符串 
alert(new Date().format("yyyy-MM-dd hh:mm:ss"));

完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单。

HTML5的新标签元素有:

<header>定义页面或区段的头部;
<footer>定义页面或区段的尾部;
<nav>定义页面或区段的导航区域;
<section>页面的逻辑区域或内容组合;
<article>定义正文或一篇完整的内容;
<aside>定义补充或相关内容;


使用他们能让代码语义化更直观,而且更方便SEO优化。但是此HTML5新标签在IE6/IE7/IE8上并不能识别,需要进行JavaScript处理。以下就介绍几种方式。

方式一:Coding JavaScript

<!--[if lt IE9]>
<script>
   (function() {
     if (!
     /*@cc_on!@*/
     0) return;
     var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
     var i= e.length;
     while (i--){
         document.createElement(e[i])
     }
})()
</script>
<![endif]-->

如果是IE9以下的IE浏览器将创建HTML5标签, 这样非IE浏览器就会忽视这段代码,也就不会有无谓的http请求了。

 

第二种方法:使用Google的html5shiv包(推荐)

<!--[if lt IE9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

对于国内无法使用 googlecode.com 可以使用其他的cdn

<!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]—>

但是不管使用以上哪种方法,都要初始化新标签的CSS.因为HTML5在默认情况下表现为内联元素,对这些元素进行布局我们需要利用CSS手工把它们转为块状元素方便布局

/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

但是如果ie6/7/8 禁用脚本的用户,那么就变成了无样式的”白板”网页,我们该怎么解决呢?

我们可以参照facebook的做法,即引导用户进入带有noscript标识的 “/?_fb_noscript=1”页面,用 html4 标签替换 html5 标签,这要比为了保持兼容性而写大量 hack 的做法更轻便一些。

<!--[if lte IE 8]>
<noscript>
     <style>.html5-wrappers{display:none!important;}</style>
     <div class="ie-noscript-warning">您的浏览器禁用了脚本,请<a href="">查看这里</a>来启用脚本!或者<a href="/?noscript=1">继续访问</a>.
     </div>
</noscript>
<![endif]-->

这样可以引导用户开启脚本,或者直接跳转到HTML4标签设计的界面。

IE的@cc_on条件编译

IE的@cc_on条件编译
用来判断浏览器的版本很好用 var b = /*@cc_on!@*/false;
其中/*@cc_on ….. @*/之间的部分可以被ie识别并作为程序执行,同时启用ie的条件编译。 最常用的变量是@_jscript_version:js版本,最后一位是ie主版本号
例如:

<script>
   var sSuffix = ( /*@cc_on!@*/false ) ? 'ie' : '非iE浏览器' ;
    /*@cc_on alert("显示浏览器版本号:"+@_jscript_version) @*/
    alert("浏览器版本为"+sSuffix)
</script>

用于

KindEditor:Ajax提交表单时获取不到HTML内容

当用Ajax提交表单时,KindEditor的内容获取不到,HTML数据获取不了

原因:当ajax提交时,KindEdito的HTML数据还没有同步到表单中来,那怎么去获取HTML数据呢?

—————————————————

KindEditor 4.x documentation:获取HTML数据

// 取得HTML内容
html = editor.html();

// 同步数据后可以直接取得textarea的value
editor.sync();
html = document.getElementById(‘editor_id’).value; // 原生API
html = K(‘#editor_id’).val(); // KindEditor Node API
html = $(‘#editor_id’).val(); // jQuery

// 设置HTML内容
editor.html(‘HTML内容’);

—————————————————-

从这可看出,当Ajax提交表单时,textarea的value还是空的,需要使用sync()去同步HTML数据

那么在什么时候去同步,怎么同步?KindEditor同时提供了方法:

afterBlur

编辑器失去焦点(blur)时执行的回调函数。

数据类型: Function
默认值: 无

最后答案和解决办法:

    <script type="text/javascript">
        KindEditor.ready(function (K) {
            window.editor = K.create('#AContent', {
                afterBlur: function () { this.sync(); }
            });
        });
    </script>

 

web视频播放器,flv网页播放器,mp4网页播放器。
flvplayer支持flv,mp4,swf 文件

代码如下

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>web视频播放器-flvplayer</title>
</head>
<body>
<!-- 代码 开始 -->
<object class id="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="600" height="400">
  <param name="movie" value="flvplayer.swf">
  <param name="quality" value="high">
  <param name="allowFullScreen" value="true">
  <param name="FlashVars" value="vcastr_file=1_0.mp4&LogoText=http://www.lrxin.com&BufferTime=3&IsAutoPlay=0">
  <embed src="flvplayer.swf" allowfullscreen="true" flashvars="vcastr_file=1_0.mp4&LogoText=www.lrxin.com&IsAutoPlay=0" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="600" height="400"></embed>
</object>
<!-- 代码 结束 -->
<br>
vcastr_file=视频地址 支持 flv mp4<br>
LogoText = logo文字<br>
IsAutoPlay = 1 | 0 是否播放<br>
</body>
</html>

文件下载:flvplayer.swf
demo下载:

JS实现自动倒计时30秒后按钮才可用

WEB开发中经常会用到倒计时来限制用户对表单的操作,比如希望用户在一定时间内看完相关协议信息才允许用户继续下一步操作,又比如在收取手机验证码时允许用户在一定时间过后(未收到验证码的情况下)再次获取验证码。那么今天我来给大家介绍下如何使用Javascript来实现这一简单应用。

应用场景1:用户注册时阅读完相关协议信息后才能激活按钮
某些网站注册时要求用户同意所谓的用户协议之类的信息,如果协议内容非常重要,有些网站会要求新注册的用户一定要阅读完相关协议信息才能激活下一步按钮提交表单。为了让用户能阅读完协议信息(实际用户有没有真正阅读咱不知道),开发者会设计一个倒计时比如30秒,30秒过后,表单提交按钮才会激活生效,下面来看具体如何实现。

<form action="http://www.lrxin.com/" method="post" name="agree">
    <input type="submit" class="button" value="请认真查看<服务条款和声明> (30)" name="agreeb">
</form> 

假设有上面这样一个表单,表单的其他部分我们省略,只有一个提交按钮,初始时按钮不可用,当显示30秒倒计时结束后,按钮就会显示“我同意”,并且可以点击激活。
我们用原生的js来实现这一效果:

<script>
var secs = 30;
document.agree.agreeb.disabled=true;
for(var i=1;i<=secs;i++) {
    window.setTimeout("update(" + i + ")", i * 1000);
}
function update(num) {
    if(num == secs) {
        document.agree.agreeb.value =" 我 同 意 ";
        document.agree.agreeb.disabled=false;
    }
    else {
        var printnr = secs-num;
        document.agree.agreeb.value = "请认真查看<服务条款和声明> (" + printnr +")";
    }
}
</script> 

我们设置时间为30秒,当然你也可以设置你想要的时间,将按钮禁用,也就是不可点击,然后循环30秒,通过window.setTimeout调用update()函数,将当前秒与倒计时对比,如果已经倒计时完成则显示“我同意”,并激活按钮。

应用场景2:用户激活短信通道向用户手机发送验证码短信以验明正身
很多网站在验证用户身份的时候需要提高用户信息的安全性,这样就会与用户手机绑定,于是就会向用户手机发送验证码信息,如果用户填写了正确的验证码提交后台,那么操作才会成功。而发送验证码也可能由于各种原因有发送不成功的情况,又不能让用户不停点击发送。如此开发者使用倒计时来处理这类问题,用户激活短信后,如果30秒后未收到验证码短信则可以再允许点击发送短信。

<form action="http://www.lrxin.com/" method="post" name="myform">
    <input type="button" class="button" value="获取手机验证码"  name="phone" onclick="showtime(30)">
</form> 

上面的表单在按钮上添加了一个onclick事件,调用了showtime()函数。

<script>
function showtime(t){
    document.myform.phone.disabled=true;
    for(i=1;i<=t;i++) {
        window.setTimeout("update_p(" + i + ","+t+")", i * 1000);
    }
 
}
 
function update_p(num,t) {
    if(num == t) {
        document.myform.phone.value =" 重新发送 ";
        document.myform.phone.disabled=false;
    }
    else {
        printnr = t-num;
        document.myform.phone.value = " (" + printnr +")秒后重新发送";
    }
}
</script> 

和场景1一样,当点击按钮后,按钮状态为禁用,通过调用window.setTimeout的update_p()显示倒计时,当倒计时完成后,按钮显示“重新发送”,这时按钮状态为可用。

jquery 倒计时

倒计时在WEB上应用非常广泛,如考试系统倒计时,团购网站中的优惠活动倒计时等等。今天,我们来使用jQuery实现一个简单的倒计时功能。

html代码:

<div class="box3 " data-endtime="<?php echo strtotime('2015-12-1');?>" ></div>
<div class="box3 " data-endtime="1448928000"></div>

js代码

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">
var serverTime = <?php echo time();?> * 1000;
$(function(){
    var dateTime = new Date();
    var difference = dateTime.getTime() - serverTime;
    
    setInterval(function(){
      $("[data-endtime]").each(function(){
        var obj = $(this);
        var endTime = new Date(parseInt(obj.data('endtime')) * 1000);
        var nowTime = new Date();
        var nMS=endTime.getTime() - nowTime.getTime() + difference;
        var myD=Math.floor(nMS/(1000 * 60 * 60 * 24));
        var myH=Math.floor(nMS/(1000*60*60)) % 24;
        var myM=Math.floor(nMS/(1000*60)) % 60;
        var myS=Math.floor(nMS/1000) % 60;
        var myMS=Math.floor(nMS/100) % 10;
        if(myD>= 0){
            var str = "开班倒计时:"+myD+"天"+myH+"小时"+myM+"分"+myS+"."+myMS+"秒";
        }else{
            var str = "已结束!";    
        }
        obj.html(str);
      });
    }, 100);
});
</script>

DD_belatedPNG完美解决ie6下png图片半透明问题,支持背景平铺,定位等属性

解决png在ie6下半透明的方法有很多,这里之所以推荐 DD_belatedPNG 是因为 DD_belatedPNG 可以完美的支持 

背景平铺 :background-repeat:(no-repeat ,repeat-x,repeat-y ,repeat

背景定位:background-position:60px 80px;

背景固定:background-attachment:fixed;

等属性。

还支持:鼠标经过效果 a:hover{}

官方网站:http://www.dillerdesign.com/experiment/DD_roundies/

官方引用地址:

0.0.8a.js (官方未压缩版本, ~12Kb) : http://www.dillerdesign.com/experiment/DD_belatedPNG/DD_belatedPNG_0.0.8a.js

0.0.8a-min.js (官方压缩版, ~7Kb) : http://www.dillerdesign.com/experiment/DD_belatedPNG/DD_belatedPNG_0.0.8a-min.js

———————————-

使用方法 :

<!--[if IE 6]> 
<script type="text/javascript" src="DD_belatedPNG.js" ></script> 
<script type="text/javascript"> DD_belatedPNG.fix('.trans,.box , a:hover, .png_bg'); </script> 
<![endif]--> 

引用函数是 DD_belatedPNG.fix() , 括号里分别填写应用 PNG-24 的 CSS 选择器(可使用ID选择器和类选择器)和应用类型(分为 img 标签和 background 属性两种)。

<script type="text/javascript">
    DD_belatedPNG.fix('#box, img');
</script>

或者

<script type="text/javascript">
    DD_belatedPNG.fix('.header, background');
</script>

等,这些可以简写成

<script type="text/javascript">
    DD_belatedPNG.fix('#box-one, .header, img, background');
</script>

在或者像本例子中直接使用 * 号,表示应用所有 css 选择器及 xhtml 标签。

<script type="text/javascript">
    DD_belatedPNG.fix('*');
</script>

DD_belatedPNG.rar:百度网盘http://pan.baidu.com/s/1dDwKBXv

百度JS模板引擎 baiduTemplate

BaiduTemplate

最简单好用的JS模板引擎,JS语法学习无成本,调用也只是一个函数哦!

项目地址:http://tangram.baidu.com/BaiduTemplate/

//直接复制即可使用,记得要下载baiduTemplate.js
//index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>test</title>

<!-- 引入baiduTemplate -->
<script type="text/javascript" src="./baiduTemplate.js"></script>

</head>
<body>
<div id='result'></div>

<!-- 模板1开始,可以使用script(type设置为text/html)来存放模板片段,并且用id标示 -->
<script id="t:_1234-abcd-1" type="text/html">
<div>
    <!-- 我是注释,语法均为Javascript原生语法,默认分割符为 <% %> ,也可以自定义,参见API部分 -->
    <!-- 输出变量语句,输出title -->
    <h1>title:<%=title%></h1>
    <!-- 判断语句if else-->
    <%if(list.length>1) { %>
        <h2>输出list,共有<%=list.length%>个元素</h2>
        <ul>
            <!-- 循环语句 for-->
            <%for(var i=0;i<5;i++){%>
                <li><%=list[i]%></li>
            <%}%>
        </ul>
    <%}else{%>
        <h2>没有list数据</h2>   
    <%}%>
</div>  
</script>
<!-- 模板1结束 -->

<!-- 使用模板 -->
<script type="text/javascript">
var data={
    "title":'欢迎使用baiduTemplate',
    "list":[
        'test1:默认支持HTML转义,如输出<script>,也可以关掉,语法<:=value> 详见API',
        'test2:',
        'test3:',
        'test4:list[5]未定义,模板系统会输出空'
    ]
};

//使用baidu.template命名空间
var bt=baidu.template;

//可以设置分隔符
//bt.LEFT_DELIMITER='<!';
//bt.RIGHT_DELIMITER='!>';

//可以设置输出变量是否自动HTML转义
//bt.ESCAPE = false;

//最简使用方法
var html=bt('t:_1234-abcd-1',data);

//渲染
document.getElementById('result').innerHTML=html;
</script>

</body>
</html>