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 ...
随机推荐
- 洛谷P3246 [HNOI2016]序列
传送门 题解 //minamoto #include<iostream> #include<cstdio> #define ll long long using namespa ...
- Go 使用自定义包（package）
自定义包的分为两种: 1.同目录下的包: 2.不同目录下的包: *经测试,同目录下是不可以用不同包的文件的 同目录下的包: 不同文件中的变量和函数都可以直接访问 不同目录下的包: 1.把要在自定义包外 ...
- Linux下VIM配置以及常用快捷键
一.VIM配置 在目录 /etc/vim下面,有个名为vimrc的文件,这是系统中公共的vim设置文件,对所有用户都有效.而在每个用户的主目录下,都能自己建立私有的设置文件,命名为:“.vimrc”. ...
- Java Annontation(注解)详解
java中经常用到注解(Annontation),索性整理了下关于注解的相关知识点: 一.概念 Annontation是Java5开始引入的新特征,类似与.NET 中的attribute.中文名称一般 ...
- 一个iOS开发者的修真之路
在微信上有童鞋问我iOS开发者的入门标准是神马?这个问题难到我了,而且贸然给一个答案出来的话,必定会有万千高手来喷. 凡人修仙,仙人修道,道人修真.当我们还是一个在青石板上蹲马步汗水涔涔的废柴时,或许 ...
- Maximum Subsequence Sum 最大子序列和的进击之路
本文解决最大子序列和问题,有两个题目组成,第二个题目比第一个要求多一些(其实就是要求输出子序列首尾元素). 01-复杂度1 最大子列和问题 (20分) 给定KK个整数组成的序列{ N1, N2 ...
- turn协议的工作原理
Allocate请求 客户端通过发送Allocate请求给STUN服务器,从而让STUN服务器为A用户开启一个relay端口. a) 客户端A向STUN Port发送Allocate请求(图中 ...
- PAT甲级考前整理（2019年3月备考）之三，持续更新中.....
PAT甲级考前整理一:https://www.cnblogs.com/jlyg/p/7525244.html,主要讲了131题的易错题及坑点 PAT甲级考前整理二:https://www.cnblog ...
- js 和 java 将时间倒计时显示
需求:用户购买产品,创建了一个订单,但是还么有支付,此时给用户三十分钟剩余支付时间,前台页面做倒计时功能,时间到达时,更改订单状态 ,输出的格式是:29:23 java 实现 package com. ...
- spark on yarn模式下内存资源管理（笔记1）
问题:1. spark中yarn集群资源管理器,container资源容器与集群各节点node,spark应用(application),spark作业(job),阶段(stage),任务(task) ...