霓虹灯效果函数作用域

1.霓虹灯效果


<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>霓虹灯效果</title><style type="text/css">* {margin: 0;padding: 0;}#wp {padding:50px 0;display: flex;justify-content: center;align-items: center;border: 1px #f00 solid;}#wp div {margin:50px;border: 1px #f00 solid;background-color: #fff;}.nei {width:100px;height:100px;}.wai {width:508px;height:508px;}.btn-box {display: flex;justify-content: center;align-items: center;height:40px;}.btn-box button {height:40px;width:100px;text-align: center;line-height: 40px;cursor: pointer;margin:0 40px;font-size:20px;}</style></head><body><div id="wp"><div class="wai"><div><div><div><div class="nei"></div></div></div></div></div></div><div class="btn-box"><button type="button" id="outIn">从外到内</button><button type="button" id="inOut">从内到外</button></div></body>
</html>
<script type="text/javascript">var outIn = document.getElementById("outIn");var inOut = document.getElementById("inOut");var wp = document.getElementById("wp");var divs = wp.getElementsByTagName('div');//声明一个存放颜色的数组var colors = ['#fff','#fff','#fff','#fff','#fff'];//点击从外到内outIn.onclick = function(){//随机颜色var r = Math.floor(Math.random()*256);var g = Math.floor(Math.random()*256);var b = Math.floor(Math.random()*256);var rgb = 'rgb('+r+','+g+','+b+')';//把颜色放入数组头部colors.unshift(rgb);// 从尾部删除一个颜色colors.pop();//for 循环divs数组，把对应位置上的colors存放的颜色，添加给对应的divfor(var i=0;i<divs.length;i++){divs[i].style.background = colors[i];}};//点击从内到外inOut.onclick = function(){//随机颜色var r = Math.floor(Math.random()*256);var g = Math.floor(Math.random()*256);var b = Math.floor(Math.random()*256);var rgb = 'rgb('+r+','+g+','+b+')';colors.push(rgb);colors.shift();for(var i=0;i<divs.length;i++){divs[i].style.background = colors[i];}};</script>

2.函数基础

/*函数：具有一定功能的代码块声明函数的关键字是 function函数的结构 function 函数名(){//code}函数的执行：  函数名()函数可以在任何地方声明，也可以在任何地方执行函数可以先执行，再声明，建议先声明再执行函数名区分大小写函数的命名和js变量命名规则一致当函数声明的时候，写在函数内部的代码不会执行，只有当函数调用,也就是执行的时候，写在{}里面的代码才会执行*/aa();function aa(){console.log('四十万人齐卸甲');}function Aa(){console.log('西出阳关无故人');}//执行函数aa();Aa();/*函数的分类自定义函数: 开发者自己声明的函数特点：1.自定义函数，可以没有参数，也可以没有返回值2.函数定义时候的参数叫做形参(形式上的参数)，函数调用时候的参数叫做实参3.函数的返回值，使用return 关键字库函数：js系统提供的函数，例如 push pop substring split...*/// 没有参数也没有返回值function userName(){console.log('常山赵子龙');}//调用userName();console.log(typeof userName); //类型是 function//函数名也可以作为一个变量，赋值给另一个变量var zilong = userName;zilong(); // 可以使用变量调用函数// 有参数，无返回值// 参数：参与代码执行的数据// ab 是一个形式上的参数，没有实际意义function fly(ab){console.log(ab+'，你好！');}fly('圣斗士星矢');fly('孙悟空');fly('孙悟天');/*参数可以有很多个，具体根据需求进行设置,参数可以是任何数据类型1.使用的时候，形参和实参的位置必须一一对应2.形参和{}内部的执行代码的顺序没有必要一一对应3.不是所有的形参都必须在{}中使用*/function info(name,sex,age,love){var str = '姓名:'+name+',年龄:'+age+',性别:'+sex+',爱好:'+love;console.log(str);}info('鲁班','男',250,'打枪');info('露娜',18,'女','打野'); // 使用形参和实参必须对应/*有返回值函数想要有返回，必须使用return 关键字1.返回值可以是任何数据类型2.写在return 下面的代码，不会被执行3.return想返回多个数据的时候，需要借助数组和对象来实现4.没有返回值的函数，实际上返回了 undefined*/
function show(){var str = '黄帝';return str; // 返回 str
}
/*
调用具有返回值的函数，它的返回值是什么，执行结果就是什么
*/
var hd = show();
console.log(hd);function show1(){var arr = [];for(var i=0;i<10;i++){arr.push(i);}return arr;// return下面的代码不会被执行console.log('我不是归人');
}
var arr1 = show1();
console.log(arr1);
// 函数返回多个数据，使用数组的方式返回
function show2(){var str = '百里守约';var arr = ['韩信','刘邦'];var bol = false;return [str,arr,bol];
}console.log(show2());//没有返回值的函数
function show3(){console.log('朝三暮四');
}var s = show3();
console.log(s);

3.函数练习


<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>练习</title><style type="text/css">* {margin: 0;padding: 0;}#wp {width:200px;height: 200px;background: #04BE02;margin: 50px auto;font-size: 100px;text-align: center;line-height: 200px;}</style></head><body><div id="wp" class="ww">悟</div><button id="btn">点击随机改变颜色</button><button id="use">点击$$</button></body>
</html>
<script type="text/javascript">//声明一个随机数函数function rand(m,n){return Math.floor(Math.random()*(n-m+1)+m);}//随机[1,10]console.log(rand(1,10));console.log(rand(0,255));//声明一个随机获取颜色的函数function color(){var r = rand(0,255);var g = rand(0,255);var b = rand(0,255);return 'rgb('+r+','+g+','+b+')';}var btn = document.getElementById("btn");var wp = document.getElementById("wp");btn.onclick = function(){wp.style.background = color();wp.style.color = color();};// 封装一个获取元素的函数$$，根据传入的参数，查找到对应的元素function $$(ele){// 判断参数的类型只能是string且不为空字符串if(typeof ele != 'string' || ele=='' ){return false;}// 获取ele的第一个字符var first = ele.charAt(0);//声明一个html对象，用来接收元素var htmlObj = null;if(first=='#'){var str = ele.slice(1);htmlObj = document.getElementById(str);}else if(first=='.'){var str = ele.slice(1);htmlObj = document.getElementsByClassName(str);}else{htmlObj = document.getElementsByTagName(ele);}return htmlObj;}$$('#use').onclick = function(){wp.style.background = color();wp.style.color = color();$$('.ww')[0].innerHTML = '饭';};
</script>

4.匿名函数


<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>匿名函数</title><style type="text/css">* {margin: 0;padding: 0;}ul,li {list-style-type: none;}ul>li {height:50px;border:1px #f00 solid;margin-bottom:20px;background:#999;}</style></head><body><button type="button" id="btn">点击</button><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li></ul></body>
</html>
<script type="text/javascript">/*函数也可以分为匿名函数和具名函数具名函数：具有名字的函数匿名函数：没有名字的函数匿名函数，多用于绑定事件*/var btn = document.getElementById("btn");btn.onclick = function(){console.log('此为匿名函数');};// 匿名函数直接赋值给变量var aa = function(){console.log('朱见泽');};aa();function fun(){}// 立即执行的匿名函数(function(){console.log('朱见深');})();(function(){console.log('朱见济');})();/* 小括号的作用: 把小括号内部的代码解析结果返回fun();*/(function(k){console.log(k*3);})(5);var lis = document.getElementsByTagName('li');function aa(k){lis[k].onclick = function(){alert(k+1);};}for(var i=0;i<10;i++){(function(k){lis[k].onclick = function(){alert(k+1);};})(i);}</script>

5.作用域

/*作用域：变量和函数生效的范围根据作用域的范围可以把变量和函数分为两种1.全局变量和全局函数生命周期和当前页面的生命周期一样2.局部变量和局部函数包含局部变量的函数，运行完毕以后，该局部变量就会被js的垃圾回收机制收回*/var str1 = '秦克勤';function show(){var str2 = '李逵';console.log(str1+str2);}function info(){var str1 = '秦可卿';console.log(str1); }show();info();/*变量的声明和函数的定义都会被前置它们会被前置到当前作用域的最前面*/unil();function unil(){console.log('小心得天下，大意失荆州');function three(){console.log('司马睿');}three();}// three();/*js中的原则，在js全局范围中，不能访问函数内部声明的变量或者函数，然而在一个函数中，可以访问外面声明的变量和函数，简言之就是外面看不见里面，里面看得见外面如果两个函数同名，则第二个函数会把第一个函数覆盖当在函数的内部声明变量的时候，如果不加var关键字，此时变量就相当于是一个全局变量，前提是没有重名的局部变量，如果加上var关键字，就是一个局部变量*/ say();function say(){console.log('为往圣继绝学');}function say(){abc = '诛仙';console.log('为万世开太平'+abc);}function zhuxian(){console.log(abc);}zhuxian();/*window： 所有的全局变量和全局函数，都是声明在window上，可以理解为都是window对象的属性*/ window.say(); //通过window，执行say()console.log(window.abc);function run(){console.log(this);}run(); // 全局函数的this是window// window.alert('window');function see(){// var name = '铁木真';function abc(){// var name1 = '托雷';function ksy(){// var name1 = '忽必烈';console.log(name1);var name1 = '忽必烈';}ksy();}abc();}see();/*就近原则，在函数内部优先选择当前作用域的变量，如果当前作用域中没有该变量，就往该函数的外部一层作用域中查找变量，这杨依次寻找下去，直到找到全局作用域的位置，如果还没有该变量，就报错，如果有就输出*/ </script><script type="text/javascript">var str3 = '叶剑英';// console.log(str4);</script><script type="text/javascript">console.log(str3);str4 = '林彪';</script><script type="text/javascript">/*当存在多个script 标签的时候，会按照浏览器解析顺序进行执行，先解析的script 标签中的全局变量和函数，能在后解析的script 标签中使用，但是后解析的script 标签中的全局变量和函数，不能在先解析的script 标签中使用*/ /*   var num = 10;function fun1(){console.log(num);}fun1(); function fun1(){console.log(num);var num = 10;}fun1();function fun1(){console.log(num);num = 10; // 不加var，没有前置}fun1();var num = 10;function fun1(num){// var num = 100;console.log(num);}fun1();*/</script>

霓虹灯效果函数作用域相关推荐

javascript函数作用域与闭包
8.8. 函数作用域与闭包如第四章所述,JavaScript函数的函数体在局部作用域中执行,局部作用域不同于全局作用域.本章将解释这些内容和相关的作用域问题,包括闭包.[*] [*] ...
函数⑥作用域与命名空间
尽管 JavaScript 支持一对花括号创建的代码段,但是并不支持块级作用域: 而仅仅支持函数作用域. function test() { // 一个作用域for(var i = 0; i < ...
JavaScript之BOM对象（JS函数作用域、window、history、location对象）
文章目录一.JS作用域二.window窗口三.history对象四.location对象本篇文章来简单介绍一下JS作用域,以及BOM对象中的三个基础对象,分别是window对象.histor ...
android中帧布局效果,Android开发实现布局帧布局霓虹灯效果示例
本文实例讲述了android开发实现布局帧布局霓虹灯效果.分享给大家供大家参考,具体如下: 效果图: 实现方式: framelayout中,设置8个textview,在主函数中,设计颜色数组,通过有序 ...
canvas绘制简单的霓虹灯效果
canvas简单动画分为三个步骤: 1.清除画布区域的内容: 2.重绘: 3.执行requestAnimationFrame(); 这个霓虹灯效果的demo,我没有用requestAnimationF ...
实现抖音霓虹灯效果---OpenCV-Python开发指南（55）
目录抖音霓虹灯原理实现4个图片霓虹灯效果实现视频霓虹灯效果直接实现霓虹灯效果抖音霓虹灯原理抖音霓虹灯算法原理: 实时的光斑绘制,我们观察抖音霓虹的,你会发现所有的光斑都是圆形.所以,这里我 ...
JavaScript：从内存的角度图解函数作用域及作用域链
一.作用域 (scope):一个变量的使用范围 (1)全局作用域:既是指全局变量,其特点是可反复使用,缺点是使用不当极易造成全局污染. (2)函数作用域:既是指局部变量,其特点是只在函数体内部有效,函 ...
java多线程霓虹灯,Android开发实现布局帧布局霓虹灯效果示例
本文实例讲述了Android开发实现布局帧布局霓虹灯效果.分享给大家供大家参考,具体如下: 效果图: 实现方式: FrameLayout中,设置8个TextView,在主函数中,设计颜色数组,通过有序 ...
块级作用域和函数作用域
函数作用域与块级作用域函数作用域:在函数内部声明的变量只能影响到变量所在函数体本身,无法从外部对函数内部的变量进行调用,被称为'函数作用域' 块级作用域:ES6 引入了 let 和 const 关键 ...

霓虹灯效果函数作用域

1.霓虹灯效果

2.函数基础

3.函数练习

4.匿名函数

5.作用域

霓虹灯效果函数作用域相关推荐

最新文章

热门文章

霓虹灯效果 函数 作用域

1.霓虹灯效果

2.函数基础

3.函数练习

4.匿名函数

5.作用域

霓虹灯效果 函数 作用域相关推荐

最新文章

热门文章

霓虹灯效果函数作用域

霓虹灯效果函数作用域相关推荐