onkeyup ：onkeyup 键盘按键按下触发 ,当按键释放时会调用事件，但是调用事件之前已经把该按键值显示到了文本框中了。
<style>
#dv {
width: 400px;
margin: 100px auto;
}
#dv #txt {
width: 250px;
}
</style>
</head>
<body>
<div id="dv">
<input type="text" id="txt">
<input type="button" value="搜索" id="btn">
</div>
<script src="common.js"></script>
<script>
var keywords = ["小花", "小红","小绿","今天中午吃什么","今天晚上吃什么","今天早上吃什么",
"张梦婷","张秋明","张国荣"]
my$("txt").onkeyup = function () {
if (my$("dv1")) {
my$("dv").removeChild(my$("dv1"))
}
var text = my$("txt").value;
var newArr = [];
for (var i = 0; i < keywords.length; i++) {
if (keywords[i].indexOf(text) == 0) {
newArr.push(keywords[i]);
}
}
console.log(newArr);
if(newArr.length==0 || this.value.length ==0){
return;
}
var dvObj = document.createElement("div");
my$("dv").appendChild(dvObj);
dvObj.width="300px";
dvObj.style.border = "1px solid red";
dvObj.id="dv1";
for (var i=0;i<newArr.length;i++){
var pObj =document.createElement("p")
dvObj.appendChild(pObj);
// setInnerText(pObj,newArr[i]);
pObj.innerHTML=newArr[i];
pObj.onmouseover=mouseoverHandle;
pObj.onmouseout=mouseoutHandle;
pObj.onclick=clickHandle;
}
}
//鼠标移入事件
function mouseoverHandle(){
this.style.background="pink";
}
//鼠标移入事件
function mouseoutHandle(){
this.style.background="";
}
function clickHandle(){
my$("txt").value=this.innerText;
my$("dv").removeChild(my$("dv1"));
}
BOM的顶级对象window
BOM:Browser object model * 顶级对象：window=======页面中所有的内容都属于window * window.属性/ window.方法------一般可以省略window不写
var num = 10;
console.log(window.num);
function f1() {
console.log("hello");
}
window.f1();
var obj = {
name: "小明"
}
console.log(window.obj.name);
console.log(name);//WINDOW中的 name属性
// console.log(age);
// //1.在页面中弹框，一般不用，调试的时候用
// // alert("对话框");
//
// //2.确定框，确定和取消
// var flag = confirm("您是否确定注册？");//返回bool类型
// console.log(flag);
// 3.用户输入的框，返回string
var result = prompt("请输入你的名字");
console.log(result);
</script>页面加载事件
-
onload:
-
window.onload = function () {
// 当页面加载完成执行
// 当页面完全加载所有内容（包括图像、脚本文件、CSS 文件等）执行
} -
//当页面完全加载完成后触发 window.onload=function(){ document.getElementById("btn").onclick=function(){ alert("123") } } //onunload:关闭页面时触发 onbeforeunload：页面关闭前触发----ie有的 </script> </head> <body> <input type="button" value="显示内容" id="btn"> <script src="common.js"></script>location对象
location对象是window对象下的一个属性，时候的时候可以省略window对象
location可以获取或者设置浏览器地址栏的URL
<body> <a href="#123123">哈哈哈</a> <button id="btn">显示效果</button> <script src="common.js"></script> <script> //获取地址栏后的#及后面的内容 console.log(window.location.hash); //主机名及端口号 console.log(window.location.host);//localhost:63342 //主机名 console.log(window.location.hostname);//localhost //文件的路径---相对路径 console.log(window.location.pathname);///%E9%82%B1%E6%85%A7/6location.html //端口号 console.log(window.location.port);//63342 //协议 console.log(window.location.protocol);//http: //搜索的内容 console.log(window.location.search);//?_ijt=23sefnattigdao7041j6fm2n6q //获取地址栏后的#及内容 my$("btn").onclick=function () { console.log(window.location.hash); // location.href="5onload事件.html";//跳转页面，有后退 // location.replace("05-onload事件.html");//跳转页面，没有后退 location.reload();//刷新 } </script> </body>history对象
-
back()
-
forward()
-
go()
-
<body> <input type="button" value="跳转到下一个页面" id="btn"> <!--有历史记录后--> <input type="button" value="前进到下一个页面" id="btn1"> <script src="common.js"></script> <script> // window.history.forward();=====前进 // window.history.back();=====后退 // window.history.go();//=====参数为-1：后退一个页面，参数为1：前进一个页面 my$("btn").onclick=function(){ location.href="07-test.html"; } my$("btn1").onclick=function(){ // history.forward(); history.go(1); } </script> </body>navigator对象
-
userAgent
-
通过userAgent可以判断用户浏览器的类型
-
platform
-
通过platform可以判断浏览器所在的系统平台类型.
-
console.log(window.navigator.userAgent);//判断用户浏览器类型 console.log(window.navigator.platform);//通过platform可以判断浏览器定时器
setTimeout()和clearTimeout()
-
在指定的毫秒数到达之后执行指定的函数，只执行一次
-
// 创建一个定时器，1000毫秒后执行，返回定时器的标示
var timerId = setTimeout(function () {
console.log('Hello World');
}, 1000);// 取消定时器的执行
clearTimeout(timerId); -
setInterval()和clearInterval()
定时调用的函数，可以按照给定的时间(单位毫秒)周期调用函数
-
// 创建一个定时器，每隔1秒调用一次
var timerId = setInterval(function () {
var date = new Date();
console.log(date.toLocaleTimeString());
}, 1000);// 取消定时器的执行
clearInterval(timerId); -
//倒计时栗子 <style> #dv{ width: 400px; height: 200px; background-color: pink; color: #7abfe6; font-size: 32px; text-align: center; margin:0 auto; line-height: 200px; } </style> </head> <body> <div id="dv"> 放学倒计时:<span id="span"></span> </div> <script src="common.js"></script> <script> daoJiShi(); //添加定时器 setInterval(daoJiShi,1000); //封装一个函数 function daoJiShi() { //获取时间对象///获取当前时间 var now =new Date(); // 获取结束时间 var end = new Date("2019-4-1 19:30:00"); // console.log(now) // console.log(end); //2.将对时间对象转换成同一单位求差======= var startTime = now.getTime();//返回对应的毫秒数 var endTime = end.getTime();//返回对应的毫秒数 // console.log(startTime); // console.log(endTime); var cha = endTime - startTime; // console.log(cha); //3.将毫秒的时间差转换为 01:01:01格式 cha /= 1000;//时间差变成秒 var hours = parseInt(cha / 60 / 60);//小时 var minites = parseInt(cha / 60 % 60);//剩余的分钟 var seconds = parseInt(cha % 60);//秒 my$("span").innerHTML = geshi(hours) + ":" + geshi(minites) + ":" + geshi(seconds); //4.将时间格式化 function geshi(value) { return value = value < 10 ? "0" + value : value; } } </script> </body>
115
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
