js 小练习
js 学习之路代码记录
js 加载时间线 1.创建Document对象，开始解析web页面。解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中。这个阶段document.readyState="loading"
2.遇到link外部css，创建线程加载，并继续解析文档
3.遇到script外部js，并且没有设置async、defer，浏览器加载，并阻塞，等待js加载完成并执行该脚本，然后继续解析文档。
4.遇到script外部js，并且设置有async、defer，浏览器创建线程加载，并继续解析文档。对于async属性的脚本，脚本加载完成后立即执行。（异步禁止使用document.write()）
5.遇到img等，先正常解析dom结构，然后浏览器异步加载src，并继续解析文档。
6.当文档解析完成。document.readyState="interactive"
7.文档解析完成后，所有设置有defer的脚本会按照顺序执行。(注意与async的不同，但同样禁止使用document.write())
8.document对象出发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段。
9.当所有async的脚本加载完成并执行后、img等加载完成后，document.readyState="complete",window对象出发load事件。
10.从此，以异步相应方式处理用户输入、网络事件等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <script>
// hash
// 哈希方式
var arr = [1,1,1,1,1,1,2,2,3,3,3,1,1,2,3,3,3,2,1,1];
Array.prototype.unique = function (){
var obj ={},
arr=[],
len = this.length;
for (var i = 0;i < len;i++){
if(!obj[this[i]]){
obj[this[i]] = "a";
arr.push(this[i]);
}
}
return arr;
};
a = arr.unique();
document.write(a);
</script> </body>
</html>
数组去重
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
</head>
<body> <script> // 2.字符串去重 var stri = "qqqwwweee111333222";
String.prototype.qc = function () {
var len = this.length,
obj = {},
nstr = "";
for (var i = 0;i < len; i ++){
if(!obj[this[i]]){
obj[this[i]] = "abc"
}
}
for (var i in obj){
nstr += i
}
return nstr
}
</script> </body>
</html>
字符串去重
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>工具jstype</title>
</head>
<body>
<script>
function type(target){
var ret = typeof(target);
var template = {
"[object Array]" : "array",
"[object Object]" : "object",
"[object Number]" : "number - object",
"[object Boolean]" : "boolean - object",
"[object String]" : 'string - object'
}
if(target === null){
return "null";
}else if (ret == "object"){
var str = Object.prototype.toString.call(target);
return template[str]
// 数组
// 对象
// 包装类 Object.prototype.toString
}else{
return ret;
}
// 1.分两类 原始值
// 2.区分引用值
}
</script> </body>
</html>
type
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
</head>
<body> <script>
// 1.一个字符串[a-z]组成，请找出该字符串第一个只出现一次的字母；
var arr="qwernyweuiotyiotureioputreowyturyetuioperywioptueiwoareuwoityewuiotyueiorubrueioqwtuioruc";
function myqc(s){
var num = {};
var c = 1;
var len = s.length;
for (var i = 0; i < len; i++){
// if(num[s[i]]){
// num[s[i]][1]++;
// }else{
// num[s[i]] = [i,1];
// }
// 两种判断，一种if判断，一种三目运算符判断
num[s[i]] = num[s[i]] ? [i,++num[s[i]][1]] : [i, 1]
}
for(var j in num){
if (num[j][1] === 1){
if (num[j][0] < len){
len = j
}
}
}
return len
}
var a = myqc(arr);
console.log(a) </script> </body>
</html>
一个字符串[a-z]组成，请找出该字符串第一个只出现一次的字母
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
</ul> <script>
// 点击每一个li标签，返回li的索引
// 使用闭包解决此问题
var liCol = document.getElementsByTagName("li"),
len = liCol.length;
for(var i = 0;i < len;i++){
(function(j){
liCol[j].addEventListener("click",function () {
console.log(j)
})
}(i))
} </script> </body> </html>
点击任意li标签，返回li的索引
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽</title>
</head>
<body> <div style="width:100px;height:100px;background-color:red;position:absolute;left:0;top:0;"></div> <script> var div = document.getElementsByTagName("div")[0];
var disX,
disY;
div.onmousedown = function (e) {
disX = e.pageX - parseInt(div.style.left);
disY = e.pageY - parseInt(div.style.top);
document.onmousemove = function (e) {
var event = e || window.event;
div.style.left = e.pageX - disX + "px";
div.style.top = e.pageY - disY + "px";
}
document.onmouseup = function(){
document.onmousemove = null;
} } </script>
</body>
</html>
拖拽box
document.onkeydown = function(e) {
console.log(e) //打印出按键信息
// 左37 上38 右39 下40
var speed = 5;
switch(e.which){
case 38:
div.style.top = parseInt(div.style.top) - speed + "px";
break;
case 40:
div.style.top = parseInt(div.style.top) + speed + "px";
break;
case 37:
div.style.left = parseInt(div.style.left) - speed + "px";
break;
case 39:
div.style.left = parseInt(div.style.left) + speed + "px";
break;
}
}
打印出按键信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>画笔工具</title>
<!--画笔工具，要配合以下css-->
<style>
*{
margin:0;
padding:0;
}
li{
box-sizing:border-box;
float:left;
width:10px;
height:10px;
/*border:1px solid black;*/
}
ul{
list-style:none;
width:1000px;
height:1000px;
/*设置画板区域*/
}
</style>
</head>
<body>
<script> var ul = document.createElement("ul"); for(var i = 0; i < 10000; i ++){
// 设置画板像素
var li = document.createElement("li");
li.setAttribute("img-data", 0);
ul.appendChild(li);
}
document.body.appendChild(ul);
ul.onmouseover = function (e) {
var event = e || window.event;
var target = event.target || event.srcElement;
target.style.backgroundColor = "rgb(0, 255," + target.getAttribute('img-data') +")";
target.setAttribute('img-data',parseInt(target.getAttribute('img-data' )) + 20 );
} </script> </body>
</html>
画笔
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul> <script> var ul = document.getElementsByTagName("ul")[0];
ul.onclick = function (e) {
var event = e || window.event;
var target = event.target || event.sreElement;
console.log(target.innerText);
} </script>
</body>
</html>
事件委托
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*作图不好保存，so...*/
*{
margin:0;
padding:0;
}
.img1{background-color:red;}
.img2{background-color:yellow;}
.img3{background-color:green;}
.img4{background-color:pink;}
.nav{
border:2px solid black;
width:200px;
height:150px;
float:left;
left:200px;
top:100px;
overflow:hidden;
/*轮播图切掉*/
position:relative;
}
ul{
position:absolute;
width:1000px;
height:150px;
float:left;
left:0px;
top:0px;
}
li{
width:200px;
height:150px;
list-style:none;
float:left;
left:0;
top:0;
opacity: .6;
} </style>
</head> <body>
<div class="nav">
<ul class="imgs">
<li class="img1"></li>
<li class="img2"></li>
<li class="img3"></li>
<li class="img4"></li>
<li class="img1"></li>
</ul>
<!--<span class="next">></span>-->
</div> <script> // 封装函数上一页下一页 var ul = document.getElementsByClassName("imgs")[0];
var s = -200;
function start(){
var timer = setInterval(function () {
if(ul.style.left == "-800px"){//判断是否滚动完所有
setTimeout("start()",2000);
ul.style.left = "0px"
clearInterval(timer);
s = -200;
}else if(ul.style.left != s + "px"){//判断是否滚动完成一张图
ul.style.left = parseInt(getStyle(ul, "left")) - 1 + "px";
// 循环滚动
}else{
clearInterval(timer);//清除定时
setTimeout("start()",2000);//过2秒重新开启滚动
s -= 200;//归为默认值
}
},0.5)
}
// setTimeout("start()",2000); function getStyle(elem,prop){
if (window.getComputedStyle){
return window.getComputedStyle(elem,null)[prop];
}else{
return elem.currentStyle[prop];
}
}
</script> </body>
</html>
第一个自己写的轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="password" >
<script>
document.onkeypress = function () {
var event = event || window.event;
console.log(String.fromCharCode(event.charCode))
}
</script>
</body>
</html>
提取密码框的密码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" value="请输入用户名" style="color:#999" onfocus="if(this.value == '请输入用户名'){this.value ='';this.style.color='black'}" onblur="if(this.value == ''){this.value='请输入用户名';this.style.color='#999'}" onchange="this.style.color='black'">
</body>
</html>
输入框功能完善
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*作图不好保存，so...*/
*{
margin:0;
padding:0;
}
.img1{background-color:red;}
.img2{background-color:yellow;}
.img3{background-color:green;}
.img4{background-color:pink;}
.nav{
border:2px solid black;
width:200px;
height:150px;
float:left;
left:200px;
top:100px;
overflow:hidden;
/*轮播图切掉*/
position:relative;
}
ul{
position:absolute;
width:1000px;
height:150px;
float:left;
left:0px;
top:0px;
}
li{
width:200px;
height:150px;
list-style:none;
float:left;
left:0;
top:0;
opacity: .6;
} .pagebutton{
width:20px;
height:20px;
background-color:black;
opacity:0.4;
position:absolute;
top:65px;
color:#f1f1f1;
text-aligh:center center;
}
.prev{
float:left;
left:0;
}
.next{
float:left;
left:180px;
} </style>
</head> <body>
<div class="nav">
<ul class="imgs">
<li class="img1"></li>
<li class="img2"></li>
<li class="img3"></li>
<li class="img4"></li>
<li class="img1"></li>
</ul>
<div class="pagebutton-div">
<span class="prev pagebutton"><</span>
<span class="next pagebutton">></span>
</div> </div> <script> var span = document.getElementsByClassName("prev")[0];
var span1 = document.getElementsByClassName("next")[0]; span.onclick = function () {
pageButton(1)
} span1.onclick = function () {
pageButton(-1)
} // 封装函数上一页下一页 function pageButton(n){
start(n)
console.log(n)
} var ul = document.getElementsByClassName("imgs")[0];
var s = -200;
function start(n){ var timer = setInterval(function () {
console.log(s,n)
if(n != undefined){
console.log(111)
if(ul.style.left != s + "px") {//判断是否滚动完成一张图
ul.style.left = parseInt(getStyle(ul, "left")) + n + "px";
span.onclick=null;
span1.onclick=null;
}else{
n = undefined;
s -= 200;//减去
span.onclick = function () {
pageButton(1)
}
span1.onclick = function () {
pageButton(-1)
}
}
}else if(ul.style.left == "-800px"){//判断是否滚动完所有
setTimeout("start()",2000);
ul.style.left = "0px"
clearInterval(timer);
s = -200;
}else if(ul.style.left != s + "px"){//判断是否滚动完成一张图
ul.style.left = parseInt(getStyle(ul, "left")) - 1 + "px";
// 循环滚动
}else if(ul.style.left == s + "px"){
s -= 200;//减去
n = undefined;
// console.log(s)
clearInterval(timer);//清除定时
setTimeout("start()",2000);//过2秒重新开启滚动
}
},0.5)
}
setTimeout("start()",2000); function getStyle(elem,prop){
if (window.getComputedStyle){
return window.getComputedStyle(elem,null)[prop];
}else{
return elem.currentStyle[prop];
}
}
</script> </body>
</html>
还没完成的带按钮的轮播图
<script>
// 打印页面加载的四个状态
console.log(document.readyState);
document.onreadystatechange = function () {
console.log(document.readyState);
}
document.addEventListener("DOMContentLoaded", function () {
console.log("DOMContentLoaded");
}, false) </script>
打印页面加载的四个状态
js 小练习的更多相关文章
- js小功能整理
/** * 判断是否包含字符串某字符串 * @param {[type]} str [被检测的字符串] * @param {[type]} substr [检测是否含有的字符串] * @return ...
- [转载]Js小技巧||给input type=“password”的输入框赋默认值
http://www.cnblogs.com/Raywang80s/archive/2012/12/06/2804459.html [转载]Js小技巧||给input type="passw ...
- 一些js小题（一）
一些js小题,掌握这些对于一些常见的面试.笔试题应该很有帮助: var a=10; function aa(){ alert(a); } function bb(){ aa(); } bb();//1 ...
- 第24篇 js小知识和“坑”
前面说了说了js的相关知识,基本上除了语法外,把项目常用的知识做了一个梳理,现在说下js的其它方面的知识,这些知识不成体系,属于不理解对于一般开发没什么太多影响,但如果理解清楚,可以更好去开发. js ...
- React.js 小书介绍
React.js 小书 Github 关于作者 这是一本关于 React.js 的小书. 因为工作中一直在使用 React.js,也一直以来想总结一下自己关于 React.js 的一些知识.经验.于是 ...
- 一个js小游戏----总结
花了大概一天左右的功夫实现了一个js小游戏的基本功能,类似于“雷电”那样的小游戏,实现了随即怪物发生器,碰撞检测,运动等等都实现了,下一个功能是子弹轨迹,还有其他一些扩展功能,没有用库,也没有用web ...
- React.js小书总结
(迁移自旧博客2017 08 27) 第一阶段 react的组件相当于MVC里面的View. react.js 将帮助我们将界面分成了各个独立的小块,每一个块就是组件,这些组件之间可以组合.嵌套,就成 ...
- js小技巧总结
js小技巧总结 1.Array.includes条件判断 function test(fruit) { const redFruits = ["apple", "stra ...
- JS小积累（二）— 自动获取浏览器尺寸
JS小积累-获取浏览器窗口尺寸 作者: 狐狸家的鱼 GitHub:八至 autodivheight(); function autodivheight() { //函数:获取尺寸 //获取浏览器窗口高 ...
- JS小积累（一）— 判断在线离线
JS小积累-判断在线离线 作者: 狐狸家的鱼 Github: 八至 if(window.navigator.onLine==true){ console.log('online'); ... } el ...
随机推荐
- Mysql根据数据库的时间字段到点更新另外的状态。
转载:https://blog.csdn.net/xingfuzhijianxia/article/details/53727820 需求如下: 添加一条提醒,被提醒人在提醒时间未到达的时候收不到此提 ...
- JDBC中的DriverManager.getConnection(url)中的参数url
1.Oracle8/8i/9i数据库(thin模式) Class.forName("oracle.jdbc.driver.OracleDriver").newInstance(); ...
- shiro之IniRealm
Shiro认证过程 创建SecurityManager--->主体提交认证--->SecurityManager认证--->Authenticsto认证--->Realm验证 ...
- 如何实现Docker镜像和容器实例的备份迁移
题记 大家在使用Docker都会从容器仓库下载镜像,不过这个过程可能依据网络带宽而定,那么如果将一个已经下载好的镜像迁移到另外一个环境中,或者说如何实现Docker容器的备份恢复,或者迁移,接下来我们 ...
- .net 环境下c# 通信
.net环境下通信主要掌握 通信协议(UDP&TCP). 网络抓包工具().:使用方法 点对点通信,IP组播,广播通信 c#中结构体转为字节流方式 c#结构体与c++结构体转换对应关系 开源的 ...
- AJPFX解析成员变量和局部变量
成员变量和局部变量 3.1.成员变量和局部变量 A:在类中的位置不同 * 成员变量:在类中方法外 * 局部变量:在方法定义中或者方法声明上 B:在内存中的位置不同 ...
- P1603 斯诺登的密码
题目背景 根据斯诺登事件出的一道水题 题目描述 题目描述 2013年X月X日,俄罗斯办理了斯诺登的护照,于是他混迹于一架开往委内瑞拉的飞机.但是,这件事情太不周密了,因为FBI的间谍早已获悉他的具体位 ...
- 公众号如何获取已关注用户的unionid的问题
避免误导,先加一句:首先,得公众号绑定开放平台 这个问题困扰了我一早上,我尝试了很多次获取unionid都失败. 微信的开发文档上有说: 关于特殊场景下的静默授权 1.上面已经提到,对于以snsapi ...
- Spark学习笔记--Spark在Windows下的环境搭建（转）
本文主要是讲解Spark在Windows环境是如何搭建的 一.JDK的安装 1.1 下载JDK 首先需要安装JDK,并且将环境变量配置好,如果已经安装了的老司机可以忽略.JDK(全称是JavaTM P ...
- 请大家帮我找一找bug —— 一个MySQL解析程序（JAVA实现）
周末两天我写了一个MySQLParser.写这个东西的目的是:公司的一个项目中需要对数据打版本号(每个表的每条记录要有一个版本号字段,这个字段需要由框架自动打上去,而不是由程序员来做). 所以,我写的 ...