jquery mobiscroll移动端日期选择控件(无乱码)

jquery mobiscroll移动端日期选择控件(无乱码)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

    <title>Mobiscroll日期时间中文精简实例 ( SnoopyChen修改增加中文支持 ceo@vmeitime.com )</title>

    <script src="dev/jquery-1.9.1.js"></script>

    <script src="dev/js/mobiscroll.core-2.5.2.js" type="text/javascript"></script>
	<script src="dev/js/mobiscroll.core-2.5.2-zh.js" type="text/javascript"></script>

	<link href="dev/css/mobiscroll.core-2.5.2.css" rel="stylesheet" type="text/css" />
	<link href="dev/css/mobiscroll.animation-2.5.2.css" rel="stylesheet" type="text/css" />
	<script src="dev/js/mobiscroll.datetime-2.5.1.js" type="text/javascript"></script>
	<script src="dev/js/mobiscroll.datetime-2.5.1-zh.js" type="text/javascript"></script>

	<!-- S 可根据自己喜好引入样式风格文件 -->
	<script src="dev/js/mobiscroll.android-ics-2.5.2.js" type="text/javascript"></script>
	<link href="dev/css/mobiscroll.android-ics-2.5.2.css" rel="stylesheet" type="text/css" />
	<!-- E 可根据自己喜好引入样式风格文件 -->

    <style type="text/css">
        body {
            padding: 0;
            margin: 0;
            font-family: arial, verdana, sans-serif;
            font-size: 12px;
            background: #ddd;
        }
        input, select {
            width: 100%;
            padding: 5px;
            margin: 5px 0;
            border: 1px solid #aaa;
            box-sizing: border-box;
            border-radius: 5px;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -webkit-border-radius: 5px;
        }
        .header {
            border: 1px solid #333;
            background: #111;
            color: white;
            font-weight: bold;
            text-shadow: 0 -1px 1px black;
            background-image: linear-gradient(#3C3C3C,#111);
            background-image: -webkit-gradient(linear,left top,left bottom,from(#3C3C3C),to(#111));
            background-image: -moz-linear-gradient(#3C3C3C,#111);
        }
        .header h1 {
            text-align: center;
            font-size: 16px;
            margin: .6em 0;
            padding: 0;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        .content {
            padding: 15px;
            background: #fff;
        }
       
    </style>

    <script type="text/javascript">
        $(function () {
			var currYear = (new Date()).getFullYear();	
			var opt={};
			opt.date = {preset : 'date'};
			//opt.datetime = { preset : 'datetime', minDate: new Date(2012,3,10,9,22), maxDate: new Date(2014,7,30,15,44), stepMinute: 5  };
			opt.datetime = {preset : 'datetime'};
			opt.time = {preset : 'time'};
			opt.default = {
				theme: 'android-ics light', //皮肤样式
		        display: 'modal', //显示方式 
		        mode: 'scroller', //日期选择模式
				lang:'zh',
		        startYear:currYear - 10, //开始年份
		        endYear:currYear + 10 //结束年份
			};

			$("#appDate").val('').scroller('destroy').scroller($.extend(opt['date'], opt['default']));
		  	var optDateTime = $.extend(opt['datetime'], opt['default']);
		  	var optTime = $.extend(opt['time'], opt['default']);
		    $("#appDateTime").mobiscroll(optDateTime).datetime(optDateTime);
		    $("#appTime").mobiscroll(optTime).time(optTime);
			
			//下面注释部分是上面的参数可以替换改变它的样式
			//希望一起研究插件的朋友加我个人QQ也可以,本人也建个群 291464597 欢迎进群交流。哈哈。这个不能算广告。
			// 直接写参数方法
			//$("#scroller").mobiscroll(opt).date(); 
			// Shorthand for: $("#scroller").mobiscroll({ preset: 'date' });
			//具体参数定义如下
		    //{
		    //preset: 'date', //日期类型--datatime --time,
		    //theme: 'ios', //皮肤其他参数【android-ics light】【android-ics】【ios】【jqm】【sense-ui】【sense-ui】【sense-ui】
										//【wp light】【wp】
		    //mode: "scroller",//操作方式【scroller】【clickpick】【mixed】
		    //display: 'bubble', //显示方【modal】【inline】【bubble】【top】【bottom】
		    //dateFormat: 'yyyy-mm-dd', // 日期格式
		    //setText: '确定', //确认按钮名称
		    //cancelText: '清空',//取消按钮名籍我
		    //dateOrder: 'yymmdd', //面板中日期排列格
		    //dayText: '日', 
		    //monthText: '月',
		    //yearText: '年', //面板中年月日文字
		    //startYear: (new Date()).getFullYear(), //开始年份
		    //endYear: (new Date()).getFullYear() + 9, //结束年份
		    //showNow: true,
		    //nowText: "明天",  //
		    //showOnFocus: false,
		    //height: 45,
		    //width: 90,
		    //rows: 3}

        });
    </script>
</head>

<body>
    <div class="header">
        <h1>Mobiscroll精简实例</h1>
    </div>

    <div class="content">

		<div class="demos">
			<label for="appDate">日期</label>
			<input type="text" name="appDate" id="appDate" />
		</div>
		<div class="demos">
			<label for="appDateTime">日期时间</label>
			<input type="text" name="appDateTime" id="appDateTime" />
		</div>
		<div class="demos">
			<label for="appTime">时间</label>
			<input type="text" name="appTime" id="appTime" />
		</div>
	</div>

</body>
</html>

jquery 数字滚动方法

jquery 数字滚动方法
用的是countUp.js这个插件

target = 目标元素的 ID;
startVal = 开始值;
endVal = 结束值;
decimals = 小数位数,默认值是0;
duration = 动画延迟秒数,默认值是2;

1先初始化

   var options = {  
          useEasing: true,
          useGrouping: false,
          separator: ',',
          decimal: '.',
    };
    var demo = new CountUp('few', 0, 0, 0, 0.5, options);
    if (!demo.error) {  
        demo.start();
    } else {  
        console.error(demo.error);
    }

2更新

  demo.update(6000);

详细参数看http://inorganik.github.io/countUp.js/

jquery JSMpeg.js 播放视频解决不用全屏也能播放

jquery JSMpeg.js 播放视频解决不用全屏也能播放

<!DOCTYPE html>
<html>
<head>
	<title>JSMpeg Stream Client</title>
	<style type="text/css">
		html, body {
			background-color: #111;
			text-align: center;
		}
	</style>
	
</head>
<body>
	<div class="jsmpeg" data-url="/moban/ceshi.ts"></div>
	<script type="text/javascript" src="jsmpeg.min.js"></script>
</body>
</html>

具体使用说明 https://github.com/phoboslab/jsmpeg

jquery.eraser制作擦涂效果

jquery.eraser制作擦涂效果

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta charset="utf-8" />
    <title>
        canvas画图
    </title>
</head>

<body>
    <img id="redux" style="width:540px;" src="http://www.w3school.com.cn/i/ct_html5_canvas_image.gif" />
    <script type="text/javascript" src="/moban/js/jquery.min.js"></script>
    <script type="text/javascript" src="/moban/js/jquery.eraser.js"></script>
    <script type="text/javascript">
    $(function() {
        $('#redux').eraser({
            completeRatio: .6,
            size: 20,
           completeFunction: showResetButton
        });
    })
    function showResetButton(){
    alert('刮完');
}
    </script>
</body>

</html>

ps:jquery.eraser.js源码我修改了 ctx.drawImage( this, 0, 0,width,height ); 这样就能自适应了 所以图片必须设置宽度

jquery倒计时代码

jquery倒计时代码

    <span id="day_show">0天</span>
                <strong id="hour_show">0时</strong>
                <strong id="minute_show">0分</strong>
                <strong id="second_show">0秒</strong>

    timer(50);

    function timer(intDiff) {
        window.setInterval(function() {
            var day = 0,
                hour = 0,
                minute = 0,
                second = 0; //时间默认值
            if (intDiff > 0) {
                day = Math.floor(intDiff / (60 * 60 * 24));
                hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
                minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
                second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
            }
            if (minute <= 9) minute = '0' + minute;
            if (second <= 9) second = '0' + second;
            $('#day_show').html(day + "天");
            $('#hour_show').html('<s id="h"></s>' + hour + '时');
            $('#minute_show').html('<s></s>' + minute + '分');
            $('#second_show').html('<s></s>' + second + '秒');
用于毫秒倒计时
               //countdaojishi1('haomiao_show', 99,10);
            intDiff--;
        }, 1000);
    }








function countdaojishi1(obj, startv, endv) {
    var options = {  
        useEasing: true,
          useGrouping: false,
          separator: ',',
          decimal: '.',
    };
    var demo = new CountUp(obj, startv, endv, 0, 2.5, options);
    if (!demo.error) {  
        demo.start();
    } else {  
        console.error(demo.error);
    }
}

jquery手指触摸滑动放大图片的方法(比较靠谱的方法)

jquery手指触摸滑动放大图片的方法(比较靠谱的方法)

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <title>touch.js demo</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script type="text/javascript" src="{$yuming}/touchjs/js/touch.min.js"></script>
    <script type="text/javascript" src="{$yuming}/touchjs/js/cat.touchjs.js"></script>
    <script type="text/javascript" src="{$yuming}/touchjs/js/jquery-1.10.2.min.js"></script>
</head>
<body>
<style>
    .tcpiccontainer{
        width:100%;
        height: 100%;
        position: absolute;
        left:0px;
        top:0px;
        z-index: 999;
        background: #000;
    }
    .tcpiccontainer img{
        width:100%;
        position: absolute;
        margin-top: 11rem;;
    }
</style>
<div class="tcpiccontainer">
    <img id="targetObj" src="http://demo.somethingwhat.com/images/flower1.jpg" />
</div>




    <script type="text/javascript">
        $(function () {
            var $targetObj = $('#targetObj');
            //初始化设置
            cat.touchjs.init($targetObj, function (left, top, scale, rotate) {
                $('#left').text(left);
                $('#top').text(top);
                $('#scale').text(scale);
                $('#rotate').text(rotate);
                $targetObj.css({
                    left: left,
                    top: top,
                    'transform': 'scale(' + scale + ') rotate(' + rotate + 'deg)',
                    '-webkit-transform': 'scale(' + scale + ') rotate(' + rotate + 'deg)'
                });
            });
            //初始化拖动手势(不需要就注释掉)
//            cat.touchjs.drag($targetObj, function (left, top) {
//                $('#left').text(left);
//                $('#top').text(top);
//            });
            //初始化缩放手势(不需要就注释掉)
            cat.touchjs.scale($targetObj, function (scale) {
                $('#scale').text(scale);
            });
            //初始化旋转手势(不需要就注释掉)
//            cat.touchjs.rotate($targetObj, function (rotate) {
//                $('#rotate').text(rotate);
//            });
        });


    </script>
</body>
</html>

//预览地址
http://wxserver.knowway.cn/home/moban/touchujs.html

jquery 用creatjs preloadjs的方法

jquery 用creatjs preloadjs的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img class="p1_bg" />
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script src="http://cdn.gbtags.com/PreloadJS/0.4.1/preloadjs.min.js"></script>
<script>
    $(function () {
        setupManifest();
        startPreload();

    })
    //开始预加载
    function startPreload() {
        preload = new createjs.LoadQueue(true);
        //注意加载音频文件需要调用如下代码行
        preload.installPlugin(createjs.Sound);
        preload.on("fileload", handleFileLoad);
        preload.on("progress", handleFileProgress);
        preload.on("complete", loadComplete);
        preload.on("error", loadError);
        preload.loadManifest(manifest);
    }

    //处理单个文件加载
    function handleFileLoad(event) {
        console.log("文件类型");
        console.log(event.item);
         $('.'+event.item.id).attr('src',event.item.src);
    }

    //处理加载错误:大家可以修改成错误的文件地址,可在控制台看到此方法调用
    function loadError(evt) {
        console.log("加载出错!",evt.text);
    }

    //已加载完毕进度
    function handleFileProgress(event) {
       console.log("已加载 " + (preload.progress*100|0) + " %");

    }

    //全度资源加载完毕
    function loadComplete(event) {
        console.log("已加载完毕全部资源");
    }
    //定义相关JSON格式文件列表
    function setupManifest() {
        manifest = [
         {
            src:  "/moban/images/1/p1_bg.jpg",
            id: "p1_bg"
        }

        ];
    }
</script>
</body>
</html>