关于时间倒计时 暂停 然后继续开始（延伸 li轮流显示 hover移入暂停 mouseover移出继续开始）

最新推荐文章于 2022-07-16 14:20:11 发布
最新推荐文章于 2022-07-16 14:20:11 发布
阅读量960 收藏 1
点赞数
文章标签： html jquery 对象
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26577163/article/details/56676368
版权
1.时间倒计时 暂停 然后继续开始
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
< html >
   < head >
     < base  href="<%=basePath%>">
     
     < title >定时器的js实现</ title >
       < script  language = "javascript"  type = "text/javascript" >
         var count=0;
         var a=true;
         function init(){
             setInterval(getJindu,100);//每隔1秒执行函数getJindu
         }
         function getJindu(){
             if(a){
                 document.getElementById("counter").innerHTML=count++;
             }else{
                 document.getElementById("counter").innerHTML=count;
             }
         }
         function stopTimer(){
             a=false;
         }
         function startTimer(){
             a=true;
         }
     </ script >
 
     </ head >
     < body  style = "padding-left: 6px; padding-right: 8px;"  onload = "init();" >
     < div  id = "counter" ></ div >
     < input  type = "button"  value = "点击开始"  onclick = "startTimer();" />< input  type = "button"  value = "点击停止"  onclick = "stopTimer();" />
   </ body >
</ html >
2.延伸 li轮流显示 hover移入暂停 mouseover移出继续开始
===============css===============
.rankpic_left0{width: 247.5px; height: 398px;overflow: hidden;/* border: 1px solid #efefef;*/}
.rankImg ul{width: 100%; height: 100%;}
.rankImg ul li{border-bottom: 1px solid #efefef; cursor: pointer; }
.rankImg ul li p.oTitle,.rankImg ul .oTitle{width: 100%; height: 35px; line-height: 35px; cursor: pointer;}
.rankImg ul li .open{width: 100%; height: 145px; overflow: hidden;}
.open_img{width: 100%; height: 100%; position: relative;}
.rankImg ul li:hover .open{ display: block;}
.rankImg ul li:hover p.oTitle{ display: none;}


==================html============
<div class="rankpic_left0 rankImg fl">
<ul>
      <li>
      <div class="open dpb">
      <div class="open_img effect0">
          <img src="{$votelist.5.miniurl}">
      </div>
      </div>
      <p class="dpn oTitle">sdfdfs</p>
      </li>
      <li>
      <div class="open dpn">
      <div class="open_img"><img src="{$votelist.5.miniurl}"></div>
      </div>
      <p class="oTitle dpb">sdfdfs</p>
      </li>
      <li>
      <div class="open dpn">
      <div class="open_img">
          <img src="{$votelist.5.miniurl}">
      </div>
      </div>
      <p class="oTitle dpb">sdfdfs</p>
      </li>
      <li>
      <div class="open dpn">
      <div class="open_img"><img src="{$votelist.5.miniurl}"></div>
      </div>
      <p class="oTitle dpb">sdfdfs</p>
      </li>
      <li>
      <div class="open dpn">
      <div class="open_img"><img src="{$votelist.5.miniurl}"></div>
      </div>
      <p class="oTitle dpb">sdfdfs</p>
      </li>
      <li>
      <div class="open dpn">
      <div class="open_img"><img src="{$votelist.5.miniurl}"></div>
      </div>
      <p class="oTitle dpb">sdfdfs</p>
      </li>
      <li>
      <div class="open dpn">
      <div class="open_img"><img src="{$votelist.5.miniurl}"></div>
      </div>
      <p class="oTitle dpb">sdfdfs</p>
      </li>
      <p class="oTitle dpb">其他</p>
      </ul>
  </div>



=====js代码=========
$(function () {
    open();
$(".rankImg ul li").hover(function(){
a=true;
index = $(this).index();
oLi= index;
openShow();
// console.log(index);
});         
$(".rankImg ul li").mouseover(function(){
a=false;
});
})




var a=true;
var oLi = 0;
var index;
function open(){
setInterval(addoLi,2000);
}


function addoLi(){
if (a == true) {
oLi++;
   if(oLi>= 6){
    oLi=-1;
   }
   openShow();
}else{
oLi= index;
openShow();
}
}


function openShow(){
$(".rankImg ul li").eq(oLi).children(".open").addClass("dpb").removeClass("dpn");
$(".rankImg ul li").eq(oLi).children("p").addClass("dpn").removeClass("dpb");
$(".rankImg ul li").eq(oLi).siblings().children(".open").addClass("dpn").removeClass("dpb");
$(".rankImg ul li").eq(oLi).siblings().children("p").addClass("dpb").removeClass("dpn");
}

qq_26577163
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery实现的日历日程，日历显示日程条数，鼠标移入移出显示日程，ajax获取数据
12-21
jquery实现的日历日程，日历显示日程条数，鼠标移入移出显示日程，ajax获取数据 日历，日程，日历日程，鼠标移入移出，mouseover，mouseout，ajax获取后台数据
vue+js 实现倒计时，鼠标移动停止，无操作自动倒计时
qq_42221321的博客
01-13 1813
vue+js 实现倒计时功能整体功能倒计时代码完整代码分析效果 整体功能 1、刚进入页面时、自动开始倒计时 2、当用户有按键盘、鼠标点击、鼠标滚轮、鼠标移动时，停止倒计时 3、停止鼠标事件等，重新开始倒计时。（这里写的不好，还是从最开始的事件重新减的） 倒计时代码 for (let i = 0; i < 1000; i++) { clearInterval(i); clearTimeout(i); } (function ($) { var funO
【Unity】在物体上方显示UI并实现倒计时功能
qq_33894488的博客
03-01 6263
【Unity】在物体上方显示UI并实现倒计时功能
Unity倒计时动画
weixin_30569153的博客
08-11 600
最近在做一个小游戏开始的时候需要用到倒计时的效果，具体效果为每秒显示3,2,1，GO，然后字体由大到小，透明度由浅到深。下面介绍三种方法。 1.最直接的方法，自己写倒计时的函数，开协程改变字体大小和透明度，这种方法较为简单，下面是我写的代码，其中state为需要改变的Text的text组件 public void WaitForBegin(int time) { ...
unity3d倒计时功能
alayeshi的专栏
10-21 2427
unity3d用C#编写的倒计时 //CountDown.CS using UnityEngine; using System.Collections; using System; public class textTest : MonoBehaviour {     public SpriteText countDown;     public int e
DOTween充当计时器的小技巧
qq_39599879的博客
12-20 2778
发现了用dotween充当定时器的小技巧，非常实用 public void SetSoundVolumeByTime(float startvalue,float endvalue,float time) { inSetSoundVolumeByTime = true; audioMusicSource.volume ...
jQuery中hover与mouseover和mouseout的区别分析
10-23
主要介绍了jQuery中hover与mouseover和mouseout的区别,结合实例分析了jQuery中hover与mouseover和mouseout的区别与使用技巧,需要的朋友可以参考下
mouseover时显示滚动字幕 特效
10-31
mouseover时显示滚动字幕 特效
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
01-21
鼠标移入添加class样式 HTML HTML绑定事件,加入或者移出class为active <div class=col-lg-3 v-on:mouseover=changeActive($event) v-on:mouseout=removeActive($event)> 流量套餐 JS 这里除了active这个class...
unity插件dotween的使用
allenwithno3的博客
04-20 254
每次用到dotween都要查资料，这里先写一点儿占个坑，以后再补：参考视频：（里面讲Sequence真的很不错！）https://www.youtube.com/watch?v=jbYXTLcgmYQ这是我这次用到的一行代码：feverSplashSequence = DOTween.Sequence().Append(feverScreenSplash.DOColor(Color.red, 0....
java简单桌面考试系统（可实现倒计时、暂停功能）
06-25
两个简单的桌面考试系统项目，两种不同的读题方式（暂时只有选择题，题目都有格式要求），里面有详细的注释 Java语言的简单桌面考试系统，可读题答题阅卷查看答案，倒计时，考试过程中可以暂停计时、继续答题，很简单的一个小项目，swing搭的界面
Android开发丶使用RxJava来完成倒计时功能
09-06
使用RxJava来完成倒计时功能，一般使用场景是注册页面的发送验证码。
js实现倒计时器自定义时间和暂停
12-12
js倒计时器可自定义时间和暂停，效果如下，点击start 开始计时，end结束计时 分别复制 H5 css js 代码即可实现，具体的算法在js控制函数中（都写了注释） css html,body{ width:100%;height:100%; } .content{ height:100%;width:100%; } .row-center{ display:flex;flex-direction:row;justify-content:center; align-items:center; } .tc-input-style{ outline:none;border:none;wi
Unity实现倒计时功能
08-19
主要为大家详细介绍了Unity实现倒计时功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
unity倒计时的两种方法
02-21
unity倒计时的两种方法 unity倒计时的两种方法 unity倒计时的两种方法
Unity DOTween.To
_Afra 的博客
11-29 3359
DOTween.To(() => image.fillAmount, x => zFPUIFirstPlayerAreaMaskImage.fillAmount = x, 1, 0.8f).SetEase(Ease.Linear).OnComplete(() => { // Do SomeThing });
协程的活学活用（二）----自制计时器，使用Dotween一样的链式编程
weixin_42977419的博客
09-07 600
频繁开启关闭计时协程，让我利用上篇的内容想写一个计时器，我打算写成类似dotween那样的链式编程。于是就有了下面的Timer类。一个Timer对象就是一个计时器，他会开启一个协程，完成任务后会重新回到池子等待下一次分配。 使用的时候记得标记上出处，禁止转载。 namespace ToolsByLm.Timer { using System.Collections; using System.Collections.Generic; using UnityEngine; .
OneAlive--DOTweent使用--毒圈设计
顽皮细雨的博客
03-19 563
/*** * OneAlive 放逐勇士 * 控制层 * 时间控制脚本 * 控制毒圈的刷新时间以及毒圈的缩小和刷新(demo) * 何张强 * 2018.3.19 第一次创建 * ***/ using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine...
Unity 打字机效果计时器实现和DOTween实现(笔记)
weixin_44954896的博客
07-16 1569
uinty打字机计时器。
js 实现 hover鼠标移入移出时文字颜色变化
最新发布
09-01
要实现hover鼠标移入移出时文字颜色变化，可以使用JavaScript来操作CSS样式。具体实现步骤如下： 1. 首先，在HTML中给需要操作的文字元素设置一个标识id或class。例如，给文字元素添加一个id属性为"myText"。 2. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值