JS--时间器控制图片显示

最新推荐文章于 2022-11-22 21:31:26 发布
最新推荐文章于 2022-11-22 21:31:26 发布
阅读量788 收藏
点赞数
分类专栏： DOM
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27752831/article/details/51544677
版权
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        var count=0;
        var times;
        var stops;
        var flag=true;
        window.οnlοad=function()
        {


            times= window.setInterval("start()",1000);
        }
        function  stop()
        {
            var s = document.getElementById("img1");
            if(flag==true)
            {
                window.clearInterval(times);


                s.style.display = "none";
                flag=false;
                stops = window.setInterval("stop()",1000);
            }
             if(flag==false)
            {


                count++;
                spantime();


                if (count == 5)
                {
                    count=0;


                   flag=true;
                    window.clearInterval(stops);
                    s.style.display = "block";
                    times = window.setInterval("start()", 1000);




                }


            }
        }
        function start()
        {
            count++;
            if(count==5)
            {
                count=0;
                stop();
            }
            else
            {


                      spantime();


            }
        }
        function  spantime()
        {
            var dates =new Date();
            var imgdate =document.getElementById("timeshowlocate");
            var date =dates.getFullYear()+"年"+dates.getMonth()+"月"+dates.getDate()+
                    "日"+dates.getHours()+"时"+dates.getMinutes()+"分"+dates.getSeconds()+"秒";
            imgdate.innerHTML=date;
        }
    </script>
</head>
<body>
    <img src="xx.jpg" id="img1">
<span id="timeshowlocate"></span>


</body>
</html>
狮子悬山
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS在图片上显示时间
12-16
纯JS写的，能在图片上显示时间。学WEB开发的可以拿去看看
js实现图片时间
qq_38259997的博客
12-30 429
js实现图片时间 话不多说上代码 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script> window.onlo...
JavaScript 图片时间效果
qq_45916727的博客
12-03 492
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>pic timer</title> </head> <body> <!-- 图片路径改成自己的路径 --> <img src="../images/0.png" id="h_pic1"> <img src="../images.
js定时间转换图片
05-17
js定时间转换图片
js实现图片时钟--带翻转动画
qq_43302195的博客
12-31 1720
js实现图片时钟–带反转动画 首先上图，先看效果 1. 需求 根据当前系统时间来更改这个时钟，更改时间时，数字向上翻动，转成下一个数字。 2. 编程思路 如果只是根据系统时间来更改图片的话，其实很简单，就是获得每个数字图片的DOM，获得当前系统时间，然后更改其src为指定数字图片就可以了。但是这边想要加入这个反转动画，我们可以指定一个窗口，高度为一个数字图片的大小，再检测到时间变化时，我们在指定的数字图片后加入我们想要改变的数字图片结点，之后设置一个定时器用很小的时间不断向上移动，这样就能出这个上翻的动画
javascript经典特效---按时间不同显示图片.rar
01-07
这些是控制图片显示时间的关键元素。 1. 变量声明：在JavaScript中，我们可以用`var`、`let`或`const`来声明变量，用来存储图片的URL、当前时间、切换间隔等信息。 2. 条件语句：利用`if...else`或`switch`语句，...
JavaScript案例-js轮播图
02-16
3. **CSS样式控制**：通过JavaScript改变元素的CSS样式，例如设置`display`属性来隐藏或显示图片，调整`transform`属性实现平滑的过渡效果。 4. **计时器（Timer）**：使用`setInterval`或`setTimeout`函数可以创建...
原生js按钮控制图片切换代码.zip
07-11
- 添加触发动画的指示器，如点状导航或箭头，让用户知道当前显示的是哪张图片以及可以进行的操作。 - 考虑移动设备的适配，确保代码在不同屏幕尺寸和触摸设备上都能正常工作。 - 实现自动轮播功能，可以通过`...
ft-carousel.js图片无缝轮播切换代码
06-09
`ft-carousel.js` 可能会利用jQuery的选择器来获取图片元素，然后通过`animate()`函数来实现平滑的过渡效果。此外，它可能还包含了自动播放、手动控制（如左右箭头或导航点）和触屏支持等功能，以适应各种用户交互...
JS小功能(setInterval实现图片效果显示时间)实例代码
10-26
主要介绍了setInterval实现图片效果显示时间实例代码，有需要的朋友可以参考一下
js获取图片修改时间
05-01
NULL 博文链接：https://704378737-qq-com.iteye.com/blog/2404219
JS 的时间的获取和图片的添加
matiantian666的博客
07-29 1219
最终效果是这样的：js动态时钟和添加图片 首先要有img文件，文件里要有这几张图片： 新建文件time.html，具体实现 动态时间 window.onload=function(){ var oBody=document.body; var oP=document.getElementById('time'); var aImg=document.
根据不同时间显示不同的图片（JS）
weixin_52063946的博客
07-14 1960
功能：分时间显示不同的图片 早上显示上午好，显示上午的图片 6-10 中午显示中午好，显示中午的图片 10-14 下午 14-20 晚上 20-6 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="v
用js在不同时间显示不同图片和问候
qq_53912756的博客
11-22 781
【代码】用js在不同时间显示不同图片和问候。
在js中用图片显示当前时间
weixin_44436093的博客
01-21 3526
在js中用图片显示当前时间 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style type="t
用JavaScript编写一个图片时间显示器
caijilaoyan的博客
04-23 855
注意：数字图片名称应与本图片数字相同； 代码中所需图片： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片时钟</title> <style type="text/css"> div{text-align: ...
用js实现 根据时间改变图片
王海虎的博客
04-26 3590
window.onload=function tab(){     var oDate1 = new Date();     var oDate2 = new Date('2017-10-20');     var oDate3 = new Date('2017-10-25');     var oDate4 = new Date('2017-11-06');     var oDate5 = n...
jQuery 轮播图 单独控制图片显示时间 完整注释 代码
最新发布
03-27
// 控制图片显示时间，每张图片显示时间不同 var timeArr = [2000, 3000, 2500, 3500]; // 每张图片显示时间的数组 $sliderLi.each(function(i, el) { $(el).data('time', timeArr[i]); // 将每张图片的显示时间...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值