专注于前端开发
我们一直未放弃

js实现倒计时效果(小于10补零)

admin阅读(50)

JS代码

function checkTime(i) {
          if (i<10) {
            i = "0" +i;
          }
          return i;
        };
    function GetRTime(t){
            h=Math.floor(t/60/60);
            m=Math.floor(t/60%60);
            s=Math.floor(t%60);
        d = checkTime(d);
            h = checkTime(h);
            m = checkTime(m);
            s = checkTime(s); 
            $(".hours").val(h);
            $(".minutes").val(m);
            $(".seconds").val(s);
            $(".dot").html(":");
        }

JS常用取整数、四舍五入、随机数、取余数等方法

admin阅读(59)

取整

// 丢弃小数部分,保留整数部分
parseInt(5/2)  //结果2

向上取整

// 向上取整,有小数就整数部分加1
Math.ceil(5/2)  //结果3

向下取整

// 向下取整,丢弃小数部分
Math.floor(5/2)  //结果2

四舍五入

// 四舍五入
Math.round(5/2)  //结果3

随机数

//随机数
random()  //结果0-1随机数

取余

 // 取余
6%4  //结果2 

JS实现倒计时功能

admin阅读(40)

相关代码

var timer = 120;
        function countDown() {
            timer = timer - 1;
            $(".count-down .cs").html(parseInt(timer/60));
            $(".count-down .cm").html(timer%60);
            if (timer == 0) {
                clearInterval(interval);
                // flag = 1;
                // timer = 120;
                // return;
            }
        }
        var interval = setInterval(function () {
            countDown();
        },1000);

通过JS点击获取li元素的值,不使用jquery方法

admin阅读(86)

HTML结构

<ul id="test">
    <li>Glen</li>
    <li>Tane</li>
    <li>John</li>
    <li>Ralph</li>
</ul>

javascript代码

window.onload = function(){
    var obj_lis = document.getElementById("test").getElementsByTagName("li");
    for(i=0;i<obj_lis.length;i++){
        obj_lis[i].onclick = function(){
            alert(this.innerHTML);
        }
    }
}

效果显示

video.js视频播放插件,常用事件方法及实例演示

admin阅读(203)

插件描述:Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器。(要支持ie低版本请下载5.4.3版 )

使用方法

在页面中引用video-js.cs样式文件和video.js

<link href="video-js.css" rel="stylesheet" type="text/css">
<script src="video.js"></script>

设置flash路径,Video.js会在不支持html5的浏览中使用flash播放视频文件,注意:支持ie低版本才考虑此方案。

<script>
    videojs.options.flash.swf = "video-js.swf";
</script>

HTML代码

<video id="my-video" class="video-js" controls preload="auto" width="320" height="140" x5-playsinline playsinline webkit-playsinline="true" poster="images/1.jpg" data-setup="{}">
        <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
        <p class="vjs-no-js">视频格式不支持!</p>
    </video>

注意:x5-playsinline playsinline webkit-playsinline=”true” 此属性为让播放时候视频不弹出播放,如需要弹出播放请删除此代码。

JS代码

var myPlayer = videojs('my-video');
videojs("my-video").ready(function () {
    var myPlayer = this;
    myPlayer.play();
});

添加绑定事件

videojs("my-video").ready(function () {
            var myPlayer = this;
            myPlayer.play();
            //暂停事件监听
            this.on('pause', function () {
            });
            //播放事件监听
            this.on('play', function () {
            });
        });

点击查看实例

jQuery出现的新添加元素点击事件无效解决方案

admin阅读(245)

在jquery1.9之前,可以使用live方法, live() 方法为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。

$('.click-btn').live('click',function(){
    alert(0);
    //注意此方法针对jquery 1.9后的版本无效
 });

在Jquery1.9版本之后,移除了live方法,使用.on方便代替,但直接将.live换成.on并不会起作用。解决办法如下:

$(document).on('click','.click-btn',function(){
    alert(0);
    //.click-btn为你新增的class,也可以使用ul li这样的写法
 });

js获取宽度 ,各种高度宽度document.body.clientWidth , document.body.clientHeight,window.screen.width 等等

admin阅读(516)

为方便我们了解各种屏幕宽高,JS获取方法如下

网页可见区域宽: document.body.clientWidth

网页可见区域高: document.body.clientHeight

网页可见区域宽: document.body.offsetWidth (包括边线的宽)

网页可见区域高: document.body.offsetHeight (包括边线的高)

网页正文全文宽: document.body.scrollWidth

网页正文全文高: document.body.scrollHeight

网页被卷去的高: document.body.scrollTop

网页被卷去的左: document.body.scrollLeft

网页正文部分上: window.screenTop

网页正文部分左: window.screenLeft

屏幕分辨率的高: window.screen.height

屏幕分辨率的宽: window.screen.width

屏幕可用工作区高度: window.screen.availHeight

屏幕可用工作区宽度: window.screen.availWidth

function screenInfo(){
   var  s = "";
   s += "\r\n网页可见区域宽:"+ document.body.clientWidth;
   s += "\r\n网页可见区域高:"+ document.body.clientHeight;
   s += "\r\n网页可见区域宽:"+ document.body.offsetWidth  +" (包括边线的宽)";
   s += "\r\n网页可见区域高:"+ document.body.offsetHeight +" (包括边线的宽)";
   s += "\r\n网页正文全文宽:"+ document.body.scrollWidth;
   s += "\r\n网页正文全文高:"+ document.body.scrollHeight;
   s += "\r\n网页被卷去的高:"+ document.body.scrollTop;
   s += "\r\n网页被卷去的左:"+ document.body.scrollLeft;
   s += "\r\n网页正文部分上:"+ window.screenTop;
   s += "\r\n网页正文部分左:"+ window.screenLeft;
   s += "\r\n屏幕分辨率的高:"+ window.screen.height;
   s += "\r\n屏幕分辨率的宽:"+ window.screen.width;
   s += "\r\n屏幕可用工作区高度:"+ window.screen.availHeight;
   s += "\r\n屏幕可用工作区宽度:"+ window.screen.availWidth;
   alert(s);

解决ios微信端失焦键盘隐藏后,被顶起的页面不回弹问题

admin阅读(591)

问题:测试发现ios微信端浏览器中,input失焦后,因软键盘顶起的页面没有回弹到原来位置,需手动滑动一下页面才可以恢复;android端没有发现这个问题
解决方法:当失焦后,页面自动滚动到原来位置

$('input,textarea').on('blur', function() {
    var ua = navigator.userAgent.toLowerCase();
    if(/micromessenger/.test(ua)) {
        if(/iphone|ipad|ipod/.test(ua)) {
            var currentPosition, timer;
            var speed = 1; 
            timer = setInterval(function() {
                currentPosition=document.documentElement.scrollTop || document.body.scrollTop;
                currentPosition-=speed;
                window.scrollTo(0,currentPosition);
                currentPosition+=speed; 
                window.scrollTo(0,currentPosition);
                clearInterval(timer);
            }, 1);
        }
    }
});
Vue.js中
Vue.directive('iosbugscroll', {
  inserted: function(el, binding, vnode) {
    var ua = navigator.userAgent.toLowerCase();
    if(/micromessenger/.test(ua)) {
      if(/iphone|ipad|ipod/.test(ua)) {
        // input、textarea被组件包装的场景
        const childInput = el.getElementsByTagName('input');
        const childTextarea = el.getElementsByTagName('textarea');
        for (let i = 0; i < childInput.length; i++) { 
          childInput[i].onblur = function temporaryRepair() {
            setTimeout(function() {
              checkWxScroll();
            }, 200);
          };
        }
       
        for (let i = 0; i < childTextarea.length; i++) {
          childSelect[i].onblur = function temporaryRepair() {
            setTimeout(function() {
              checkWxScroll();
            }, 200);
          };
        }
        // input、textarea中的场景
        el.onblur = function temporaryRepair() {
          setTimeout(function() {
            checkWxScroll();
          }, 200);
        };
      }
    }
  }
});

function checkWxScroll() {
  var currentPosition, timer;
  var speed = 1; 
  timer = setInterval(function() {
    currentPosition=document.documentElement.scrollTop || document.body.scrollTop;
    currentPosition-=speed;
    window.scrollTo(0,currentPosition);
    currentPosition+=speed; 
    window.scrollTo(0,currentPosition);
    clearInterval(timer);
  }, 1);
}

使用时

<input  type="text" v-iosbugscroll />