JavaScript -- webAPI 随记02

模拟百度搜索：

var keyWords = ["小米商城","小米官方商城","小米", "爱你爱到死","爱你","艾尼路","爱你就像爱生命","张首晟","张巨明","张云雷", "苹果官网","苹果手机助手","苹果好吃", "苹果此次召回还是没有中国"];
//获取文本框注册键盘抬起事件
$("#txt").onkeyup = function () {//每一次的键盘抬起都判断页面中有没有这个divif($("#dv")){//删除一次$("#box").removeChild($("#dv"));}//获取文本框输入的内容var text = this.value;//临时数组--空数组------->存放对应上的数据var tempArr = [];//把文本框输入的内容和数组中的每个数据对比for (var i = 0; i < keyWords.length; i++) {//是否是最开始出现的if (keyWords[i].indexOf(text) == 0) {tempArr.push(keyWords[i]);//追加}}//如果文本框是空的,临时数组是空的,不用创建divif (this.value.length == 0 || tempArr.length == 0) {//如果页面中有这个div,删除这个divif ($("#dv")) {$("#box").removeChild($("#dv"));}return;}//创建div,把div加入id为box的div中var dvObj = document.createElement("div");$("#box").appendChild(dvObj);dvObj.id = "dv";dvObj.style.width = "300px";dvObj.style.border = "1px solid black";//循环遍历临时数组,创建对应的p标签for(var i =0; i<tempArr.length; i++){var pObj = document.createElement("p");    //创建p标签dvObj.appendChild(pObj);     //把p加到div中setInnerText(pObj, tempArr[i]);pObj.style.margin = 0;pObj.style.padding = 0;pObj.style.cursor = "pointer";pObj.style.marginTop = "5px";pObj.style.marginLeft = "5px";//鼠标进入pObj.onmouseover = function () {this.style.backgroundColor = "pink";};//鼠标离开pObj.onmouseout = function () {this.style.backgroundColor = "";};}
}

JavaScript分三个部分:
1. ECMAScript标准---基本语法
2. DOM--->Document Object Model 文档对象模型,操作页面元素的
3. BOM--->Browser Object Model 浏览器对象模型,操作浏览器的
浏览器中有个顶级对象:window
页面中顶级对象:document
页面中所有的内容都是属于浏览器的,页面中的内容也都是window的

页面加载完毕了,再获取按钮
window.οnlοad=function () {
document.getElementById("btn").οnclick=function () {
alert("1111");
};
};

扩展的事件---页面关闭后才触发的事件
window.οnunlοad=function () {
};
扩展事件---页面关闭之前触发的
window.οnbefοreunlοad=function () {
alert("1111");
};

对象中的属性和方法
location对象
console.log(window.location);
//地址栏上#及后面的内容
console.log(window.location.hash);
//主机名及端口号
console.log(window.location.host);
//主机名
console.log(window.location.hostname);
//文件的路径---相对路径
console.log(window.location.pathname);
//端口号
console.log(window.location.port);
//协议
console.log(window.location.protocol);
//搜索的内容
console.log(window.location.search);

οnlοad=function () {
document.getElementById("btn").οnclick=function () {
//设置跳转的页面的地址
//location.href="http://www.jd.com";//属性
//location.assign("http://www.jd.com");//方法
//location.reload();//重新加载--刷新
//location.replace("http://www.jd.com");//没有历史记录
};
};

通过userAgent可以判断用户浏览器的类型
console.log(window.navigator.userAgent);
通过platform可以判断浏览器所在的系统平台类型.
console.log(window.navigator.platform);

/**
* 返回当前浏览器是什么类型的浏览器
*/
function userBrowser(){
var browserName=navigator.userAgent.toLowerCase();
if(/msie/i.test(browserName) && !/opera/.test(browserName)){
console.log("IE");
}else if(/firefox/i.test(browserName)){
console.log("Firefox");
}else if(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName)){
console.log("Chrome");
}else if(/opera/i.test(browserName)){
console.log("Opera");
}else if(/webkit/i.test(browserName) &&!(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName))){
console.log("Safari");
}else{
console.log("不知道是什么!");
}
}

星星闪闪：

div{width: 600px;height: 600px;border:2px solid yellow;background-color: black;position: relative;}
span{font-size: 30px;color: yellow;position: absolute;}
<input type="button" value="亮起来" id="btn"/> <div id="dv"></div>
$("#btn").onclick=function () {setInterval(function () {$("#dv").innerHTML="<span>★</span>";var x = parseInt(Math.random() * 600 + 1);var y = parseInt(Math.random() * 600 + 1);$("#dv").firstElementChild.style.left=x+"px";$("#dv").firstElementChild.style.top=y+"px";},5);
};

轮播：

<div class="all" id='box'><div class="screen"><!--相框--><ul><li><img src="data:images/1.jpg" width="500" height="200"/></li><li><img src="data:images/2.jpg" width="500" height="200"/></li><li><img src="data:images/3.jpg" width="500" height="200"/></li><li><img src="data:images/4.jpg" width="500" height="200"/></li><li><img src="data:images/5.jpg" width="500" height="200"/></li></ul><ol></ol></div><div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
</div>

//获取最外面的div
var box = my$("box");
//获取相框
var screen = box.children[0];
//获取相框的宽度
var imgWidth = screen.offsetWidth;
//获取ul
var ulObj = screen.children[0];
//获取ul中的所有的li
var list = ulObj.children;
//获取ol
var olObj = screen.children[1];
//焦点的div
var arr = my$("arr");
var pic = 0;//全局变量
//创建小按钮----根据ul中的li个数
for (var i = 0; i < list.length; i++) {
//创建li标签,加入到ol中
var liObj = document.createElement("li");
olObj.appendChild(liObj);
liObj.innerHTML = (i + 1);
//在每个ol中的li标签上添加一个自定义属性,存储索引值
liObj.setAttribute("index", i);
//注册鼠标进入事件
liObj.onmouseover = function () {
//先干掉所有的ol中的li的背景颜色
for (var j = 0; j < olObj.children.length; j++) {
olObj.children[j].removeAttribute("class");
}
//设置当前鼠标进来的li的背景颜色
this.className = "current";
//获取鼠标进入的li的当前索引值
pic = this.getAttribute("index");
//移动ul
animate(ulObj, -pic * imgWidth);
};
}
//设置ol中第一个li有背景颜色
olObj.children[0].className = "current";
//克隆一个ul中第一个li,加入到ul中的最后=====克隆
ulObj.appendChild(ulObj.children[0].cloneNode(true));
//自动播放
var timeId= setInterval(clickHandle,1000);
//鼠标进入到box的div显示左右焦点的div
box.onmouseover = function () {
arr.style.display = "block";
//鼠标进入废掉之前的定时器
clearInterval(timeId);
};
//鼠标离开到box的div隐藏左右焦点的div
box.onmouseout = function () {
arr.style.display = "none";
//鼠标离开自动播放
timeId= setInterval(clickHandle,1000);
};
//右边按钮
my$("right").onclick =clickHandle;
function clickHandle() {
//如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图,
//所以,如果用户再次点击按钮,用户应该看到第二个图片
if (pic == list.length - 1) {
//如何从第6个图,跳转到第一个图
pic = 0;//先设置pic=0
ulObj.style.left = 0 + "px";//把ul的位置还原成开始的默认位置
}
pic++;//立刻设置pic加1,那么此时用户就会看到第二个图片了
animate(ulObj, -pic * imgWidth);//pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片
//如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,
if (pic == list.length - 1) {
//第五个按钮颜色干掉
olObj.children[olObj.children.length - 1].className = "";
//第一个按钮颜色设置上
olObj.children[0].className = "current";
} else {
//干掉所有的小按钮的背景颜色
for (var i = 0; i < olObj.children.length; i++) {
olObj.children[i].removeAttribute("class");
}
olObj.children[pic].className = "current";
}
};
//左边按钮
my$("left").onclick = function () {
if (pic == 0) {
pic = 5;
ulObj.style.left = -pic * imgWidth + "px";
}
pic--;
animate(ulObj, -pic * imgWidth);
//设置小按钮的颜色---所有的小按钮干掉颜色
for (var i = 0; i < olObj.children.length; i++) {
olObj.children[i].removeAttribute("class");
}
//当前的pic索引对应的按钮设置颜色
olObj.children[pic].className = "current";
};
//设置任意的一个元素,移动到指定的目标位置
function animate(element, target) {
clearInterval(element.timeId);
//定时器的id值存储到对象的一个属性中
element.timeId = setInterval(function () {
//获取元素的当前的位置,数字类型
var current = element.offsetLeft;
//每次移动的距离
var step = 10;
step = current < target ? step : -step;
//当前移动到位置
current += step;
if (Math.abs(current - target) > Math.abs(step)) {
element.style.left = current + "px";
} else {
//清理定时器
clearInterval(element.timeId);
//直接到达目标
element.style.left = target + "px";
}
}, 10);
}

 //匀速动画function animate(element, target) {//清理定时器clearInterval(element.timeId);element.timeId = setInterval(function () {//获取元素的当前位置var current = element.offsetLeft;//移动的步数var step = 10;step = target > current ? step : -step;current += step;if (Math.abs(current - target) > Math.abs(step)) {element.style.left = current + "px";} else {clearInterval(element.timeId);element.style.left = target + "px";}}, 20);}

offset系列：

在style标签中设置的样式属性获取不到；如#dv{width:10px;}$("dv").style.width;废了。采用offsetWidth;
在style属性中设置的样式属性是可以获取到的；style="width:10px"
没有脱离文档流：offsetLeft:父元素(margin，padding,border),自身margin
脱离文档流：offsetLeft：自身left，margin。
图片跟着鼠标移动：(获取鼠标X，Y)
   document.onmousemove = function (e){ 鼠标移动的横纵坐标。
   $("img").style.left= e.clientX +"px"; 可视区域的横纵坐标。
   $("img").style.top = e.clientY +"px";    }

scroll系列：

scrollWidth(),scrollHeight(),scrollTop(),scrollLeft()
$("dv").onscroll = function () {
};
固定导航栏案例：
//获取页面向上或者向左卷曲出去的距离的值
function getScroll() {return {left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0};
}
//滚动事件
window.οnscrοll=function () {//向上卷曲出去的距离和最上面的div的高度对比if(getScroll().top>=$("topPart").offsetHeight){//设置第二个div的类样式my$("navBar").className="nav fixed";//设置第三个div的marginTop的值$("mainPart").style.marginTop=$("navBar").offsetHeight+"px";}else{$("navBar").className="nav";$("mainPart").style.marginTop="10px";}
};

元素的样式属性是无法直接通过:对象.style.属性来获取(样式在style属性中设置)offset系列:offsetLeft:距离左边位置的值offsetTop:距离上面位置的值offsetWidth:元素的宽(有边框)offsetHeight:元素的高(有边框)scroll系列:卷曲scrollWidth:元素中内容的实际的宽(没有边框),如果没有内容就是元素的宽scrollHeight:元素中内容的实际的高(没有边框),如果没有内容就是元素的高document.getElementById("btn").onclick=function () {console.log(document.getElementById("dv").offsetWidth);//元素的宽,有边框console.log(document.getElementById("dv").offsetHeight);//元素的高,有边框console.log(document.getElementById("dv").scrollWidth);//元素中内容的实际的宽console.log(document.getElementById("dv").scrollHeight);//元素中内容的实际的高console.log(document.getElementById("dv").scrollTop);//向上卷曲出去的距离console.log(document.getElementById("dv").scrollLeft);//向左卷曲出去的距离
};

function getScroll() {return{left: window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft||0,top : window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0}
}
window.onscroll = function () {console.log(getScroll().top);
}

字符串的拼接：

//推荐使用数组的方式拼接大量的字符串
document.getElementById("btn").onclick = function () {
var str = [];
//获取所有的文本框
var inputs = document.getElementsByTagName("input");
//每个文本框的value属性值
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type != "button") {
str.push(inputs[i].value);
}
}
console.log(str.join("|"));//字符串
};

获取元素的文本内容
* @param element 任意元素
* @returns {*} 任意元素中的文本内容
*/
function getInnerText(element) {
if (typeof(element.textContent) == "undefined") {
return element.innerText;
} else {
return element.textContent;
}
}

JavaScript -- webAPI 随记02相关推荐

《JavaScript 闯关记》
为何写作此课程 stone 主要负责基于 Web 的企业内部管理系统的开发,虽然能够熟练地使用 JavaScript,但随着对 JavaScript 的理解越来越深,才发现自己尚未掌握其精髓. 201 ...
【前端】JavaScript —— WebAPI
JavaEE传送门 JavaEE [前端]JavaScript -- JS的组成与基本语法 [前端]JavaScript -- JS的基本语法之数组, 函数- 目录 WebAPI DOM 获取元素事 ...
[转载] 杜拉拉升职记——02 单相思与性骚扰
来源:李可. 杜拉拉升职记(第三版). 西安: 陕西师范大学出版社, 2010, 5. 02 单相思与性骚扰的区别拉拉注意到,DB所有经理办公室沿走道的这一面,都是用大块的玻璃来做间隔墙. 拉拉问 ...
JavaScript学习随记——对象
JS中对象基本使用 <script type="application/javascript" charset="utf-8">//Objcet 所 ...
用JavaScript实现倒记时特效代码--Java自学网
<html> <head> <title>距离某事时间点的倒记时特效-JAVA:http://www.javalearns.com/</title> & ...
《JavaScript 闯关记》之函数
函数是一段代码,它只定义一次,但可以被执行或调用任意次.在 JavaScript 里,函数即对象,程序可以随意操控它们.比如,可以把函数赋值给变量,或者作为参数传递给其他函数,也可以给它们设置属性,甚 ...
《JavaScript 闯关记》之原型及原型链
原型链是一种机制,指的是 JavaScript 每个对象都有一个内置的 __proto__ 属性指向创建它的构造函数的 prototype(原型)属性.原型链的作用是为了实现对象的继承,要理解原型链, ...
JavaScript 世界万物诞生记
一. 无中生有起初,什么都没有. 造物主说:没有东西本身也是一种东西啊,于是就有了null: 现在我们要造点儿东西出来.但是没有原料怎么办? 有一个声音说:不是有null嘛? 另一个声音说:可是nu ...
JavaScript学习随记——面向对象编程（继承）
@Example:基于原型链的继承 <!DOCTYPE HTML> <html><head><meta http-equiv="Content-Ty ...

JavaScript -- webAPI 随记02

JavaScript -- webAPI 随记02相关推荐

最新文章

热门文章