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 ...
随机推荐
- bzoj 4176: Lucas的数论【莫比乌斯反演+杜教筛】
首先由这样一个结论: \[ d(ij)=\sum_{p|i}\sum_{q|j}[gcd(p,q)==1] \] 然后推反演公式: \[ \sum_{i=1}^{n}\sum_{j=1}^{n}\su ...
- 安卓小程序的一次bug调试，报错:java.lang.NullPointerException,logcat学习
做实验的时候,调试了很久后模拟器执行后,app还是会崩溃并停止运行,错误如下. 因为初学,所以也不知道怎么使用调试工具,也不懂看日志,经过学习后尝试这查看了LogCat日志上面有这样的提示: 其中引起 ...
- 莫比乌斯反演总结——Chemist
懵逼乌斯反演果然名不虚传,自闭了两天的我打算学习一下这一块比较实用的数论内容. (注:1.为了区分狄尼克雷卷积与乘法,本篇文章中乘号全部省略,卷积全部用" * "表示.2.用gcd ...
- springMVC RedirectAttributes
@Controller public class TestController { @RequestMapping("/redirectDemo") public String r ...
- 进击的Python【第十二章】：mysql介绍与简单操作，sqlachemy介绍与简单应用
进击的Python[第十二章]:mysql介绍与简单操作,sqlachemy介绍与简单应用 一.数据库介绍 什么是数据库? 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,每个数 ...
- [CF1109F]Sasha and Algorithm of Silence's Sounds
题意 有一个\(n*m\)的网格,每个格子有一个数,为\(1\)~\(n * m\)的排列 一个区间\((1<=l<=r<=n*m)\)是好的,当且仅当:数值在该区间内的格子,构成一 ...
- Python学习规划
短时间踏实而高效的学习python 知乎:如何系统的学习python 简书:最全的python学习手册 目录 Python编程语言 python视频教程 Python神经网络算法与深度学习视频教程人工 ...
- 暴力 Codeforces Round #183 (Div. 2) A. Pythagorean Theorem II
题目传送门 /* 暴力:O (n^2) */ #include <cstdio> #include <algorithm> #include <cstring> # ...
- 题解报告：hdu 1263 水果
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1263 Problem Description 夏天来了~~好开心啊,呵呵,好多好多水果~~ Joe经营 ...
- java.lang.UnsatisfiedLinkError: E:\TomcatV7_iot\bin\tcnative-1.dll: Can't load AMD 64-bit .dll on a IA 32-bit platform
启动64位Tomcatv7时报如下错误: java.lang.UnsatisfiedLinkError: E:\TomcatV7_iot\bin\tcnative-.dll: Can't load A ...