夜光带你走进 前端工程师（三十二 jS ）

最新推荐文章于 2021-11-06 17:20:51 发布
最新推荐文章于 2021-11-06 17:20:51 发布
阅读量184 收藏
点赞数
分类专栏： My thoughts 前端工程师 JS核心技术 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41987706/article/details/90710453
版权

夜光序言：

 

 

 

 

有一种孤独是，想笑却不能笑，想哭却不能哭，总有一个声音在耳边提醒着你：要克制，要坚强，要让他们觉得你不一样。你做到了，旁人投来了艳羡和赞许的目光，你微微笑，微微发颤，微微地有一种只有自己知道的孤独感。

 

 

 

 

 

 

 

 

正文：

 

隔行变色

                      CEO     夜光

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    .box{

    }
    li{
        line-height: 30px;
        list-style-type:none;
    }
    li span{
        margin: 5px;
    }
</style>
<body>
<div class="box">
    <ul>
        <li>
            <span>创客学院</span><span>夜光</span><span>不断成长</span>
        </li>
    </ul>
</div>
</body>
</html>

 

<script>
     window.onload = function(){
         var lis = document.getElementsByTagName("li");
         alert(lis.length);
     }
</script>

<script>
     window.onload = function(){
         var lis = document.getElementsByTagName("li"); // 注意这里运用到的是getElementsByTagName。得到所有的li
     /*    alert(lis.length);  // 弹出所有的li的个数 6*/
         for(var i=0;i<lis.length;i++){
             if(i%2 == 0){   //只有偶数可以被2整除
                 lis[i].style.backgroundColor="#ccc";
             }
         }
     }
</script>

 

//  可以实现隔行变色：

表示出来是奇行的格式

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    .box{

    }
    li{
        line-height: 30px;
        list-style-type:none;
    }
    li span{
        margin: 5px;
    }
  /*  li.hover{
        background-color: aquamarine;
    }*/
    .current{
        background-color: palegreen!important;   //这是一个重点
    }
</style>
<script>
     window.onload = function(){
         var lis = document.getElementsByTagName("li"); // 注意这里运用到的是getElementsByTagName。得到所有的li
     /*    alert(lis.length);  // 弹出所有的li的个数 6*/
         for(var i=0;i<lis.length;i++){
             if(i%2 !== 0){   //只有偶数可以被2整除
                 lis[i].style.backgroundColor="#ccc";
             }
             // 嘿嘿 鼠标经过：li的时候 底色变亮
             lis[i].onmouseover = function(){
                 this.className = "current";     //这里是关键 必须用this 因为特定
             }
         }

     }
</script>
<body>
<div class="box">
    <ul>
        <li>
        <span>创客学院</span><span>夜光</span><span>不断成长</span>
       </li>
        <li>
            <span>创客学院</span><span>夜光</span><span>不断成长</span>
        </li>
        <li>
            <span>创客学院</span><span>夜光</span><span>不断成长</span>
        </li>
        <li>
            <span>创客学院</span><span>夜光</span><span>不断成长</span>
        </li>
        <li>
            <span>创客学院</span><span>夜光</span><span>不断成长</span>
        </li>
        <li>
            <span>创客学院</span><span>夜光</span><span>不断成长</span>
        </li>
    </ul>
</div>
</body>
</html>

还需要调整成上图效果：

帅气

<script>
     window.onload = function(){
         var lis = document.getElementsByTagName("li"); // 注意这里运用到的是getElementsByTagName。得到所有的li
     /*    alert(lis.length);  // 弹出所有的li的个数 6*/
         for(var i=0;i<lis.length;i++){
             if(i%2 !== 0){   //只有偶数可以被2整除
                 lis[i].style.backgroundColor="#ccc";
             }
             // 嘿嘿 鼠标经过：li的时候 底色变亮
             lis[i].onmouseover = function(){
                 this.className = "current";
             };
             // 鼠标不经过，不变色
             lis[i].onmouseout = function(){
                 this.className = "";
             }
         }

     }
</script>

隔行变色复习

                     夜光

 

帅气

 

<script>
     window.onload = function(){
         var lis = document.getElementsByTagName("li"); // 注意这里运用到的是getElementsByTagName。得到所有的li
     /*    alert(lis.length);  // 弹出所有的li的个数 6*/
         for(var i=0;i<lis.length;i++){
             if(i%2 == 0){   //只有偶数可以被2整除
                 lis[i].style.backgroundColor="#ccc";
             }
             else
             {
                 lis[i].style.backgroundColor="red";
             }
             // 嘿嘿 鼠标经过：li的时候 底色变亮
             lis[i].onmouseover = function(){
                 this.className = "current";
             };
             // 鼠标不经过，不变色
             lis[i].onmouseout = function(){
                 this.className = "";
             }
         }

     }
</script>

 

用自定义函数计算一个数组的参数的平均值

Length 帅气

求平均值

                       夜光

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    var arr = [1,2,3,4,5,6];
    var sum =0;
    for(var i=0,a=arr.length;i<a;i++){
        sum=sum+arr[i];
    }
    alert(sum/arr.length);
</script>
</body>
</html>

<script>
 /*   var arr = [1,2,3,4,5,6];
  var sum =0;
  for(var i=0,a=arr.length;i<a;i++){
  sum=sum+arr[i];
  }
  alert(sum/arr.length);*/
    var arr=[1,2,3,4,5];

    function avg(array){
        var len = array.length;
        var sum=0;
        for(var i = 0;i<len;i++){
            sum += array[i];  //sum= sum+arr[i]
        }
        return sum/len;
    }
    avg(arr);
   alert(avg(arr));


</script>

 

//  学会不断总结思考，夜光

 var arr=[1,2,3,4,5];

 function avg(array){
     var len = array.length;
     var sum=0;
     for(var i = 0;i<len;i++){
         sum += array[i];  //sum= sum+arr[i]
     }
     return sum/len;
 }
 avg(arr);
alert(avg(arr));        //输出3

 

 

 

遍历京东背景图片

                                 夜光

 

 

  字符相连

                           夜光

 

数值相加  字符相连

1+1=2；

“你好”+“么”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<script>
    window.onload = function(){
           var a = document.getElementById("a");
           var btn = document.getElementsByTagName("button")[0];  

//这句话 document.getElementsByTagName("button")[0]; 
           btn.onclick = function(){
                var num = Number(a.value);
              /*  alert(a.value + a.value);  //这个不可以相加*/
                alert(num + num);   //   这是重点

           }
    }
</script>
<body>
<input type="text" id="a"/>
<button>点击一下</button>
</body>
</html>

 

//  输出框框中 数字相加之和

 

 

全选和反选

                           夜光

 

面试十分重要  这一块

上下两个盒子【帅气】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<!--//上下两个盒子   因为样式问题-->
<div id="top">  //  上面一个盒子
    <button>全选</button>
    <button>清楚</button>
    <button>反选</button>
</div>
<div id="botton">   //  下面一个盒子
    <ul>
        <li>选项：<input type="checkbox"></li>
    </ul>
</div>
</body>
</html>

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<!--//上下两个盒子   因为样式问题-->
<div id="top">
    <button>全选</button>
    <button>清楚</button>
    <button>反选</button>
</div>
<div id="botton">
    <ul>
        <li>选项：<input type="checkbox"></li>
        <li>选项：<input type="checkbox"></li>
        <li>选项：<input type="checkbox"></li>
        <li>选项：<input type="checkbox"></li>
        <li>选项：<input type="checkbox"></li>
        <li>选项：<input type="checkbox"></li>
        <li>选项：<input type="checkbox"></li>
        <li>选项：<input type="checkbox"></li>
        <li>选项：<input type="checkbox"></li>
    </ul>
</div>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<script>
    window.onload = function(){
          var btns = document.getElementsByTagName("button");  //  getElementsByTagName  这里用到一个集合
          var inputs = document.getElementById("bottom").getElementsByTagName("input");  //这是高端操作
        // bottom里面的input
          btns[0].onclick = function(){    //btns[0]代表的是全选这个按钮
              for(var i=0;i<inputs.length;i++){
                  inputs[i].checked = true;   //选中表单
              }
          }

    }
</script>
<body>
<!--//上下两个盒子   因为样式问题-->
<div id="top">
    <button>全选</button>
    <button>清楚</button>
    <button>反选</button>
</div>
<div id="bottom">    //注意细节  别写错的单词   嘿嘿   
    <ul>
        <li>选项：<input type="checkbox"></li>
        <li>选项：<input type="checkbox"></li>
        <li>选项：<input type="checkbox"></li>
        <li>选项：<input type="checkbox"></li>
        <li>选项：<input type="checkbox"></li>
        <li>选项：<input type="checkbox"></li>
        <li>选项：<input type="checkbox"></li>
        <li>选项：<input type="checkbox"></li>
        <li>选项：<input type="checkbox"></li>
    </ul>
</div>
</body>
</html>

 

 

 

 

 

 

 

 

 

GeniusTeam-夜光
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
夜光带你走进 微信小程序开发（五）擅长的领域
01-03
夜光序言：   不管与你的路有多苦擦干眼泪告诉自己不能哭不怕谁说我是个错误只要你我不放弃永不认输。   正文：  以道御术 / 以术识道 有些东西，如果我们自定义的话，就会和其他小程序风格不一致了~ ...
js利用tab键切换当前页面_JavaScript实现Tab栏切换
weixin_35748288的博客
12-30 667
本文最初发表于博客园，并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我，一起入门和进阶前端。以下是正文。京东网页上，可以看到下面这种tab栏的切换：我们把模型抽象出来，实现一下。举例引入：鼠标悬停时，current元素的背景变色本段我们先举一个例子，因为这里用到了排他思想(先干掉 all，然后保留我一个)。对于理解tab切换，很有帮助。完整的代码实现：button {margi...
js实现tab栏切换案例
m0_62937694的博客
11-06 580
点击某个导航栏，显示对应的内容，在很多网页里面都存在，思路： 利用for循环，注册点击事件，先创建一个样式类，当点击某一个元素时，利用排他思想，清除所有元素样式，然后点击了某个元素，就给被点击的元素添加这个样式的类名； // 排他，其余清除 class 这个类 for (var i = 0;i < lis.length;i++) { lis[i].className = ''; }
this.getName(),this.currentThread(),与Thread.currentThread()
hpccph15的博客
10-08 535
this.getName(),this.currentThread(),与Thread.currentThread()的区别 最近学习多线程时，被这几个弄蒙了，现总结如下： 首先看几个Thread类中的几个方法 （注意黑体字部分） ： public Thread(Runnable target)。分配新的 Thread 对象。这种构造方法与 Thread(null, target,gname)...
Jquery 设置变量元素的className
auxv18104338的博客
05-30 558
$('#'+street)[0].className="current"; //一定要加[0], 或者使用下面的形式$('#'+street).addClass("current"); 参考： $('a[id*="street"]').click(function() {$('input[name="current_street"]').val(this.id)...
【记录问题】自己在写代码中遇到的问题（this）
DespairA的博客
08-27 168
1、制作轮播图中遇到className属性不生效的问题（实则是this的问题） HTML代码段 <div class="focus "> <ol class="circle"> </ol> </div> css代码段 .circle { position: absolute; bottom: 10px; left: 50
行业资料-交通装置-一种带夜光和刹车警示功能的电动车.zip
08-24
行业资料-交通装置-一种带夜光和刹车警示功能的电动车.zip
夜光灯数据灰度值提取
11-15
绝对的原创，也是我第一次做类似的数据处理，里面有我做这个数据原创图片，希望大家能够满意。。。。。。
行业资料-建筑装置-带镜子及钟表的夜光笔.zip
08-18
"带镜子及钟表的夜光笔"是一个独特的产品概念，它结合了实用工具与多功能性，旨在为建筑从业者提供便捷的工作辅助。这款夜光笔不仅具有书写功能，还集成了镜子和时钟，特别适合夜间工作或紧急情况下的使用。 首先，...
统计某年夜光总量、夜光增长率等夜光数据
06-17
夜光遥感是一种利用卫星遥感技术来监测地球表面夜间照明情况的方法，它为我们提供了对全球夜间活动的宏观视角。IDL（Interactive Data Language）是一种强大的编程语言，特别适合处理和分析遥感数据，包括夜光数据。...
完整轮播图代码
热门推荐
yiweichenji的博客
02-02 7万+
无标题文档 *{ padding:0; margin:0; list-style:none; border:0;} .all{ width:500px; height:200px; padding:7px; border:1px solid #ccc;
夜光带你走进 前端工程师（三十七 jS ）
夜光的博客
06-01 333
夜光序言： 如果有人要伤害你，就请他先从我的尸体上踏过去 斩草不除根，春风吹又生 就算粉身碎骨我也要救出你，拦我者，必诛之 我不会让他伤害你的，如果我无法获胜，我……有八成的把握让他和我一起死 正文： 复习 1. 数组 看电影 电影院 座位 ...
夜光带你走进 前端工程师（七）
夜光的博客
05-27 333
夜光序言： 对心灵如水，既柔顺又稳重，既驯服又坚强，可弯而不可折的人，我会永远温柔和真诚。 正文： 1：切片 一般是用ps ,firework , 我说的话是用ps来进行 减少网页加载时间，制作动态效果，优化图像 2：制作切片的工具，准备工作 快捷键c 【ps】 第三个才是，帅气 一：另存psd ...
夜光带你走进 前端工程师（二十九 jS ）
夜光的博客
05-31 332
夜光序言： Do not worry about smiling, my mouth hardly ever smiles, but it doesn’t mean I’m not smiling in my brain. 别为微笑而忧虑，我也很少在表面上微笑，但这并不表示我没在心里微笑。 正文： ...
夜光带你走进 前端工程师（二十二 jS ）
夜光的博客
05-30 269
夜光序言： 西风瘦马浪迹天涯 执剑持酒尽显潇洒 正文： JS 控制样式 我们就JS主要目的： 控制 web 中的前两种 结构 样式 行为 CSS怎么写样式 就是用div 语句 <!DOCTYPE html><html lang="en"><head>...
夜光带你走进 前端工程师（四）
夜光的博客
05-24 245
夜光序言： 在人类前进的道路上，强者与弱者的命运是不同的。弱者不羡慕强者的命运，强者也讨厌弱者的命运。强者带有人性中强悍的一面，弱者带有人性中软弱的一面。强者为弱者开辟道路，但是强者往往为弱者所奴役，就像老人是为大腹便便的游客打鱼一样。 正文： 关键点在于 x,y <img src="sheji.jpg" usemap="...
夜光带你走进 前端工程师（二）
夜光的博客
05-24 235
夜光序言： 只有毅力才会使我们成功，而毅力的来源又在于毫不动摇，坚决采取为达到成功的手段。 正文： 1：按钮属性 Type=”button” <button></button> 2:Range型input元素 3：Checkbox型input元素 4：Radio型input元素 5：用input生...
夜光带你走进 前端工程师（十一）
夜光的博客
05-27 232
夜光序言： 为何所有不快乐 都给了我 一个人吹着风 天色慢慢暗了 回忆开始疯了 月光为谁变柔和 黑夜辗转反侧 正文： 出现下面这个图应该怎么办： <style type="text/css"> body{ padding: 0; margin: 0; ...
夜光带你走进 前端工程师（一）
夜光的博客
05-23 223
夜光序言： 人有了物质才能生存；人有了理想才谈得上生活。你要了解生存与生活的不同吗？动物生存，而人则生活。 正文： 1：ctrl+/ : 可以用显示灰色，那个东西 ctrl+/+shift:用于注释一个部分 <!DOCTYPE html>//ctrl+/ 可以来显示为灰色 {浏览器得知自己要处理的内容是ht...
nppviirs夜光数据预处理
最新发布
09-26
nppviirs夜光数据的预处理通常包括以下几个步骤：原始数据读取、数据预处理、灯光数据网格化、灯光强度统计、地理信息标记和可视化。首先，原始数据需要从NPP或VIIRS卫星获取。然后，对数据进行预处理，包括清除噪声...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值