-
寬度計算技巧0318
查看全部 -
這個坑記住0318
查看全部 -
window.onload=function(){
? ? ? // 將所有點擊的標題和要顯示隱藏的列表取出來
? ? ? var menu=document.getElementById('menu');
? ? ? var allTits=menu.getElementsByTagName("p");
? ? ? var allCons=menu.getElementsByTagName('ul');
? ? ?// 遍歷所有要點擊的標題且給它們添加索引及綁定事件
? ? ?// 獲取點擊的標題上的索引屬性，根據(jù)該索引找到對應(yīng)的列表
? ? ?// 判斷該列表，如果是顯示的則將其隱藏，如果是隱藏的則將其顯示出來
? ? ?for(var i=0;i<allTits.length;i++){
? ? ? ? ?allTits[i].id=i;
? ? ? ? ?allTits[i].onclick=function(){
? ? ? ? ? ? for(var j=0;j<allCons.length;j++){
? ? ? ? ? ? ? allCons[j].style.display='none';
? ? ? ? ? ? }
? ? ? ? ? ? if(allCons[this.id].style.display=='none'){
? ? ? ? ? ? ? ? allCons[this.id].style.display='block';
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? allCons[this.id].style.display='none';
? ? ? ? ? ? }
? ? ? ? ?}
? ? ?}
}
查看全部 -
css樣式計算部分沒有理解
查看全部 -
延遲選項卡的核心思路是：
????????選項卡重置操作和選中操作放入定時器內(nèi)
沒看視頻自己做時：
????????選項卡重置操作放在定時器外
????????選中操作放入定時器內(nèi)
這樣造成鼠標放上去后，選項卡空白等待（block）的情況發(fā)生。
重點：重置與事件同時進行。
查看全部 -
console.log();???? console.debug();???? console.info();???? console.error();???? console.warn();
（1）除了console.log() 其他都會顯示行號
（2）除了console.log()和console.debug()其他都會有圖標區(qū)別
console.assert()
用于判斷一個表達式是否是真，如果為錯誤的話，會輸出錯誤提示
console.clear()
用于清除控制臺信息，其實跟點”清除“按鈕一樣的
console.dir()
用于表格化顯示一個對象
console.dirxml()
在控制臺中顯示XML數(shù)，例如console.dirxml(document.body)會在控制臺顯示body的DOM文檔樹
console.trace()
顯示JavaScript執(zhí)行的堆棧信息
console.group()、console.groupCollapsed()、console.group()
對輸出到控制臺的信息進行分組
console.time()、console.timeEnd()
一般用于計算某段JavaScript執(zhí)行的時間
console.profile()、console.profileEnd()
用于查看一段JavaScript代碼的性能分析
console.profile()、console.profileEnd()
用于查看一段JavaScript代碼的性能分析
console.count()
輸出console.count()所在語句執(zhí)行的次數(shù)，例如你要看一個循環(huán)是否執(zhí)行了你預(yù)想的次數(shù)，可以在循環(huán)中放入一個console.count("mycount")；這樣，循環(huán)執(zhí)行完成后，控制臺就會顯示出循環(huán)執(zhí)行的次數(shù)
console.exception()
顯示程序中出現(xiàn)錯誤的堆棧和相關(guān)錯誤信息
console.table()
將數(shù)據(jù)用表格的形式顯示出來，比如數(shù)組，對象之類的
查看全部 -
<!doctype html>
<html>
<head>
? ? <meta charset="UTF-8">
<title>Document</title>
<style>
? *{margin:0;
? ? padding:0;
? ? list-style:none;}
? .wrap{height:170px;
? ? ? ? width:490px;
? ? ? ? margin:60px auto;
? ? ? ? overflow: hidden;
? ? ? ? position: relative;
? ? ? ? margin:100px auto;}
? .wrap ul{position:absolute;}?
? .wrap ul li{height:170px;}
? .wrap ol{position:absolute;
? ? ? ? ? ?right:5px;
? ? ? ? ? ?bottom:10px;}
? .wrap ol li{height:20px; width: 20px;
? ? ? ? ? ? ? background:#ccc;
? ? ? ? ? ? ? border:solid 1px #666;
? ? ? ? ? ? ? margin-left:5px;
? ? ? ? ? ? ? color:#000;
? ? ? ? ? ? ? float:left;
? ? ? ? ? ? ? line-height:center;
? ? ? ? ? ? ? text-align:center;
? ? ? ? ? ? ? cursor:pointer;}
? .wrap ol .on{background:#E97305;
? ? ? ? ? ? ? ?color:#fff;}
? </style>
? <script type="text/javascript">
? window.onload=function(){
? ? var wrap=document.getElementById('wrap'),
? ? ? ? pic=document.getElementById('pic'),
? ? ? ? list=document.getElementById('list').getElementsByTagName('li'),
? ? ? ? index=0,
? ? ? ? timer=null;
var lis = pic.getElementsByTagName('li');?
? ? ? // 定義并調(diào)用自動播放函數(shù)
? timer = setInterval(autoPlay,2000);
? ??
? function autoPlay(){
? ?index++;
? ?if(index>=list.length){
? ? index = 0;
? ?}
? ?changeOption(index);
? }?
? ? ? // 定義圖片切換函數(shù)
? ?function changeOption(curIndex){
? ?for(var j=0;j<list.length;j++){
? ? list[j].className = '';
? ? lis[j].style.display = 'none';
? ?}
? ?//高亮顯示當前頁簽
? ?list[curIndex].className = 'on';
? ?lis[curIndex].style.display = 'block';?
? ?//解決bug
? ?index = curIndex;
? }
? ? ?// 鼠標劃過整個容器時停止自動播放
? wrap.onmouseover = function(){
? ?clearInterval(timer);
? }
? ? ?// 鼠標離開整個容器時繼續(xù)播放至下一張
? ? ?wrap.onmouseout = function(){
? ?timer = setInterval(autoPlay,2000);
? }
? ? ?// 遍歷所有數(shù)字導航實現(xiàn)劃過切換至對應(yīng)的圖片
? ?for(var i=0;i<list.length;i++){
? ?list[i].id = i;
? ?list[i].onmouseover = function(){
? ? changeOption(this.id);
? ?}
? }
? ?}
? </script>
</head>
<body>
? <div class="wrap" id='wrap'>
? ? <ul id="pic">
? ? ? <li><img src="http://img1.sycdn.imooc.com//54111cd9000174cd04900170.jpg" alt=""></li>
? ? ? <li><img src="http://img1.sycdn.imooc.com//54111dac000118af04900170.jpg" alt=""></li>
? ? ? <li><img src="http://img1.sycdn.imooc.com//54111d9c0001998204900170.jpg" alt=""></li>
? ? ? <li><img src="http://img1.sycdn.imooc.com//54111d8a0001f41704900170.jpg" alt=""></li>
? ? ? <li><img src="http://img1.sycdn.imooc.com//54111d7d00018ba604900170.jpg" alt=""></li>? ??
? ? </ul>
? ? <ol id="list">
? ? ? <li class="on">1</li>
? ? ? <li>2</li>
? ? ? <li>3</li>
? ? ? <li>4</li>
? ? ? <li>5</li>
? ? </ol>
? </div>
</body>
</html>
查看全部 -
<!doctype html>
<html>
<head>
? ? <meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload=function(){
? ? var send=document.getElementById('send'),
? ? ? ? times=60,
? ? ? ? timer=null;
? ? ? ? ? ??
? ? send.onclick=function(){
? ? ? // 計時開始?
? ? ? ? ? if(timer){
? ? ? ? ? ? ? clearInterval(timer);
? ? ? ? ? ? ? timer=null;
? ? ? ? ? }
? ? ? ? ??
? ? ? ? ? timer=setInterval(sendon,1000);
? ? }
? ? ? ? function sendon(){
? ? ? ? ? ? ? ? if(times<=0){
? ? ? ? ? ? ? ? ? ? clearInterval(timer);
? ? ? ? ? ? ? ? ? ? times=60;
? ? ? ? ? ? ? ? ? ? send.value="發(fā)送驗證碼";
? ? ? ? ? ? ? ? ? ? send.disabled=false;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? else{
? ? ? ? ? ? ? ? ? ? times--;
? ? ? ? ? ? ? ? ? ? send.value=times+"秒后重試";
? ? ? ? ? ? ? ? ? ? send.disabled=true;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ??
? ? ? ? ? ? }
}
</script>
</head>
<body>
<input type="button" id="send" value="發(fā)送驗證碼">
</body>
</html>
查看全部 -
<!doctype html>
<html>
<head>
? ? <meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
? ? *{margin:0;
? ? ?padding:0;
? ? ?font-size:13px;
? ? ?list-style:none;}
.menu{width:210px;
? ? ? margin:50px auto;
? ? ? border:1px solid #ccc;}
.menu p{height:25px;
? ? ? ? line-height:25px;
? ? ? ? font-weight:bold;
? ? ? ? background:#eee;
? ? ? ? border-bottom:1px solid #ccc;
? ? ? ? cursor:pointer;
? ? ? ? padding-left:5px;}
.menu div ul{display:none;}
.menu li{height:24px;
? ? ? ? ?line-height:24px;
? ? ? ? ?padding-left:5px;}
</style>
<script type="text/javascript">
function $(id){
? ? return typeof id==="string"?document.getElementById(id):id;
? ??
? ? }
window.onload=function(){
? ? ? // 將所有點擊的標題和要顯示隱藏的列表取出來
? ? ? var titles=$('menu').getElementsByTagName('p');
? ? ? ?var conts=$('menu').getElementsByTagName('ul');
? ? ?// 遍歷所有要點擊的標題且給它們添加索引及綁定事件
? ?
? ? ? ? ?for(var i=0;i<titles.length;i++){
? ? ? ? ? titles[i].id=i;
? ? ? ? ?titles[i].onclick = function () {
for(var j=0;j<titles.length;j++) {
? ? ? ? ? ? ? ? ?conts[j].style.display='none'
? ? ? ? ? ? ?}
? ? ? ? ? ? ?conts[this.id].style.display='block'
? ? ? ? ?}
? ? ? ? ?}
? ? ?
? ? ?// 獲取點擊的標題上的索引屬性，根據(jù)該索引找到對應(yīng)的列表
? ? ?// 判斷該列表，如果是顯示的則將其隱藏，如果是隱藏的則將其顯示出來
}
</script>
</head>
<body>
<div class="menu" id="menu">
<div>
<p>Web前端</p>
<ul >
<li>JavaScript</li>
<li>DIV+CSS</li>
<li>jQuery</li>
</ul>
</div>
<div>
<p>后臺腳本</p>
<ul>
<li>PHP</li>
<li>ASP.net</li>
<li>JSP</li>
</ul>
</div>
<div>
<p>前端框架</p>
<ul>
<li>Extjs</li>
<li>Esspress</li>
<li>YUI</li>
</ul>
</div>
</div>
</body>
</html>
查看全部 -
<script type="text/javascript">
window.onload=function(){
? ? var send=document.getElementById('send'),
? ? ? ? times=60,
? ? ? ? timer=null;
? ? send.onclick=function(){
? ? ? // 計時開始?
? timer = setInterval(yzm,1000)
? function yzm(){
? times--;
? send.value = times + "秒后重試";
? if (times<=0) {
? send.value = "發(fā)送驗證碼"
times = 60 ;
clearInterval(timer);
? }
? }
? ? }?
}
</script>
查看全部 -
<script type="text/javascript">
// 封裝id函數(shù)
function $(id) {
return typeof id === 'string' ? document.getElementById(id) : id;
}
window.onload = function() {
// 將所有點擊的標題和要顯示隱藏的列表取出來
var tits = $('menu').getElementsByTagName('p');
var bys = $('menu').getElementsByTagName('ul')
if (tits.length!=bys.length)?
return;
// 遍歷所有要點擊的標題且給它們添加索引及綁定事件
for (var i = 0; i < tits.length; i++) {
tits[i].id=i;
tits[i].onmouseover=function(){
for (var j = 0; j < tits.length; j++) {
bys[j].style.display='none';
}
bys[this.id].style.display="block";
}
}
}
</script>
查看全部 -
<!doctype html>
<html>
<head>
? ? <meta charset="UTF-8">
<title>Document</title>
<style>
? *{margin:0;
? ? padding:0;
? ? list-style:none;}
? .wrap{height:170px;
? ? ? ? width:490px;
? ? ? ? margin:60px auto;
? ? ? ? overflow: hidden;
? ? ? ? position: relative;
? ? ? ? margin:100px auto;}
? .wrap ul{position:absolute;}?
? .wrap ul li{height:170px;}
? .wrap ol{position:absolute;
? ? ? ? ? ?right:5px;
? ? ? ? ? ?bottom:10px;}
? .wrap ol li{height:20px; width: 20px;
? ? ? ? ? ? ? background:#ccc;
? ? ? ? ? ? ? border:solid 1px #666;
? ? ? ? ? ? ? margin-left:5px;
? ? ? ? ? ? ? color:#000;
? ? ? ? ? ? ? float:left;
? ? ? ? ? ? ? line-height:center;
? ? ? ? ? ? ? text-align:center;
? ? ? ? ? ? ? cursor:pointer;}
? .wrap ol .on{background:#E97305;
? ? ? ? ? ? ? ?color:#fff;}
? </style>
? <script type="text/javascript">
? window.onload=function(){
? ? var wrap=document.getElementById('wrap');
? ? ? ? pic=document.getElementById('pic').getElementsByTagName("li");
? ? ? ? list=document.getElementById('list').getElementsByTagName('li');
? ? ? ? index=0;
? ? ? ? timer=null;
? ??
? ? for(var i=0;i<list.length;i++) {
? ? ? ? list[i].index=i;
? ? ? ? list[i].onmouseover=function() {
? ? ? ? ? ? clearInterval(timer);
? ? ? ? ? ? change(this.index);
? ? ? ? ? ? index=this.index;
? ? ? ? }
? ? }
? ? wrap.onmouseleave=function() {? ? ?//用onmouseout的話鼠標離開序號時就開始切換圖片了
? ? ? ? if(timer) {
? ? ? ? ? ? clearInterval(timer);
? ? ? ? ? ? timer=null;
? ? ? ? }
? ? ? ? timer=setInterval(Autoplay,2000);
? ? }
? ? if(timer) {
? ? ? ? clearInterval(timer);
? ? ? ? timer=null;
? ? }
? ? timer=setInterval(Autoplay,2000);
? ? ? // 定義并調(diào)用自動播放函數(shù)
? ??
? ? function Autoplay() {
? ? ? ? index++;
? ? ? ? if(index>=list.length) {
? ? ? ? ? ? index=0;
? ? ? ? }
? ? ? ? change(index);
? ? }
? ? function change(curIndex) {
? ? ? ? for(var j=0;j<list.length;j++) {
? ? ? ? ? ? list[j].className="";
? ? ? ? ? ? pic[j].style.display="none";
? ? ? ? ? ? /*pic=document.getElementById('pic');
? ? ? ? ? ? ? pic.childNodes[j].style.display="none";
? ? ? ? ? ? ? 這樣為什么不行?
? ? ? ? ? ? */
? ? ? ? }
? ? ? ? list[curIndex].className="on";
? ? ? ? pic[curIndex].style.display="block";
? ? }
? ? ? // 定義圖片切換函數(shù)
? ??
? ??
? ? ?// 鼠標劃過整個容器時停止自動播放
? ? ?// 鼠標離開整個容器時繼續(xù)播放至下一張
? ??
? ? ?// 遍歷所有數(shù)字導航實現(xiàn)劃過切換至對應(yīng)的圖片
? ?}
? </script>
</head>
<body>
? <div class="wrap" id='wrap'>
? ? <ul id="pic">
? ? ? <li><img src="http://img1.sycdn.imooc.com//54111cd9000174cd04900170.jpg" alt=""></li>
? ? ? <li><img src="http://img1.sycdn.imooc.com//54111dac000118af04900170.jpg" alt=""></li>
? ? ? <li><img src="http://img1.sycdn.imooc.com//54111d9c0001998204900170.jpg" alt=""></li>
? ? ? <li><img src="http://img1.sycdn.imooc.com//54111d8a0001f41704900170.jpg" alt=""></li>
? ? ? <li><img src="http://img1.sycdn.imooc.com//54111d7d00018ba604900170.jpg" alt=""></li>? ??
? ? </ul>
? ? <ol id="list">
? ? ? <li class="on">1</li>
? ? ? <li>2</li>
? ? ? <li>3</li>
? ? ? <li>4</li>
? ? ? <li>5</li>
? ? </ol>
? </div>
</body>
</html>
查看全部 -
<!doctype html>
<html>
<head>
? ? <meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload=function(){
? ? var send=document.getElementById('send'),
? ? ? ? times=5,
? ? ? ? timer=null;
? ? send.onclick=function(){
? ? ? // 計時開始?
? ? ? ? send.disabled=true;
? ? ? ? send.value=times+"秒后重試";
? ? ? ? timer=setInterval(change,1000);
? ? }
? ? function change() {
? ? ? ? ? ? times=times-1;
? ? ? ? ? ? if(times==0){
? ? ? ? ? ? ? ? send.value="發(fā)送驗證碼";
? ? ? ? ? ? ? ? clearInterval(timer);
? ? ? ? ? ? ? ? times=10;
? ? ? ? ? ? ? ? send.disabled=false;
? ? ? ? ? ? }
? ? ? ? ? ? else{
? ? ? ? ? ? ? ? send.value=times+"秒后重試";
? ? ? ? ? ? }
? ? ? ? }
}
</script>
</head>
<body>
<input type="button" id="send" value="發(fā)送驗證碼">
</body>
</html>
查看全部 -
將id的獲取封裝成一個方法。
查看全部
舉報