实现复选框及图片切换

最新推荐文章于 2022-05-07 15:00:26 发布

11-phpmin

最新推荐文章于 2022-05-07 15:00:26 发布

阅读量352

点赞数

分类专栏：基础

本文链接：https://blog.csdn.net/wangmin_12/article/details/8631424

版权

基础专栏收录该内容

23 篇文章 0 订阅

订阅专栏

一、实现复选框的全选、全不选、反选
<html>
<head>
</head>
<script>
function selectAll()
{
for(var i=1;i<=3;i++)
{
document.getElementsByName("chec"+i)[0].checked=true;
}
}
function Noselect()
{
for(var i=1;i<=3;i++)
{
document.getElementsByName("chec"+i)[0].checked=false;
}
}
function fanxuan()
{
for(var i=1;i<=3;i++)
{

if(document.getElementsByName("chec"+i)[0].checked==true)
{
document.getElementsByName("chec"+i)[0].checked=false;

}
else{document.getElementsByName("chec"+i)[0].checked=true;}
}
}
</script>
<body>
<table>
<tr>
  <td><input type="checkbox" name="chec1"></td>
  <td>蔬菜</td>
  <td>2013-02-28</td>

</tr>
<tr>
  <td><input type="checkbox" name="chec2"></td>
  <td>水果</td>
  <td>2013-02-28</td>
</tr>
<tr>
  <td><input type="checkbox" name="chec3"></td>
  <td>零食</td>
  <td>2013-02-28</td>
</tr>
<tr>
  <td><input type="button" value="全选" οnclick="selectAll()"></td>
  <td><input type="button" value="反选" οnclick="fanxuan()"></td>
  <td><input type="button" value="全不选" οnclick="Noselect()"></td>

</tr>
</table>
</body>
</html>
二、实现图片的自动切换
<html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
*{margin:0;border:0;padding:0}
#main{width:450px;height:400;background-color:green;margin:auto}
#head{height:350px;background-color:blue}
#head img{width:440px;height:340px;padding-left:5px;padding-top:5px}
#content li{float:left;list-style:none;width:35px;height:30px;text-align:center;line-height:30px;margin-right:5px;border:1px solid orange}
#content ul{width:360px;margin:auto;margin-top:5px}
</style>
<script>
var count = 1;
var interId="";
  function changeColor(){
   //定义一个计数器

   var img = document.getElementById("img");
   if(count==8)
   {count=0;}
   var k=++count;
   img.src = k+'.jpg';
  for(var i=1;i<=8;i++)
  {
            document.getElementById('tab'+i).style.backgroundColor='';
  }
  document.getElementById('tab'+k).style.backgroundColor='#99CC00';

  }
  function start_change()
  {
   interId=setInterval("changeColor()",1000);
  }
function stop_change()
{
clearInterval(interId);
}
function showPic(n)
{
//清空定时器
stop_change();
document.getElementById("img").src = n+".jpg";
for(var i=1;i<=8;i++)
{
document.getElementById('tab'+i).style.backgroundColor='';
}
document.getElementById('tab'+n).style.backgroundColor='99CC00';
count=n;
}
</script>
</head>

11-phpmin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现复选框及图片切换

一、实现复选框的全选、全不选、反选 function selectAll(){ for(var i=1;i { document.getElementsByName("chec"+i)[0].checked=true; }}function Noselect(){ for(var i=1;i { document.ge
复制链接

扫一扫

专栏目录