倒序遍历数组
//倒序遍历数组
var arr5 = [10, 20, 30, 40, 50, 100];
//正序
for (var i = 0; i < arr5.length; i++) {
console.log(arr5[i]);
}
//倒序
for(var i=arr5.length-1;i>=0;i--){
console.log(arr5[i]);
}去掉数组中重复的0，把其他的数据放在一个新的数组中
//去掉数组中重复的0，把其他的数据放在一个新的数组中
var arr = [10, 0, 20, 0, 30, 0, 50];
var newArr=[];//新数组,用来存放第一个数组中所有非0的数字
for(var i=0;i<arr.length;i++){
if(arr[i]!=0){
newArr[newArr.length]=arr[i];
}
}
//把新数组的长度作为下标使用,数组的长度是可以改变的
console.log(newArr);通过函数实现冒泡排序
//通过函数实现冒泡排序
function sortArray(arr) {
//控制比较的轮数
for (var i = 0; i < arr.length - 1; i++) {
//控制每一轮的比较次数
for (var j = 0; j < arr.length - 1 - i; j++) {
if (arr[j] > arr[j + 1]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
return arr;
}
console.log(sortArray([0, 19, 34, 10, 100, 2]));从1到100，以此在console输出各数字，但是，当数字为3的倍数或者含有3的时候，输出“PA”
//从1到100，以此在console输出各数字，但是，当数字为3的倍数或者含有3的时候，输出“PA”
for(var i=1;i<=100;i++){
if(i%3==0||i%10==3){
console.log("PA");
}else{
console.log(i);
}
}使用循环实现一个九九乘法表
//表格
var content = '<table><caption>九九乘法表</caption>';
for (var i=1; i<=9; i++) {
content += '<tr>';
for (var j=1; j<=i; j++) {
content += '<td>' + j + '×' + i + '=' + i*j +'</td>';
}
content += '</tr>';
}
content += '</table>';
document.write(content);
//当用户访问页面的时候，根据当前时间，在页面中输出不同的问候语
var t =new Date();
if(t.getHours()>=4&&t.getHours()<=12){
alert('上午好');
}else if(t.getHours()>=13&&t.getHours()<=23){
alert('晚上好');
}else{
alert('太晚了');
}DOM
当用户选择了 School 的单选框时，显示 School 的下拉选项，隐藏 Company 的下拉选项
当用户选择了 School 的单选框时，显示 Company 的下拉选项，隐藏 School 的下拉选项
<style>
select {
display: none;
}
</style>
<body>
<label>
<input id="school" name="status" type="radio">
School
</label>
<label>
<input id="company" name="status" type="radio">
Company
</label>
<select id="school-select">
<option>北京邮电大学</option>
<option>黑龙江大学</option>
<option>华中科技大学</option>
</select>
<select id="company-select">
<option>百度</option>
<option>爱奇艺</option>
</select>
<script>
var sRadio = document.querySelector('#school');
var cRadio = document.querySelector('#company');
var sSelect = document.querySelector('#school-select');
var cSelect = document.querySelector('#company-select');
sRadio.onclick = function(){
sSelect.style.cssText="display:block";
cSelect.style.cssText='display:hide';
}
cRadio.onclick = function(){
sSelect.style.cssText='display:hide';
cSelect.style.cssText='display:block';
}
</script>
//代码重构
<script>
var schoolRadio = document.querySelector('#school');
var companyRadio = document.querySelector('#company');
var schoolSelect = document.querySelector('#school-select');
var companySelect = document.querySelector('#company-select');
function checkSelect(e) {
if (e.target.checked) {
if (e.target.id.indexOf('school') >= 0) {
schoolSelect.style.cssText = "display:block";
companySelect.style.cssText = 'display:hide';
} else if (e.target.id.indexOf('company') >= 0) {
schoolSelect.style.cssText = 'display:hide';
companySelect.style.cssText = "display:block";
}
}
}
schoolRadio.addEventListener('click', checkSelect);
companyRadio.addEventListener('click', checkSelect);
</script>点击某一个 Li 标签时，将 Li 的背景色显示在 P 标签内，并将 P 标签中的文字颜色设置成 Li 的背景色
<style>
.palette {
margin: 0;
padding: 0;
list-style: none;
}
.palette li {
width: 40px;
height: 40px;
border: 1px solid #000;
cursor: pointer;
}
</style>
<body>
<ul class="palette">
<li style="background-color:crimson"></li>
<li style="background-color:bisque"></li>
<li style="background-color:blueviolet"></li>
<li style="background-color:coral"></li>
<li style="background-color:chartreuse"></li>
<li style="background-color:darkolivegreen"></li>
<li style="background-color:cyan"></li>
<li style="background-color:#194738"></li>
</ul>
<p class="color-picker"></p>
<script>
//var list = document.querySelectorAll("li");
//for (var i = 0, len = list.length; i < len; i++) {
// list[i].onclick = function(e) {
// var t = e.target;
// var c = t.style.backgroundColor;
//var p = document.getElementsByClassName("color-picker")[0]
//p.innerHTML = c;
//p.style.color = c;
//}
//}
//点击某一个 Li 标签时，将 Li 的背景色显示在 P 标签内，并将 P 标签中的文字颜色设置成 Li 的背景色
var oUl = document.querySelector("ul");
var p = document.querySelector(".color-picker");
oUl.onclick = function (ev) {
var ev = ev;
var target = ev.target;
var bgColor = target.style.backgroundColor;
if (target.nodeName.toLowerCase() == "li") {
p.innerHTML = bgColor;
p.style.color = bgColor;
}
}
</script>分别使用 setTimeout 和 setInterval 实现以下功能：
点击按钮时，开始改变 fade-obj 的透明度， 在动画过程中，按钮的状态变为不可点击。
在动画结束后，按钮状态恢复，且文字变成“淡入”。
在 按钮显示 淡入 的状态时，点击按钮，开始一个“淡入”（逐渐出现）的动画，和上面类似按钮不可点，直到透明度完全不透明，淡入动画结束后，按钮文字变为“淡出”
<div id="fade-obj" style="width:300px;height:300px;background:#000"></div>
<button id="fade-btn" >淡出</button>
<!--
点击按钮时，开始改变 fade-obj 的透明度
opacity
在动画过程中，按钮的状态变为不可点击
disabled=false
在动画结束后，按钮状态恢复，且文字变成“淡入”
disabled=true
fadeText=淡入
<script>
//setInterval
var btnEle = document.querySelector('#fade-btn'),
objEle = document.querySelector('#fade-obj'),
num = 10,
//淡入淡出开关
flag = true,
fadeText = '',
insetIn,
outsetIn;
btnEle.onclick = function(){
fadeCommon();
};
var fadeCommon = function(){
insetIn = setInterval(function(){
btnEle.disabled = true;
if(flag){
num--;
}else{
num++;
}
objEle.style.opacity = num / 10;
if(num <= 0 || num >= 10){
clearInterval(insetIn);
btnEle.disabled = false;
if(num){
fadeText = (flag = true)? '淡出' : '淡入';
btnEle.innerHTML = fadeText;
}else{
fadeText = (flag = false) ? '淡出' : '淡入';
btnEle.innerHTML = fadeText;
}
}
},1000)
};
</script>-->
<script>
//setTimeout
var btnEle = document.querySelector('#fade-btn'),
objEle = document.querySelector('#fade-obj'),
num = 10；
flag = true,
fadeText = '',
insetIn,
outsetIn;
btnEle.onclick = function(){
fadeCommon();
};
function fadeCommon(){
insetIn = setTimeout(function(){
btnEle.disabled = true;
if(flag){
num--;
}else{
num++;
}
objEle.style.opacity = num / 10;
setTimeout(fadeCommon(),3000);
if(num <= 0 || num >= 10){
clearTimeout(insetIn);
btnEle.disabled = false;
if(num){
fadeText = (flag = true)? '淡出' : '淡入';
btnEle.innerHTML = fadeText;
}else{
fadeText = (flag = false) ? '淡出' : '淡入';
btnEle.innerHTML = fadeText;
}
}
},1000)
};
</script>