关于 js 的一些调试

最新推荐文章于 2022-07-29 11:12:55 发布

上海刚子

最新推荐文章于 2022-07-29 11:12:55 发布

阅读量365

点赞数

文章标签： js

本文链接：https://blog.csdn.net/zghome/article/details/50847859

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>页面加载进度条</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
@-webkit-keyframes btn {
0%{
opacity: 0;
width: 50px;
transform:rotate(0deg);
}
98%{
transform:rotate(360deg);
width: 50px;
}
100%{
top: 100px;
width: 40px;
opacity: 1;
}
}
@-webkit-keyframes btn1 {
35%{
transform:;
transform:translate3d(0px,-70px,0px) transform:scale(1,1);
box-shadow: 0px 0px 8px red;

}
53%{
transform:translate3d(0px,-40px,0px) scale(1.5,1);
}
58%{
transform:translate(0px,-45px,0px) scale(1.1,1);

}
67

%{
box-shadow: 0px 0px 4px red;
transform:translate3d(0px,-35px,0px) scale(1.3,1);

}
75%{
transform:translate3d(0px,-40px,0px) scale(1.2,1);

}
0%,100%{
transform:translate3d(0,0,0) scale(.5,1);
box-shadow: 0px 0px 1px red;
}
}
.jelly {
font-size: 24px;
font-family: 'PT Sans Narrow', sans-serif;
border: none;
cursor: pointer;
padding: 25px 80px;
display: inline-block;
margin: 15px;
margin-top: 200px;
text-transform: uppercase;
letter-spacing: 6px;
font-weight: 700;
outline: 0;
position: relative;
border-radius: 3px;
-webkit-animation: anim 2s ease-in infinite;
animation: anim 2s ease-in infinite;
transition: all .3s;
background: #3498DB;
color: #fff!important;
overflow: hidden;
text-decoration: none;
}
.jelly:active {
background: #4786b5;
}
@-webkit-keyframes anim {
5% {
-webkit-transform: scale(1.1, .9);
transform: scale(1.1, .9);
}
10% {
-webkit-transform: scale(.9, 1.1) translateY(-.5rem);
transform: scale(.9, 1.1) translateY(-.5rem);
}
15% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes anim {
5% {
-webkit-transform: scale(1.1, .9);
transform: scale(1.1, .9);
}
10% {
-webkit-transform: scale(.9, 1.1) translateY(-.5rem);
transform: scale(.9, 1.1) translateY(-.5rem);
}
15% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes anim1 {
form{
-webkit-transform: scale(1);
opacity: .5;
}
to{
-webkit-transform: scale(4);
opacity: 0;
}
}
@keyframes anim2 {
form{
-webkit-transform: scale(1);
opacity: .2;
}
to{
-webkit-transform: scale(1.5);
opacity: .5;
}
}
#a{
width: 320px;
height: 569px;
position: relative;
margin: 20px auto;
background: blue;
}
.b{
position: absolute;
width: 100px;
height: 100px;
top: -100px;
}
.c{
width: 40px;
height: 20px;
margin: 0 auto;
transform:rotate(360deg);
-webkit-animation: btn 2s linear forwards ;
-o-animation: btn 2s linear forwards ;
animation: btn 2s linear forwards;
}
.e{
float: left;
width: 20px;
height: 20px;
background: red;
}
.f{
float: right;
width: 20px;
height: 20px;
background: yellow;
}
.d{
width: 100px;
height: 100px;
border-radius: 50%;
background: black;
margin: 150px auto 0;
transform:translate3d(0,0,0);
-webkit-animation: btn1 6s infinite forwards ;

}
.dd{
position: absolute;
top: 90%;
left: 40%;
width: 50px;
height: 50px;
border-radius: 50%;
z-index: 9;
background: yellow;
}
.y{
position: absolute;
top: 90%;
left: 40%;
width: 100px;
height: 100px;
border-radius: 50%;
box-shadow: 0px 0px 20px red inset;
opacity: .5;
border:1px solid red;
-webkit-animation: anim1 2.668s ease-out forwards ;
}
.y1{
-webkit-animation: anim2 1.668s infinite forwards ;
}
.fa{
width: 400px;
height: 100px;
background: red;
/*display: -webkit-flex; */
display: -webkit-box;
}
.fb{
width: 100px;
height: 100%;
background: black;

}
.fc{
width: 100px;
height: 100%;
background: yellow;
}
.fd{
height: 100%;
background: blue;
/*flex-basis: auto;*/
-webkit-box-flex :1;
}
</style>
<script type="text/javascript" src="http://static.anhouse.com/ananzuweb/common/mod/pkg/base_3381b60.js" charset="utf-8"></script>
</head>
<body>
werwerwrwrwr
<div class="fa">
<div class="fb">

</div>
<div class="fc"></div>
<div class="fd">21313</div>
</div>

<div id="a">
<div class="b"></div>
<div class="c">
<span class="e"></span>
<span class="f"></span>
</div>
<div class="d"></div>
</div>
<div class="jelly">点击按钮</div>
<div class="y y1"></div>
<div class="dd"></div>

<script type="text/javascript">
;(function(document,$,window){
function a(opt){
this.option = $.extend({
name : "111",
callback:function(name){
alert(name);
}
},opt||{});
this.init();
}
a.prototype = {
init:function(){
this.bindEvent();
},
bindEvent:function(){
var that = this;
that.option.callback(that.option.name);
alert(that.option.name);
},
alert:function(name){
alert(name)
}
}
$.fn.a = function(){
return new a;
}

})(document,$,window)
$(function(){
$(".dd").click(function(){
$(".y").removeClass("y1")
$('<div class="y"></div>').appendTo("body");
setTimeout(function(){
$(".y:first").remove();
},2700)
setInterval(function(){
if($(".y").length == 1){
$(".y:first").addClass("y1");
}
},2700)
})

})
</script>
<script type="text/javascript">
;!(function($){
"use strict"
if(typeof define == "function"){
define(function(require, exports, module){
require('../jquery/jquery.js'),
require('../dialog/dialog.js')
});
}else{

}

var xxx = (function(window){
var a = 1;
function aa(ele){
this.init();
}
aa.prototype = {
init:function(){
this.a = a;
this.bb();
},
bb:function(){
var self = this;
alert(this.a)
}
}
return aa;
})(window)

// var cc = new xxx();

// return window.aa = aa();
// console.log(aa)
// try{
// aa;
// }catch(e){
// alert(2342342)
// }
// aa.bb();
})(jQuery)

</script>

<script type="text/javascript">
$(function(){
var d = new Date();
console.log(d)
})

</script>
<div class= "abc">
fdsfsfsf
</div>
<div class= "abc">
fdsfsfsf
</div>
<div class= "abc">
fdsfsfsf
</div>
<script type="text/javascript">
function press(opt){
this.options = $.extend({
a:{
text : "a"
},
b:{
text : "b"
}
},opt || {});
this.init();
}
press.prototype = {
init:function(){
var self = this;
this.rtext = self.options.a.text;
this.unrtext = self.options.b.text;
},
read:function(event){
event.html(this.rtext);
},
unread:function(event){
event.html(this.unrtext);
}
}
window.press = press;
var b = new press({
a:{
text : "a"
},
b:{
text : "b"
}
})

$(".abc").click(function(event){

}).hover(function(event){
var $target = $(event.target);
b.read($target);
},function(event){
var $target = $(event.target);
b.unread($target);
})



</script>

<script type="text/javascript">
// $(function(){
// $.ajax({
// type: "get",
// async: false,
// url: "http://www.baidu.com",
// dataType: "jsonp",
// jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
// // jsonpCallback:"?",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
// success: function(json){
// alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。');
// },
// error: function(){
// alert('fail');
// }
// });
// });
</script>
<script type="text/javascript">
// jQuery.isArray()：是否为数组。
// jQuery.isEmptyObject()：是否为空对象（不含可枚举的属性）。
// jQuery.isFunction()：是否为函数。
// jQuery.isNumeric()：是否为数组。
// jQuery.isPlainObject()：是否为使用“{}”或“new Object”生成的对象，而不是浏览器原生提供的对象。
// jQuery.isWindow()：是否为window对象。
// jQuery.isXMLDoc()：判断一个DOM节点是否处于XML文档之中。
</script>
<script type="text/javascript">
1, 模拟类的工厂模式
//基类
var Class = {
//基类的静态方法
creat:function(){
//返回一个constructor
return function(){
//调用未定义的initialize，
//将constructor的arguments传递给initialize
this.initialize.apply(this,arguments);
}
}
};
var transform = function(data){
return $.param(data);
}

$http.post("/foo/bar", requestData, {
headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
transformRequest: transform
}).success(function(responseData) {
//do stuff with response
});
var class1 = Class.creat();
class1.prototype = {
initialize:function(str){
alert(str);
}
};
var obj = new class1('hello');

2, 在父类中调用一个未定义的方法(或者定义了的空方法)，这个方法在子类才被实现。
Object.extend = function(des,source){
for(p in source){
des[p] = source[p];
}
return des;
};
Object.prototype.extend = function(object){
return Object.extend.apply(this,[this,object]);
};

function BaseClass(){};
BaseClass.prototype = {
initialize:function(name,age){
this.name = name;
this.age = age;//调用了一个抽象方法
this.oninit();
},
//抽象方法是一个空方法，由派生类实现
oninit:function(){}
};
function ClassA(){};
ClassA.prototype = (new BaseClass()).extend({
oninit:function(){
alert(this.name + ' : ' + this.age);
}
});
var obj = new ClassA();
obj.initialize('Tom',22);

</script>
</body>
</html>