订阅汇聚素材网Feed

WEB 前端(一)

1.判断字符串是否是这样组成的,第一个必须是字母,后面可以是字母,数字,下划线,总长度为5-20
var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/;
reg.test(“aaa_ggg_et98498_”);

2.截取字符串abcdefg的efg

var str = “abcdefg”;

if(/efg/.test(str))
{
var efg = str.substr(str.indexOf(“efg”),3);
alert(efg);
}

3.判断一个字符串中出现次数最多的字符,统计这个次数。
//将字符串的字符保存在一个hash table 中, key 是字符,value是这个字符出现的次数。
var str=”abcdefgaddda”;
var obj={};
for(var i=0,l=str.length;i<l;i++)
{
var key = str[i];
if(!obj[key])
{
obj[key] = 1;
}else
{
obj[key]++;
}
}
//遍历这个hash table, 获取value 最大的key 和 value
var max = -1;
var max_key =””;
var key;
for(key in obj)
{
if(max < obj[key])
{
max = obj[key];
max_key = key;
}
}
alert(“max:”+max+”max_key:”+max_key);

4, IE与FF脚本兼容性问题
(1) window.event:
表示当前的事件对象,IE有这个对象,FF没有,FF通过给事件处理函数传递事件对象。
(2)获取事件源:
IE用srcElement 获取事件源,而FF 用target获取事件源
(3)添加,去除事件
IE:element.attachEvent(“onclick”,function) element.detachEvent(“onclick”,function);
FF: element.addEventListener(“click”,function,true) element.removeEventListener(“click”,function,ture)
(4) 获取标签的自定义属性
IE:div1.value 或 div1[“value”]
FF:可用div1.getAttribute(“value”)
(5)document.getElementByName() 和 document.all[name]
IE:document.getElementByName() 和 document.all[name]均不能获取div元素
FF:可以
(6)input.type的属性
IE:input.type 只读
FF:input.type 可读写
(7)innerText textCotent outerHTML
IE:支持innerText,outerHTML
FF:支持textContent
(8)是否可用id代替HTML元素
IE:可以用id代替HTML元素
FF:不可以
(9):页面跳转到之前的那一个页面

5,规避javascript多人开发函数重名问题
(1) 可以开发前规定命名规范,根据不同开发人员开发的功能在函数前加前缀
(2) 将每个开发人员的函数封装到类中,调用的时候就调用类的函数,即使函数重名只要类名不重复就ok

6 javascript 面向对象中继承的实现
javascript 面向对象中的继承实现一般都使用到了构造函数和prototype原型链,简单的代码如下:
function Animal(name)
{
this.name = name;
}
Animal.prototype.getName = function(){alert(this.name)}

function Dog(){};
Dog.prototype = new Animal(“buddy”);
Dog.prototype.constructor = Dog;
var dog = new Dog();

7 FF下面实现outerHTML
FF不支持outerHTML,要实现outerHTML还需要特殊处理
思路如下:
在页面中添加一个新的元素A,克隆一份需要获取outerHTML的元素,将这个元素append到新的A中,然后获取A的innerHTML就可以里。
<script type=”text/javascript”>
function getOuterHTML(id)
{
var el = document.getElementById(id);
var newNode = document.createElement(“div”);
document.appendChild(newNode);
var clone = el.cloneNode(true);
newNode.appendChild(clone);
alert(newNode.innerHTML);
document.removeChild(newNode);
}
innerHTML 设置或获取位于对象起始和结束标签内的 HTML
outerHTML 设置或获取对象及其内容的 HTML 形式
innerText 设置或获取位于对象起始和结束标签内的文本
outerText 设置(包括标签)或获取(不包括标签)对象的文本 

8 编写一个方法求一个字符串的字节长度
假设:一个英文字符占用一个字节,一个中文字符占用两个字节
function GetBytes(str)
{
var len = str.length;
var bytes = len;
for(var i=0;i<len;i++)
{
if(str.charCodeAt(i)>255) bytes++;
}
return bytes;
}
alert(GetBytes(“你好,as”));

9. 编写一个方法去掉一个数组的重复元素

var arr=[1,1,2,3,3,2,1];
Array.prototype.unique = function(){
var ret = [];
var o = {};
var len = this.length;
for(var i=0;i<len;i++)
{
var v = this[i];
if(!o[v])
{
o[v] = 1;
ret.push(v);
}
}
return ret;
};
alert(arr.unique());

10 写出3个使用this的典型应用

(1) 在html元素事件属性中使用,如
<input type=”button” onclick=”showInfo(this)”; value=”点击一下”/>
(2) 构造函数
function Animal(name,color)
{
this.name = name;
this.color = color;
}
(3)
<input type=”button” id=”text” value=”点击一下”/>
<script type=”text/javascript”>
var btn = document.getElementById(“text”);
btn.onclick = function(){
alert(this.vaue);
}
</script>

(4)
CSS expression 表达式中使用this关键字
<table width=”100px” height=”100px”>
<tr>
<td>
<div style=”width:expression(this.parentNode.width);”>
div element</div>
</td>
</tr>
</table>

12 如何显示隐藏一个DOM元素?
el.style.display =””;//block
el.style.display =”none”;
el 是要操作的DOM元素

13 javascript中如何检测一个变量是一个string类型? 请写出函数实现String 类型有两种生成方式:
(1) Var str = “hello world”;
(2) Var str2 = new String(“hello world”);
function IsString(str)
{
return(typeof str ==”string”||str.constructor == String);
}
var str=””;
alert(IsString(1));
alert(IsString(str));
alert(IsString(new String(str)));

14 网页中实现一个计算当年还剩多少时间的
14 网页中实现一个计算当年还剩多少时间的倒数计时程序,要求网页上实时动态显示还剩..天..时..分..秒”
<!DOCTYPE HTML PUBLIC “_//W#C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/htm4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″>
<title>倒计时</title>
</head>
<body>
<intput type = “text” value =”” id=”input” size=”1000″/>
<script type=”text/javascript”>
function counter()
{
var date = new Date();
var year = date.getFullYear();
var date2 = new Date(year,12,31,23,59,59);

var time = (date2-date)/1000;
var day = Math.floor(time/(24*60*60)) //Math.floor 向下取整, Math.ceil() 向上取整
var hour = Math.floor(time%(24*60*60)/(60*60))
var minute = Math.floor(time%(24*60*60)%(60*60)/60);
var second = Math.floor(time%(24*60*60)%(60*60)%60);
var str = year+”年还剩”+day+”天”+hour+“时”+minute+”分”+second+”秒”;
document.getElementById(“input”).value = str;
}
window.setInterval(“counter()”,1000);
</script>
</body>
</html>

15 补充代码,鼠标单击Button后将Button1移动到 Button2的后面
<div><input type=”button” id=”button1″ value=”1″ onclick=”???”> <input type=”button” id=”button2″ value=”2″/”>
</div>
<div>
<input type=”button” id=”button1″ value=”1″ onclick=”moveBtn(this);”>
<input type=”button” id=”button2″ value=”2″>
</div>
<script type=”text/javascript”>
function moveBtn(obj)
{
  var clone = obj.cloneNode(true);
var parent = obj.parentNode;
parent.appendChild(clone);

parent.removeChild(obj);
}
</script>

6 人Likes
  

文章转载请注明:WEB 前端(一)-汇聚素材网

本文固定链接:http://www.webhj.com/hj-745.html  +复制链接

WEB 前端(一):等您坐沙发呢!

发表评论

*

*

7 + 1

快捷键:Ctrl+Enter
0全站搜索 1 设计 2 素材 3 教材 4 WEB 5 电子书籍