利用开关与for实现的小例子

最新推荐文章于 2022-04-18 10:50:41 发布
最新推荐文章于 2022-04-18 10:50:41 发布
阅读量419 收藏
点赞数
分类专栏： JavaScript积跬步至千里 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wstpa/article/details/44891225
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>以最简单的代码实现需求</title>

</head>
<body>
<ul id="ul1">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<script type="text/javascript">
var oUl=document.getElementById('ul1');
var aLi=oUl.getElementsByTagName('li');
var str="";
for (var i = 0; i < aLi.length; i++) {
    aLi[i].bBtn=true;
    if(i%3==0){
        aLi[i].color="red";
        aLi[i].style.background="red";
    }else if(i%3==1){
        aLi[i].color="yellow";
        aLi[i].style.background="yellow";
    }else{
        aLi[i].color="blue";
        aLi[i].style.background="blue";
    }
    aLi[i].onmouseover=function(){
        if (this.bBtn) {
            this.style.background="green";
        };

    }
    aLi[i].onmouseout=function(){
        if (this.bBtn) {
            this.style.background=this.color;
        };

    }
    aLi[i].onclick=function(){
        if(this.bBtn){
            this.style.background="#000";
            this.bBtn=false;
        }else{
            this.style.background=this.color;
            this.bBtn=true;
        }
    }
};
</script>   
</body>
</html>
见面时的呼吸都曾反复练习
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
开关电源-电路原理与设计
让你爱上电路设计
04-10 7775
内容包括高频变压器及其骨架Bobbin的介绍以及变压器绕制的一个实例，纹波测量方法以及降低纹波的方法，电感量的计算与绕制，电源功率的测量，开关电源的拓朴结构介绍，散热处理，开关电源的分类等。
CSS实现开关按钮三例
在线学习web前端开发教程
01-19 1294
我们将使用纯CSS打造一些切换开关并使其拥有类似于checkbox的用户体验。 很多时候我们都需要用户通过勾选/取消checkbox来表明他们对一些问题的答案。我们设置了一个标签，一个checkbox，并在提交表单后获取checkbox值，以查看用户是否已经选中或取消选中该checkbox。我们都知道默认的的checkbox长啥样，而且还不能通过纯CSS的方式来设置checkbox的样式。这种元素...
Proteus——开关控制流水灯的实现
不知何人的小屋
04-18 6155
系列文章目录 Proteus——开关控制流水灯的实现 目录系列文章目录前言一、Proteus实际图二、代码 前言 Proteus是比较好的仿真单片机及外围器件的工具，现在用的比较广泛，本文附上原理图以及源码。 一、Proteus实际图 Proteus具体使用方法可参考 二、代码 #include <reg51.h> #include <intrins.h> sbit k1 = P3^2; void delay() //@12.000MHz { unsigned char
cmd for 遍历目录_dos下遍历目录和文件的代码(主要利用for命令)
weixin_34565946的博客
12-23 1811
对指定路径指定文件进行遍历的程序，这里有多个批处理代码，但运行好像有些问题，大家可以根据需要选择-===== 文件夹结构 =============================================D:\test---A Folder 1|-----A file 1.txt|-----A file 2.txt|-----A file 3.txt---B Folder 2|-----B...
让网页背景图片 固定，不随缩小放大而变化
热门推荐
道路是曲折的，前途是光明的
09-12 1万+
最近在百度首页，缩小放大时，发现背景图片一直保持不变，只是内容在变化，看看了源码，才知道怎么回事。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * {margin: 0;padding: 0}
js中offsetParent，offsetLeft的兼容问题
道路是曲折的，前途是光明的
08-11 2878
一、offsetParent 先简单的来个结构,三个嵌套的div，主要是找div3的offsetParent<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * {margin: 0;paddin
firstChild与firstElementChild的兼容处理
道路是曲折的，前途是光明的
11-24 2871
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload=function(){ var oUl=document.getElementById(
简单的图片轮播（重要的是思想）
道路是曲折的，前途是光明的
05-18 1692
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播</title> <style type="text/css"> * {margin:0;padding: 0} ul {list-style: none;} img {border: none;} #
拍平多维数组
道路是曲折的，前途是光明的
04-26 1308
//上次参加阿里web前端笔试（本人小白，只是为了看看自己距离web前端还有多远距离），结果很悲伤。里面有个题是说拍平数组。当初没做出来。          Document          var arr=[1,2,3,4,5,3,2,1]     function show(arr){         var json={};         var
js闭包总结
道路是曲折的，前途是光明的
08-09 991
学了，也看了一些关于闭包的东西，做个总结，以备不时之需，可能有不足的地方，我对闭包也不是很了解。一、什么是闭包？ 闭包百度一搜，会有太多的解释。 闭包就是嵌套在函数里面的内部函数，并且该内部函数可以访问外部函数声明的所有局部变量、参数、和其它内部函数。当该内部函数在外部函数被调用时就生成了闭包。说了一堆，举例说明：function wai(){ var num=1; functi
数组去重-两个for
道路是曲折的，前途是光明的
04-26 903
//要点：1、新建一个空数组，result //2、将原数组每项与result中的每项做比较，不相等就push到result中，反之则不添加。          Document          var arr=[48,13,25,1,32,15,41,3,5,1,25,48]          function doWeight(arr){       
getBoundingClientRect（）
道路是曲折的，前途是光明的
09-08 854
一、getBoundingClientRect（），元素到可视区的距离 主要是在ie下有个2像素的差别。可以封装一个函数：function GetRect(element){ var rect=element.getBoundingClientRect(); var top=document.documentElement.clientTop; //非ie是0，ie是2；
小效果：商品抢购（多个）
道路是曲折的，前途是光明的
05-08 854
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * {margin: 0;padding: 0} ul {list-style: none;} img {border: none;
利用JSON-数组去重
道路是曲折的，前途是光明的
04-26 835
Document          var arr=[1,2,3,4,5,3,2,1]     function show(arr){         var json={};         var result=[];         for (var i = 0; i             //json.arr[i]) json.1 undefind     
多图片滚动
道路是曲折的，前途是光明的
05-03 803
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * {margin:0;padding: 0} ul {list-style: none;} img {border: none;o
函数与变量的预解析
道路是曲折的，前途是光明的
04-04 785
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>函数、变量预解析</title> </head> <body> <script type="text/javascript"> //函数声明时：能显示123，因为把function提到了show（）前了，预解析了
函数之间传参，获取别的函数内的变量值
道路是曲折的，前途是光明的
08-09 733
函数之间想要达成战略联盟，怎么也得资源共享一下吧。function aa(){ var value="999黄金"; bb(value) }现在假如有个函数bb想要得到aa函数内部的‘999黄金’，就可以采用传参的。function bb(val){ var mySelf=val; alert(mySelf) } aa(); //"999黄金"第二种，可以建个全局变量
函数的预解析和逐行解读
道路是曲折的，前途是光明的
05-18 654
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- js解析器： 1、预解析： var function 参数。。 所有变量解析为 ：var 变量名=undefined 函数解析为整体：
Flex for ArcGIS开发指南
Flex for ArcGIS是一种基于Adobe Flex技术的开发框架，用于构建与Esri的ArcGIS平台交互的Web应用程序。它允许开发者创建具有地图功能、地理处理工具和空间分析能力的用户界面。这篇文档是三峡大学土木水电学院3S实验...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值