• 技术文章 >web前端 >html教程

    html怎么设置封面计时

    藏色散人藏色散人2021-02-25 10:54:17原创989

    html设置封面计时的方法:首先创建一个HTML示例文件;然后定义计时函数jishi(),用来计算停留时间;接着定义一个停止计时的程序stopjishi() ;最后添加停止计时按钮和计时显示的文本框即可。

    本文操作环境:Windows7系统、HTML5、Dell G3电脑。

    HTML网页设计中怎么显示计时访问网页时间

    打开文本编辑器或记事本后,输入基本html标签

    <html>
    <head></head>
    <body></body>
    </html>

    9a9f31e353c8a263d0929ac723d6f7e.png

    点击头标签<head>,在后面输入<script>标签,并且声明几个变量b、c、t。

    <script type="text/javascript">
     var b=0
     var c=0
     var t
     </script>

    e048d26f72df700bc1a5277ba2d5f3e.png

    定义计时函数jishi(),用来计算停留时间。设置setTimeout参数为1000毫秒。【推荐:HTML视频教程

     function jishi()
     {
      document.getElementById('tt').value=c
      c=c+1
      t=setTimeout("jishi()",1000)
      if(c==60)
      {
      c=0;
      b=b+1;
      xs.value=b
      }
    }

    03bb9c90694187aeb4f0c1ba11b91bc.png

    然后再定义一个停止计时的程序stopjishi()

    function stopjishi()
    {
    clearTimeout(t)
    }

    20400117001d5f9e246589aa2889c04.png

    点击<body>标签,使网页在打开时开始计时

    <body onLoad="jishi()">

    256fe8ef4aad9105eccb3e0f2298079.png

    然后,在下面正文中添加停止计时按钮和计时显示的文本框。

    <form>
    <input type="button" value="停止计时!" onClick="stopjishi()">
    <br><br>

    您已经停留<input id="xs">分钟

    <input id="tt">秒<br><br>
    </form>

    3c7fe1751b6adcb1ac6a1d4053def70.png

    再添加一些文字说明,计时程序完成。保存编好的代码为html格式,打开网页看下效果吧!

    <p>
    打开网页后开始从0计时。点击网页上的“停止计时”按钮可停止。
    </p>

    3a7741463175ce8c54e1938edcd83c0.png

    以上就是html怎么设置封面计时的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:html
    上一篇:html引入js不生效怎么办 下一篇:html如何让字体自动变色
    PHP编程就业班

    相关文章推荐

    • 术语html指的是什么• uniapp与HTML的区别是什么• 浅谈VSCode无需插件自动补全html标签、style样式的方法• html点击input没有出现光标怎么办• html引入js不生效怎么办

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网