定时器的使用(秒表+点击图片变大)

最新推荐文章于 2024-02-21 17:02:50 发布

荒--

最新推荐文章于 2024-02-21 17:02:50 发布

阅读量585

点赞数

分类专栏： WEB基础

本文链接：https://blog.csdn.net/wangqing84411433/article/details/70211234

版权

WEB基础专栏收录该内容

30 篇文章 1 订阅

订阅专栏

样式代码如下：

<!DOCTYPE html>
<html>
<head>
<title>秒表定时器</title>
<meta charset="utf-8" />
<style type="text/css">
  #d1{
    width:300px;
    margin:10px auto;
    border:2px solid #CCC;
     text-align:center;
  }
  p{
    width:80px;
    height:30px;
    border:2px solid red;
    margin:8px auto;
    line-height:30px;
    font-size:20px;
  }
  #d2{
   width:80px;
   height:80px;
   border:2px solid #CCC;
   background-color:green;
   margin:20px auto;
  }
  h3{
    text-align:center;
  }
  #biger{
    width:200px;
    height:200px;
    border:2px solid #CCC;
    background-color:green;
    margin:20px auto;
  }
</style>
<script type="text/javascript">
  var id;
  var flag = false;
  function start(){
	if(flag){
	  return true;
	}
	var p = document.getElementById("result");
	var i = 0;
	id = setInterval(function(){
	  i += 1;
	  p.innerHTML = i;
	}, 1000);
	flag = true;
  }
  function stop(){
	if(flag){
	  clearInterval(id);
	  flag = false;
	}
  }
  
  //方法不唯一
  var id3;
  function change(){
	var d = document.getElementById("d2");
	//增加id属性(也可是使用class属性,但是要注意选择器的优先级)
	d.id = "biger";
	id3 = setTimeout(function(){
	  	d.id = "d2";//id属性不能为空
	  	clearTimeout(id3);
	}, 2000);
  }
</script>
</head>
<body>
  <div id="d1">
    <h1>秒表</h1>
    <input type="button" value="开始" οnclick="start()"/>
    <input type="button" value="停止" οnclick="stop()"/>
    <p id="result"></p>
  </div>
   <h4><span style="color:red">注意事项:</span>
  两个按钮要考虑到多次点击的情况,使之互不影响,通过boolean来实现
  </h4>
  <div id="d2" οnclick="change();"></div>
  <h3>点击该图片时候,图片变大,2秒后回复原状</h3>
  <h4><span style="color:red">注意事项:</span>
  div在点击时要增加动态样式,可以使用切换className属性或者切换id属性，
      但是若二者都使用时候,class属性覆盖id属性会失败,因为选择器优先级问题
  </h4>
</body>
</html

荒--

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
定时器的使用(秒表+点击图片变大)

样式代码如下：秒表定时器 #d1{ width:300px; margin:10px auto; border:2px solid #CCC; text-align:center; } p{ width:80px; height:30px; border:2px solid red; margin:8px
复制链接

扫一扫