當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
javascript+HTML+CSS面试题
生活随笔
收集整理的這篇文章主要介紹了
javascript+HTML+CSS面试题
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
今天參加面試，考了我三個小時，考暈了，趕緊補習(xí)補習(xí)javascript的知識！（另：人事部明明說招HTML5+CSS3+jQuery，考1個半小時左右，怎么變成了考傳統(tǒng)DIV+CSS+javascript啦，嗚嗚嗚~~~）
先看看簡單的
1、完成foo()函數(shù)的內(nèi)容，要求能夠彈出對話框提示當(dāng)前選中的是第幾個單選框。
<html> <head> <script> function foo() { // 在此處添加代碼 var rg = document.getElementsByName("radioGroup"); for( var i = 0; i < rg.length; i++ ) { if( rg[i].checked ) { alert("你選擇了第" + (i+1) + "個單選框"); } } return false; } </script> </head> <body> <form name="form1" οnsubmit="return foo();"> <input type="radio" name="radioGroup" /> <input type="radio" name="radioGroup" /> <input type="radio" name="radioGroup" /> <input type="radio" name="radioGroup" /> <input type="radio" name="radioGroup" /> <input type="radio" name="radioGroup" /> <input type="submit" /> </form> </body> </html>2、完成字符串翻轉(zhuǎn)功能 填充注釋部分的函數(shù)體，使得foo()函數(shù)調(diào)用彈出”成功”的對話框。
<html> <head> <script> function foo() { var str = reverse('a,b,c,d,e,f,g'); alert(str); if (str == 'g,f,e,d,c,b,a') alert('成功'); else alert('失敗'); }function reverse(str) { // 在此處加入代碼，完成字符串翻轉(zhuǎn)功能 var spl = str.split(','); var newstr=""; for(i=spl.length-1;i>=0;i--) { newstr+=spl[i]+','; } newstr=newstr.substring(0,newstr.length-1) return newstr; } </script> </head> <body> <input type="button" value="str" οnclick="foo()" /> </body> </html>
3. 有一組數(shù)字，從1到n，從中減少了3個數(shù)，順序也被打亂，放在一個n-3的數(shù)組里請找出丟失的數(shù)字，最好能有程序，最好算法比較快
<script type="text/javascript"> //<!--var oldArr = [0,1, 2, 3, 4, 5, 6, 7, 8, 9]; //初始數(shù)組var newArr = [5, 6, 3, 9, 0, 8, 2]; //去掉 1 4 7三個數(shù)字并且順序是亂的 var lostArr = []; //要找的數(shù)的數(shù)組newArr.sort(); //排序var newString = ',' + newArr.join(',') + ',';var length = oldArr.length;for (var j = 0; j < length; j++) {var oldString = ',' + oldArr[j] + ',';if (newString.indexOf(oldString)==-1)lostArr.push(oldArr[j]);}alert(lostArr); //--> </script>只用一次循環(huán)
<script>var a = [0,3,4,8,9,2,6];var b = [];var i, len, min, max;a.sort(function (a, b) {return a-b;});for (i=0,len=a.length;i<len;i+=1) {min = a[i];max = a[i+1]if (max !== min + 1) {b.push(min+1);}}alert(b.slice(0,-1)); </script>4、編寫一個測試頁面，第一道題答對后顯示第二道題，如果答錯給出正確答案后再顯示第二道題，依次類推，當(dāng)三道題全部答對后給出提示："恭喜，你全部答對了！"
如：第一題：你的姓名？
????? 選項： A 管理員（正確答案）? B 游客? C 無名
????? 第二題：你所在的公司名稱？
????? 選項： A IBM? B Oracle? C BIG（正確答案）
????? ...
5.標(biāo)簽頁導(dǎo)航效果
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD> <title>自適應(yīng)寬度的標(biāo)簽導(dǎo)航</title> <META http-equiv=Content-Type content="text/html; charset=gb2312"> <STYLE type=text/css> *{margin:0px;padding:0px;} .tab{ border:1px solid #FF0000; width:296px; margin:0px auto; } .menu{font-size:12px} .menu ul li{ text-align:center; display:block; float:left; height:25px; width:98px; line-height:25px; cursor:pointer; background:#ddd; border-right-width:1px; border-bottom-width:1px; border-right-style:solid; border-bottom-style:solid; border-right-color:#FF0000; border-bottom-color:#FF0000; } .menu ul li.tabhover{ border-bottom-style:none; font-weight:bold; color:#FF0000; background:#fff; } .ctn{ padding-top:40px; padding-bottom:20px; padding-left:10px;} .cle{ clear:both; height:0px;} </STYLE> <META content="MSHTML 6.00.2800.1589" name=GENERATOR></HEAD> <BODY> <div class="tab"><div class="menu"><ul><li id="m1" onmouseover="gettab(1)" class="tabhover">標(biāo)題一</li><li id="m2" onmouseover="gettab(2)">標(biāo)題二</li><li id="m3" style="border-right:none" onmouseover="gettab(3)">標(biāo)題三</li> </ul></div><div class="cle"></div><div class="ctn"><div id="c1">此處顯示一的內(nèi)容</div><div id="c2" style="display:none">此處顯示二的內(nèi)容</div><div id="c3" style="display:none">此處顯示三的內(nèi)容</div></div></div><div class="tab"><p>注意:<br>tab與li的寬度設(shè)置：98*3+2＝296</p> </div><script type="text/javascript">function gettab(i) {for (n = 1; n <= 3; n++) {var m = document.getElementById("m" + n);var c = document.getElementById("c" + n);m.className = (n == i) ? "tabhover": "";c.style.display = (n == i) ? "block": "none";}} </script></BODY></HTML>?
6、HTML+CSS題。布置如下頁面（logo圖片我用了我自己的，O(∩_∩)O）
HTML部分
<div class="top"><div class="logo"><img src="my.jpg" /></div><div class="topmenu"><ul><li>menu 1</li><li>menu 2</li><li>menu 3</li></ul></div> </div> <div class="mainSection"><div class="leftmenu"><ul><li>menu 1</li><li>menu 2</li><li>menu 3</li></ul> </div> <div class="section"><div class="aside"><div class="text"><p>section 2s2section 2section 2section 2section 2section 2section 2section 2section 2sectection 2section 2section 2section 2section 2section 2section 2section 2section 2</p></div></div><div class="text"><h2>section 1</h2> <p>section 1sectio2section 2section 2section 2section 2section 2section 2section 2section 2sectn 1section 1section 1section 1section 1section 1section 1section 1section 1section 1</p><h2>section 2</h2><p>section 2section 2section 2section 2section 2section 2section 2section 2section 2section 2sect2section 2section 2section 2section 2section 2section 2section 2section 2</p><h2>section 3</h2><p>section 2section 2n 2section 2section 2section 2section 2section 2section 2section 2section 2sect2section 2section 2section 2section 2section 2section 2section 2sen 2section 2section 2section 2section 2section 2section 2section 2section 2sect2section 2section 2section 2section 2section 2section 2section 2sen 2section 2section 2section 2section 2section 2section 2section 2section 2sect2section 2section 2section 2section 2section 2section 2section 2sen 2section 2section 2section 2section 2section 2section 2section 2section 2sect2section 2section 2section 2section 2section 2section 2section 2sen 2section 2section 2section 2section 2section 2section 2section 2section 2sect2section 2section 2section 2section 2section 2section 2section 2sen 2section 2section 2section 2section 2section 2section 2section 2section 2sect2section 2section 2section 2section 2section 2section 2section 2sen 2section 2section 2section 2section 2section 2section 2section 2section 2sect2section 2section 2section 2section 2section 2section 2section 2sen 2section 2section 2section 2section 2section 2section 2section 2section 2sect2section 2section 2section 2section 2section 2section 2section 2sesection 2section 2section 2section 2section 2section 2section 2section 2section 2</p></div></div><div style="clear:both"></div> </div> <div class="footer">footer</div>其中，
1）text div是用來讓顯示內(nèi)容和其他box之間產(chǎn)生間隙的
2） 最后的空<div style="clear:both"></div>用來消除3px的bug，是footer緊接著mainSection布局
CSS部分
*{margin:0px;border:0px;padding:0px;} .top{margin:0 auto; //居中width:950px;border:1px solid blue;margin-top:10px; } .logo{padding:10px; } .topmenu{margin-left:180px; } .topmenu ul li{display:inline-block;list-style:none;padding:5px;background:blue; } .mainSection{margin:0 auto;width:950px;border:1px solid blue;border-top:0px;background:blue; } .leftmenu{float:left;width:180px; //注意：section和leftmenu的width必須同時給出，不然布局會變形 } .leftmenu ul li{color:white;list-style:none;padding:5px; } .section{background:white;float:left;width:770px; //注意：原因慢慢去找 } .aside{float:right;width:300px;height:200px;clear:left; //使得section能環(huán)繞aside } .footer{clear:both; //清除默認(rèn)布局margin:0 auto;text-align:center;background:#ccc;width:950px;height:40px;border:1px solid blue;border-top:0px; } .text{padding:15px;}轉(zhuǎn)載于:https://www.cnblogs.com/JoannaQ/archive/2012/08/30/2663040.html
總結(jié)
以上是生活随笔為你收集整理的javascript+HTML+CSS面试题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 微信小程序教程、微信小程序开发资源下载汇
- 下一篇： gradle idea java ssm