25、插件编写 及练习测试
(一) 弹出层插件
效果:
点击按钮产生遮罩,弹出提示框,提示框能拖拽,能关闭.
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#mark{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: #000000;
opacity: 0.3;
z-index: 999;
display: none;
}
#box{
position: absolute;
z-index: 1000;
background: #67a3d9;
display: none;
width: 400px;
height: 300px;
background: pink;
}
#mou_head{
position: absolute;
z-index: 1001;
width: 400px;
height: 30px;
background: #006699;
/*top:-40px;*/
}
#cls{
position: absolute;
right: 10px;
z-index: 1002;
}
</style>
</head>
<body>
<input type="button" name="btn" id="btn" value="弹出" />
<div id="mark">
</div>
<div id="box">
<div id="mou_head">
这个是用来实现拖层
</div>
<input type="button" name="cls" id="cls" value="关闭" />
</div>
</body>
<script type="text/javascript" src="js/drag.js" ></script>
<script type="text/javascript">
let oMark = document.getElementById("mark");
let oBtn = document.getElementById("btn");
let oDiv = document.getElementById("box");
let oDrag = document.getElementById("mou_head");
let oCls = document.getElementById("cls");
oBtn.onclick = function(){
oMark.style.display = 'block';
oDiv.style.display = "block";
oDiv.style.left = document.documentElement.clientWidth / 2 - oDiv.offsetWidth / 2 + "px";
oDiv.style.top = document.documentElement.clientHeight / 2 - oDiv.offsetHeight / 2 + "px";
new Drag("box");
}
oCls.onclick = function(){
oDiv.style.display = "none";
oMark.style.display = 'none';
}
</script>
</html>
js:
class Drag{
constructor(id){
this.ele = document.getElementById(id);
var that = this;
this.ele.onmousedown = function(evt){
that.fnDown(evt);
}
}
fnDown(evt){
var e = evt || window.event;
var target = e.target || e.srcElement;
var that = this;
if(target.id == "mou_head"){
this.disX = e.clientX - this.ele.offsetLeft;
this.disY = e.clientY - this.ele.offsetTop;
document.onmousemove = function(evt){
that.fnMove(evt);
}
document.onmouseup = this.fnUp;
document.ondragstart = function(){
return false;
}
}
}
fnMove(evt){
var e = evt || window.event;
var left = e.clientX - this.disX;
var top = e.clientY - this.disY;
if(left <= 0){
left = 0;
}else if(left >= document.documentElement.clientWidth - this.ele.offsetWidth){
left = document.documentElement.clientWidth - this.ele.offsetWidth;
}
if(top <= 0){
top = 0;
}else if(top >= document.documentElement.clientHeight - this.ele.offsetHeight){
top = document.documentElement.clientHeight - this.ele.offsetHeight;
}
this.ele.style.left = left + "px";
this.ele.style.top = top + "px";
}
fnUp(){
document.onmousemove = null;
}
}
(二) 轮播图插件
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<script src="js/js.js"></script>
</head>
<body>
<div id="slide1" class="container">
<ul>
<li><a href="http://www.1000phone.com"><img src="img/1.jpg" alt="文字1"/></a></li>
<li><a href="http://www.1000phone.com"><img src="img/2.jpg" alt="文字2"/></a></li>
<li><a href="http://www.1000phone.com"><img src="img/3.jpg" alt="文字3"/></a></li>
<li><a href="http://www.1000phone.com"><img src="img/4.jpg" alt="文字4"/></a></li>
</ul>
</div>
<script type="text/javascript">
var s = new Slider("slide1");
console.info(s);
</script>
</body>
</html>
css:
ul,ol,li{
padding: 0;
margin: 0;
list-style: none;
}
.container{
width: 500px;
height: 300px;
margin: 50px auto;
position: relative;
}
#msg{
width: 100%;
height: 40px;
line-height: 40px;
text-indent: 10px;
position: absolute;
bottom: 0px;
left: 0;
color: white;
font-size: 16px;
background: rgba(0,0,0,.8);
cursor: pointer;
z-index: 1;
}
ul li a {
display: block;
}
img{
width: 500px;
height: 300px;
}
ol{
position: absolute;
bottom: 10px;
left: 50%;
-webkit-transform: translateX(-50%);
background: rgba(255,255,255,.6);
border-radius: 7px;
padding: 3px;
z-index: 2;
}
ol li{
background: red;
float: left;
width: 8px;
height: 8px;
margin-left: 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
margin-right: 7px;
}
span{
width: 30px;
height: 45px;
line-height: 45px;
font-size: 40px;
color: white;
background: rgba(255,255,255,.3);
cursor: pointer;
position: absolute;
font-weight: bold;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
-moz-transform:translateY(-50%);
-webkit-transition: all 1s ease 0s;
}
#rtBtn{
right: 0;
left: auto;
}
span:hover{
-webkit-transform: rotateY(40deg) translateX(-3px) scale(1.2);
}
js:
//ES5
function Slider(id){
this.ele = this.$id(id);
this.ullis = this.$get(this.$get(this.ele,'ul')[0],'li');
this.num = this.ullis.length;
this.ollis = this.createEle();
this.indexA = 0;
this.div = this.$id('msg');
this.slide();
this.addEvent();
this.timer = null;
this.autoPlay();
}
Slider.prototype = {
$id : function(id){
return document.getElementById(id);
},
$get : function(obj,tagName){
if(typeof obj == 'object'){
return obj.getElementsByTagName(tagName);
}else if(typeof obj == 'string' && this.$id(obj)){
return this.$id(obj).getElementsByTagName(tagName);
}
},
$create : function(tagName){
return document.createElement(tagName);
},
createEle : function(){
var ol = this.$create('ol');
var arr = [];
for(var i = 0;i < this.num;i ++){
var li = this.$create('li');
arr.push(li);
ol.appendChild(li);
}
this.ele.appendChild(ol);
var leftSpan = this.$create('span');
leftSpan.id = 'ltBtn';
leftSpan.innerHTML = '<';
this.ele.appendChild(leftSpan);
var rightSpan = this.$create('span');
rightSpan.id = 'rtBtn';
rightSpan.innerHTML = '>';
this.ele.appendChild(rightSpan);
var div = this.$create('div');
div.id = 'msg';
this.ele.appendChild(div);
return arr;
},
slide : function(){
for(var i = 0;i < this.num;i ++){
this.ullis[i].style.display = 'none';
this.ollis[i].style.background = 'red';
}
this.ullis[this.indexA].style.display = 'block';
this.ollis[this.indexA].style.background = 'blue';
this.div.innerHTML = this.ullis[this.indexA].firstChild.firstChild.alt;
},
addEvent : function(){
this.ltBtn = this.$id('ltBtn');
this.rtBtn = this.$id('rtBtn');
var that = this;
this.ltBtn.onclick = function(){
that.indexA --;
if(that.indexA == -1){
that.indexA = that.num - 1;
}
that.slide();
}
this.rtBtn.onclick = function(){
that.indexA ++;
if(that.indexA == that.num){
that.indexA = 0;
}
that.slide();
}
for(var i= 0;i < this.num; i ++){
this.ollis[i].index = i;
this.ollis[i].onmouseover = function(){
that.indexA = this.index;
that.slide();
}
}
},
autoPlay : function(){
var that = this;
this.timer = setInterval(function(){
that.indexA ++;
if(that.indexA == that.num){
that.indexA = 0;
}
that.slide();
},3000)
this.ele.onmouseover = function(){
clearInterval(that.timer);
}
this.ele.onmouseout = function(){
that.autoPlay();
}
}
}
(三) Ajax插件
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript" src="ajax.js" ></script>
<script type="text/javascript">
$ajax({
type : "get",
url : "index.php",
data : {
"name" : "张三",
"pwd" : "123"
},
success : function(response){
var oDiv = document.createElement("div");
oDiv.innerHTML = response;
document.body.appendChild(oDiv);
}
});
</script>
</body>
</html>
js:
ajax.js插件
/* json对象
* obj.type http连接的方式，包括POST和GET两种方式
* obj.url 发送请求的url
* obj.async 是否为异步请求，true 为异步，false为同步
* obj.data 发送的参数，格式为对象类型 {"name" : "张三","age":18}
* obj.success ajax发送并接收成功调用的回调函数
* obj.error ajax访问失败的回调函数
*
* ？"key=value&key=value"
*
* setRequestHeader 设置请求头
* 设置请求头前需先调用open方法打开一个url
* 设置数据格式
* 1.发送json格式数据
* xhr.setRequestHeader("Content-type","application/json; charset=utf-8");
* 2.发送表单数据
* xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded; charset=utf-8");
* 3.发送纯文本
* xhr.setRequestHeader("Content-type","text/plain;charset=utf-8");
* 4.发送html文本
* xhr.setRequestHeader("Content-type","text/html;charset=utf-8");
*/
function $ajax(obj){
//初始化参数
if(!obj){
return ;
}
obj.type = obj.type || 'GET';
obj.url = obj.url || "";
obj.async = obj.async || 'true';
obj.data = obj.data || {};
obj.success = obj.success || function(){};
//准备（转换参数）
//{name:"张三"，age:18}
//"name=张三&age=18"
var str = '';
for(var key in obj.data){
str += key + '=' + obj.data[key] + '&';
//"&name=张三&age=18";
}
str = str.substring(0,str.length - 1);
alert(str);
var xhr = new XMLHttpRequest();
if(obj.type.toUpperCase() == 'GET'){
xhr.open(obj.type,obj.url + '?' + str,obj.async);
xhr.send();
}else if(obj.type.toUpperCase() == 'POST'){
xhr.open(obj.type,obj.url,obj.async);
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded;charset=utf-8");
xhr.send(str);
}
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
obj.success(xhr.responseText)
}
}
}
php:
<?php
$name = $_GET['name'];
$pwd = $_GET['pwd'];
if($name == '张三'&& $pwd == '123'){
echo 'ok';
}else{
echo 'no';
}
习题回顾
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/*
在界面上弹出一个带输入的提示框,只能输入数字,如果输入的数字大于10
,点击确定以后，弹出提示框,
提示我们是否进行输入的数 + 10, confirm("是否进行输入的数 + 10")
<1>如果点击确定,输出表达式和结果,
<2>如果点击取消,重新弹出带输入的提示框，重复上述操作
如果输入的数小于10,直接弹出警告框,无法运算
点击取消,就不进行后面操作。直接退出循环
*/
//do{
// var n = Number(prompt("请输入数字："));
//
// if(isNaN(n) || n == 0){
// break;
// }else{
// if(n > 10){
// if(confirm("是否进行输入的数 + 10")){
// alert("" + n + 10 + '=' + (n + 10));
// }
// }else{
// alert('无法运算');
// }
// }
//}while(1);
//var now = new Date();
//var newTime = new Date(2018,10,1);
//var ch = Math.floor((newTime - now) / 1000);
//alert(ch);
//扁平化数组
var arr = [1,[2,3],[4,5],6,['hello'],9];==>[1,2,3,4,5,6,'hello',9]
//递归
function fn(arr){
var list = []; //[1,2,3,4,5,6,'hello',9]
if(arr instanceof Array){
for(var i = 0;i < arr.length;i ++){
list = list.concat(fn(arr[i]));
}
}else{
list.push(arr);
}
return list;
}
alert(fn(arr));
</script>
</body>
</html>
