第16课时 流程控制和运算符,字符串,数组,土豆网右下角悬浮导航效果
2017-03-04 09:14
344 查看
1. 流程控制和运算符
a) 判断（选择）语句
if语句
else
else if
每次只能选一种
switch语句
switch穿透
b) 循环语句for while
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:100px; height:100px; background:red;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.onload=function ()
{
var oDiv=document.getElementById('div1');
var oTxt=document.getElementById('txt1');
var attr='';
//oDiv.style的属性
//oDiv.style.width
for(attr in oDiv.style)
{
oTxt.value+=attr+'\n';
}
};
</script>
</head>
<body>
<div id="div1">
</div>
<textarea id="txt1" rows="10" cols="40">
</textarea>
</body>
</html>
Miaov.js
function startMove(obj, json, fnEnd)
{
if(obj.timer)
{
clearInterval(obj.timer);
}
obj.timer=setInterval(function (){
doMove(obj, json, fnEnd);
}, 30);
var oDate=new Date();
if(oDate.getTime()-obj.lastMove>30)
{
doMove(obj, json, fnEnd);
}
}
function getStyle(obj, attr)
{
if(obj.currentStyle)
{
return obj.currentStyle[attr];
}
else
{
return getComputedStyle(obj, false)[attr];
}
}
function doMove(obj, json, fnEnd)
{
var iCur=0;
var attr='';
var bStop=true; //假设运动已经该停止了
for(attr in json)
{
if(attr=='opacity')
{
iCur=parseInt(100*parseFloat(getStyle(obj, 'opacity')));
}
else
{
iCur=parseInt(getStyle(obj, attr));
}
if(isNaN(iCur))
{
iCur=0;
}
var iSpeed=(json[attr]-iCur)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
if(parseInt(json[attr])!=iCur)
{
bStop=false;
}
if(attr=='opacity')
{
obj.style.filter="alpha(opacity:"+(iCur+iSpeed)+")";
obj.style.opacity=(iCur+iSpeed)/100;
}
else
{
obj.style[attr]=iCur+iSpeed+'px';
}
}
if(bStop)
{
clearInterval(obj.timer);
obj.timer=null;
if(fnEnd)
{
fnEnd();
}
}
obj.lastMove=(new Date()).getTime();
}
a) 判断（选择）语句
if语句
else
else if
每次只能选一种
switch语句
switch穿透
b) 循环语句for while
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:100px; height:100px; background:red;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.onload=function ()
{
var oDiv=document.getElementById('div1');
var oTxt=document.getElementById('txt1');
var attr='';
//oDiv.style的属性
//oDiv.style.width
for(attr in oDiv.style)
{
oTxt.value+=attr+'\n';
}
};
</script>
</head>
<body>
<div id="div1">
</div>
<textarea id="txt1" rows="10" cols="40">
</textarea>
</body>
</html>
c) 其他语句
循环
for
while
for in
window.onload=function ()
{
var oDiv=document.getElementById('div1');
var oTxt=document.getElementById('txt1');
var attr='';
//oDiv.style的属性
//oDiv.style.width
for(attr in oDiv.style)
{
oTxt.value+=attr+'\n';
}
};
其他
with
最好不用
window.onload=function ()
{
var oDiv=document.getElementById('div1');
var color='red';
with(oDiv.style) //特别不推荐
{
width='200px';
height='200px';
background='green';
color='blue';
}
alert(color);
};
三目
用多了会很恶心
d) 逻辑运算
e) 数值运算
f) 比较运算
g) 位运算
2. 字符串详解
字符串的属性-length
var str1='abc';
var str2=new String('abc');
alert(typeof str1);
alert(typeof str2);
charAt()
var str='abcdef';
//alert(str[0]);
alert(str.charAt(1));
字符串——charCodeAt
var str='我是一个字符串';
alert(str.charCodeAt(0)); 字符串——fromCharCode
alert(String.fromCharCode(25105))
字符串——indexOf
var str='abac?def';
//alert(str.indexOf('?')); //找第一次出现的位置，没找到的话返回-1
alert(str.search('[')); 字符串——lastIndexOf
var str='abacdefa';
alert(str.lastIndexOf('g'));//找最后一次出现的位置，没找到的话返回-1 字符串——match
var str='12,456 rt 77 99';
alert(str.match(/\d+/g));//12,456,77,99
字符串——replace
var str='abc';
alert(str.replace('a', 'A'));//Abc
字符串——比较
var str1='啊';
var str2='你';
alert(str1.localeCompare(str2));//按照当地人的习惯，来比较字符串-1
字符串——slice
var str='abcdef';
//alert(str.slice(1,3)); //不取结束位置的
//alert(str.slice(1)); //不给结束位置，一直取到字符串结束为止
//alert(str.substring(1,3));
//alert(str.substring(3)); 字符串——slice和substring的区别
var str='abcdef';
//alert(str.substring(0, 0)); //负数直接变成0
alert(str.slice(-1)); //负数会变成“倒数第n个” 字符串——split
var str='blue|leo|莫涛';
alert(str.split('|'));
字符串——substr和substring的区别
var str='abcdef';
//alert(str.substring(1,3)); //不包含结束位置
alert(str.substr(1,3)); //包含结束位置 字符串------大小写
var str='Blue';
alert(str.toUpperCase()); 字符串连接效果
var str='';
var arr=[];
var i=0;
var startTime=(new Date()).getTime();
for(i=0;i<1000000;i++)
{
//str+='aaaaaaaaaaaaaaaaa';
arr.push('aaaaaaaaaaaaaaaaa');
}
str=arr.join('');
alert((new Date()).getTime()-startTime); 字符串——字符串连接2
var arr=[];
arr.push('abcd');
arr.push('123');
arr.push('xcv');
alert(arr.join(''));
JavaScript视频教程——数组详解
数组的定义
var arr=new Array(1,2,3);
var arr=[1,2,3];
数组方法
数组——push
var arr=[1,2,3];
//arr.push(4); //添加到尾部
//arr.pop(); //从尾部删除
//arr.shift(); //从头部删除
arr.unshift(4); //添加到头部 数组——slice
var arr=[1,2,3,4,5,6,7,8];
alert(arr.slice(1, 3)); //不包括结束位置
数组——join
var arr=[1,2,3,4,5,6,7,8];
alert(arr.slice(1, 3)); //不包括结束位置
数组——splice
var arr=[1,2,3,4,5,6,7,8,9];
//删除
/*arr.splice(2, 3);
alert(arr);*/
//插入
/*arr.splice(2, 0, 'a', 'b', 'c');
alert(arr);*/
//替换
arr.splice(2, 3, 'a', 'b', 'c'); 数组------reverse
var arr=[1,2,3,4,5];
alert(arr.reverse());
数组-----sort
var arr=['left', 'float', 'apple', 'content', 'text', 'zoom', 'Apple', 'Zoom'];
arr.sort();
alert(arr);
数组-----sort排序2
var arr=[12,78, 335, 21, 2];
//arr.sort(); //默认的情况下，他会把所有的东西都当做字符串处理
arr.sort(function (num1, num2){
if(num1<num2)
{
return -1; //第一个比第二个靠左
}
else if(num1>num2)
{
return 1; //右
}
else
{
return 0; //一样，随便你
}
});
alert(arr); var arr=[12,78, 335, 21, 2];
//arr.sort(); //默认的情况下，他会把所有的东西都当做字符串处理
arr.sort(function (num1, num2){
return num1-num2;
});
alert(arr);
数组——排序中文 var arr=['张三', '石川', '刘伟', '莫涛', '杜鹏', '阿杜', '毕加索'];
arr.sort(function (str1, str2){
return str1.localeCompare(str2);
});
//只要能用原生方法的时候，就不要自己写 数组-----concat
/*var str1='abc';
var str2='cde';
alert(str1+str2);*/
var arr1=[1,2,3];
var arr2=[4,5,6];
alert(arr1.concat(arr2)); 数字toString()
var num=255;
alert('0x'+num.toString(16)); 数组去重
function hasContain(arr, num)
{
var i=0;
for(i=0;i<arr.length;i++)
{
if(arr[i]==num)
{
return true;
}
}
return false;
}
var arr=[1,2,3,4,1,5,6,4,8];
var aResult=[];
var i=0;
for(i=0;i<arr.length;i++)
{
if(!hasContain(aResult, arr[i]))
{
aResult.push(arr[i]);
}
}
alert(aResult); 数组复制
var arr1=[1,2,3];
var arr2=arr1.concat([]);
arr2.push(4);
alert(arr1)
土豆网右下角悬浮导航效果
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0;padding:0;font: 12px/1.25 tahoma,arial,宋体,sans-serif;}
li{list-style:none;}
a{text-decoration:none;}
body{width:100%;height:100%;background:#000;_position:relative;overflow:hidden;}
.page{position:fixed;_position:absolute;right:0;bottom:0;}
#miaov_bottom{width:203px;height: 50px;background:url(minibar.png) no-repeat 0 0;position:absolute;right:-165px;bottom:0;z-index: 20001;}
#nav{height: 22px;margin: 5px 0 0 43px;width: 125px;}
#nav li{float: left;width: 25px;}
#nav li a{display: block;height: 22px;width: 25px;}
#nav li .show,#nav li a:hover{background: url(minibar.png) no-repeat 0 -51px;}
#nav .li_1 .show,#nav .li_1 a:hover{background-position:-25px -51px}
#nav .li_2 .show,#nav .li_2 a:hover{background-position:-50px -51px}
#nav .li_3 .show,#nav .li_3 a:hover{background-position:-75px -51px}
#nav .li_4 .show,#nav .li_4 a:hover{background-position:-100px -51px}
.miaov{color: #FFFFFF;height: 16px;margin: 4px 0 0 8px;overflow: hidden;width: 160px;}
#but{ bottom: 0;display: block;height: 50px;position: absolute;right: 0;width: 33px;z-index:20002;}
.but_hide{background: url(minibar.png) no-repeat -170px 0;}
.but_hide:hover{background-position:-203px 0;}
.but_show{background: url(minibar.png) no-repeat -236px 0;}
.but_show:hover{background-position:-269px 0;}
#miaov_box{bottom:-315px;display:none;height: 315px;padding: 0 0 48px;position: absolute;right: 1px;width: 200px; z-index: 20000;}
.bg{background: url(mini_jpgs.jpg) no-repeat 0 0;height: 315px;opacity: 0.9;position: absolute;right: 0;top: 0;width: 200px;}
.nav2_bg{bottom: 48px;height: 176px;left: 0;position: absolute;width: 34px;background: url(mini_jpgs.jpg) no-repeat 0 -139px;}
#list_nav{background: url(minibar.png) no-repeat scroll 0 -255px transparent;height: 139px;left: 0;position: absolute;top: 2px;width: 34px;}
#list_nav a{ color: #FFFFFF;display: block;height: 27px;line-height: 25px;text-align: center;text-decoration: none;}
#list_nav .show{color: #FF9900;}
#list_nav a:hover{color:#FFFF00;}
.clos{ background: url(minibar.png) no-repeat 0 -76px ;cursor: pointer;height: 9px;position: absolute;right: 10px;top: 14px;width: 9px;}
.box_right{color: #FFFFFF;
height: 285px;
overflow: hidden;
position: absolute;
right: 6px;
top: 28px;
width: 150px;}
</style>
<script type="text/javascript" src="move.js"></script>
<script type="text/javascript">
window.onload=function ()
{
var oBtn=document.getElementById('but');
var oBottom=document.getElementById('miaov_bottom');
var oBox=document.getElementById('miaov_box');
var oBtnClose=document.getElementById('btn_close');
oBtn.onclick=open;
function open()
{
startMove(oBottom, {right: 0}, function (){
oBox.style.display='block';
startMove(oBox, {bottom: 0});
});
oBtn.onclick=close;
}
function close()
{
startMove(oBox, {bottom: -315}, function (){
oBox.style.display='none';
startMove(oBottom, {right: -165});
});
oBtn.onclick=open;
}
oBtnClose.onclick=close;
};
</script>
</head>
<body>
<div class="page">
<div id="miaov_bottom">
<ul id='nav'>
<li><a href="###"></a></li>
<li class='li_1'><a href="###"></a></li>
<li class='li_2'><a href="###"></a></li>
<li class='li_3'><a href="###"></a></li>
<li class='li_4'><a href="###"></a></li>
</ul>
<h2 class="miaov">妙味课堂 www.miaov.com</h2>
</div>
<a class="but_show" id="but" href="###"></a>
<div id="miaov_box">
<div class="bg"></div>
<div class="nav2_bg"></div>
<ul id="list_nav">
<li><a class="show" href="http://www.miaov.com" target="_blank">天气</a></li>
<li class="tab2"><a href="http://www.miaov.com" target="_blank">星座</a></li>
<li class="tab3"><a href="http://www.miaov.com" target="_blank">排行</a></li>
<li class="tab4"><a href="http://www.miaov.com" target="_blank">热点</a></li>
<li class="tab5"><a href="http://www.miaov.com" target="_blank">直播</a></li>
</ul>
<a class='clos' id="btn_close"></a>
<div class="box_right">
<div>北京</div>
<div>
<div>
<strong><em>今天</em> (周二)</strong>
<img title="晴" src="01.gif" class="pic">
</div>
<span>-1~10C°</span>
<span>晴</span>
<span>微风小于3级</span>
</div>
<div >
<div>
<strong><em>明天</em> (周三)</strong>
<img title="多云" src="02.gif" class="pic">
</div>
<span>0~11C°</span>
<span>多云</span>
<span>北风3-4级</span>
</div>
<div>
<div>
<strong><em>后天</em> (周四)</strong>
<img title="晴" src="01.gif" class="pic">
</div>
<span>-1~12C°</span>
<span>晴</span>
<span>北风3-4级 转 微风小于3级</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Miaov.js
function startMove(obj, json, fnEnd)
{
if(obj.timer)
{
clearInterval(obj.timer);
}
obj.timer=setInterval(function (){
doMove(obj, json, fnEnd);
}, 30);
var oDate=new Date();
if(oDate.getTime()-obj.lastMove>30)
{
doMove(obj, json, fnEnd);
}
}
function getStyle(obj, attr)
{
if(obj.currentStyle)
{
return obj.currentStyle[attr];
}
else
{
return getComputedStyle(obj, false)[attr];
}
}
function doMove(obj, json, fnEnd)
{
var iCur=0;
var attr='';
var bStop=true; //假设运动已经该停止了
for(attr in json)
{
if(attr=='opacity')
{
iCur=parseInt(100*parseFloat(getStyle(obj, 'opacity')));
}
else
{
iCur=parseInt(getStyle(obj, attr));
}
if(isNaN(iCur))
{
iCur=0;
}
var iSpeed=(json[attr]-iCur)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
if(parseInt(json[attr])!=iCur)
{
bStop=false;
}
if(attr=='opacity')
{
obj.style.filter="alpha(opacity:"+(iCur+iSpeed)+")";
obj.style.opacity=(iCur+iSpeed)/100;
}
else
{
obj.style[attr]=iCur+iSpeed+'px';
}
}
if(bStop)
{
clearInterval(obj.timer);
obj.timer=null;
if(fnEnd)
{
fnEnd();
}
}
obj.lastMove=(new Date()).getTime();
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- javascript运算符_流程控制语句_字符串对象
- java运算符、流程控制、数组笔记
- PHP--字符串 运算符 控制流程 以及 foreach
- Java复习笔记+经验总结-01 运算符 表达式 数组 流程控制语句
- 数组、运算符、流程控制的基本介绍及示例
- #码神心得_06# 运算符、循环流程控制、数组
- java基础（一）：进制，运算符，流程控制，函数，数组
- JavaScript之变量、基本类型、数组、运算符、流程控制语句、函数
- js变量声明，字符串转数字，运算符，控制流程语句
- Java的基础语法总结 （运算符、控制流程、函数和数组）
- [Java]1.运算符、流程控制、数组
- day4 运算符、流程控制语句 数组 面向对象编程思想
- T-SQL入门攻略之6-T-SQL运算符与流程控制
- JavaScript系统学习之一 <基本语法，运算符，流程控制语句>
- 高性能Javascript【四】算法和流程控制高性能Javascript【五】字符串和正则表达式
- Java 运算符、表达式和流程控制
- MSSQL扫盲系列(5)-常量，变量，运算符，流程控制
- 结束“运算符”部分，开始新章节：流程控制
- 第3章 运算符、表达式和流程控制
- java流程控制、数组入门（J2SE入门3）