夜光序言：
有一种孤独是，想笑却不能笑，想哭却不能哭，总有一个声音在耳边提醒着你：要克制，要坚强，要让他们觉得你不一样。你做到了，旁人投来了艳羡和赞许的目光，你微微笑，微微发颤，微微地有一种只有自己知道的孤独感。
正文：
隔行变色CEO 夜光 |
<!DOCTYPE html>
<html 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
for(var i=0;i<lis.length;i++){
if(i%2 == 0){ //只有偶数可以被2整除
lis[i].style.backgroundColor="#ccc";
}
}
}
</script>
// 可以实现隔行变色：
表示出来是奇行的格式
<!DOCTYPE html>
<html en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
.box{
}
li{
line-height: 30px;
list-style-type:none;
}
li span{
margin: 5px;
}
.current{
background-color: palegreen!important; //这是一个重点
}
</style>
<script>
window.onload = function(){
var lis = document.getElementsByTagName("li"); // 注意这里运用到的是getElementsByTagName。得到所有的li
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
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
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 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];
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 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(num + num); // 这是重点
}
}
</script>
<body>
<input type="text" id="a"/>
<button>点击一下</button>
</body>
</html>
// 输出框框中 数字相加之和
全选和反选夜光 |
面试十分重要 这一块
上下两个盒子【帅气】
<!DOCTYPE html>
<html 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 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 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>