1.1    复习
1. 按钮不可用 disabled = “disabled” || true
2. setTimeout 只执行一次 setInterval 执行很多次
3. 递归调用 : 函数自己调用自己 函数递归调用 不提倡用函数名 而喜欢用的是 arguments.callee 返回的是 正在执行的函数 本身
4. 逻辑运算符 与 && 或 || 非 ! ! > && > ||
5. 2&&0 0 1&&8 0&&3 0 1||0
6. 转换为 字符型
var num = 12345;
num+ “”
String(num);
num.toString(); 10进制
num.toString(2) 二进制
7. 根据字符位置返回字符
charAt(索引号)
var txt = “abcde”;
txt.charAt(3); d
charCodeAt(3) unicode 编码 97 100
1.2 根据字符返回位置
跟 charAt() 相反的 根据 字符 返回的是 位置
1.2.1 返回前面起第一个字符的位置
indexOf(“字符”);
它是从 前面开始数(从左边开始数), 而且只找第一个, 然后返回改字符的位置, 索引号都是从0开始的。 返回的是个数值。
var txt = “abcdef”;
alert(txt.indexOf(“d”)) 结果就是 3
如果找不到该字符 返回 -1
1.2.2 返回后面起第一个字符的位置
lastIndexOf(参数:索引字符串)
从后面开始数 同上
var txt = “abcdef” ;
txt.lastIndexOf(“d”); 3
返回的值,还是从 左边开始 数的 索引号 。
1.3 网址编码
我们知道一个网址 自己的网址, 不同页面也有自己id网址, 我们经常会做一些, 把网址送入到后台。 但是后台再处理的 不认识比如 换行啊 等特殊符号的 ?
var url = “http://www.itast.cn?name=cz”
所以我们要实现编码,然后再传到后台。
encodeURIComponent() 函数可把字符串作为 URI 组件进行编码
decodeURIComponent() 函数可把字符串作为 URI 组件进行解码
var url = "http://www.itcast.cn?name=andy";
console.log(encodeURIComponent(url)); // 编码
var afterUrl = encodeURIComponent(url);
console.log(decodeURIComponent(afterUrl)); // 解码
结果:
1.4 操作字符串
合并字符串 取字符串
1.4.1 concat() 连接字符串
var txt1 = “abc”;
var txt2 = ”123”;
console.log(txt1.concat(txt2)); “abc123”;
1.4.2 slice()
slice(“取字符串的起始位置”, [结束位置]) ; [] 可选的
起始位置一定要有 结束位置可以省略
var txt = “abcedf”;
txt.slice(3) ; 从 txt 里面字符的 第 3(索引号)个开始取 结束位置省略, 一直取到最后一个。
总结 slice(3) 从第3个开始取,一直取到最后
slice(3,6) 3 从 第3个开始 取 6 取到第6索引号的位置,还是从左边的第0个开始数。 但是不包 6 。
起始位置可以是负数 , 如果是负数,则是从 右边往左边开始取。
var txt =”asdf”;
txt.slice(-1) 结果是 f
1.4.3 substr()
substr(起始位置,[取的个数])
同上。
不写取的个数, 默认从起始位置一直取到最后 。
取的个数: 是指从起始位置开始,往后面数几个。
var txt = “abcdefghijk”;
txt.substr(3,4);
从第3个 (d) 开始 数 4个 defg
substr(-1) 少用 ie678 报错 。 尽量少用
兼容性的写法 :
onBtnClick("btn7",div1.substr(div1.length-1,1)); // 兼容的写法
substring 同slice 一样的 但是有一点不同
substring(3,6)
substring 始终会把 小的值作为 起始位置 大的值作为结束位置
例如: substring(6,3) 实际中 自动变成 substring(3,6);
1.5 保留小数位数
122340.12345 保留两位有效小数 122340.12
substr(0, .+3)
1.console.log(str.substr(0,str.indexOf(".")+3));
通过 indexOf 返回小数点的位置 截取字符串
2 console.log(parseInt(PI*100) /100);
先乘以100 取整 然后 除以100
3 console.log(PI.toFixed(2));
pi.toFixed(2) 保留 2位 小数
1.6 大小写转换
asdf = ASDF
ASDF -- asdf
1 toUpperCase,转换为大写(参数: 无)
2 toLowerCase,转换为小写(参数:无)
asdf.toUpperCase() 结果就是: ASDF
$("txt").value.toUpperCase();
把txt 的值 转换为大写
1.7 无缝滚动
原理:
首先先复制 两张图片 (第一张和第二张) 放到最后面 (本质上是第 5.6张) ul 是盒子移动的, 如果ul 的left 值 大于等于 4张图片的宽度,就应该快速复原为0 。
完整代码:
1 <script>
2 var scroll = document.getElementById("scroll");
3 var ul = scroll.children[0];
4 var num = 0; //控制左侧值 left
5 var timer = null; // 定时器
6 timer = setInterval(autoPlay,20);
7 function autoPlay() {
8 num--;
9 //console.log(num);
10 num<=-1200 ? num = 0 : num;
11 ul.style.left = num + "px";
12 }
13 scroll.onmouseover = function() { // 鼠标经过大盒子 停止定时器
14 clearInterval(timer);
15 }
16 scroll.onmouseout = function() {
17 timer = setInterval(autoPlay,20); // 开启定时器
18 }
19 </script>
1.8 缓动动画
匀速动画,看起来,效果太简单。
等差序列 : 2 4 6 8 10
缓动动画公式:
一个盒子初始值 是 0 要走到 400 px 的位置
假如说,初始值 leader 0 target 400
box.style.left = xxxx + “px”
leader = leader + (target - leader ) /10 ; 1 btn.onclick = function() {
2 setInterval(function(){
3 leader = leader + (target - leader )/10;
4 box.style.left = leader + "px";
5 },30)
6 }

js基本知识5的更多相关文章

  1. [JS复习] JS 基础知识

    项目结尾,空闲时间,又把<JS 基础知识> 这本书过了一遍,温故知新后,很多知其然不知其所以然的内容 豁然开朗. [1. 用于范围的标签] display  :inline or bloc ...

  2. HTML+CSS+JS基础知识

    HTML+CSS+JS基础知识 目录 对HTML+CSS+JS的理解 基础知识 对HTML+CSS+JS的理解 基础知识 插入样式表的三种方式 外部样式表:<link rel="sty ...

  3. Node.js基础知识

    Node.js入门   Node.js     Node.js是一套用来编写高性能网络服务器的JavaScript工具包,一系列的变化由此开始.比较独特的是,Node.js会假设在POSIX环境下运行 ...

  4. 网站开发进阶(十五)JS基础知识充电站

    JS基础知识充电站 1.javascript alert弹出对话框时确定和取消两个按钮返回值? 用的不是alert对话框,是confirm confirm(str); 参数str:你要说的话或问题: ...

  5. NodeJs>------->>第三章:Node.js基础知识

    第三章:Node.js基础知识 一:Node.js中的控制台 1:console.log.console.info  方法 console.log(" node app1.js 1> ...

  6. JS底层知识理解之执行上下文篇

    JS底层知识理解之执行上下文篇 一.什么是执行上下文(Execution Context) 执行上下文可以理解为当前代码的执行环境,它会形成一个作用域. 二.JavaScript引擎会以什么方式去处理 ...

  7. 零散的JS和node.js小知识

    JS的连续赋值和曾经出现的怪异情况 let a=1; let b=a=3; 如上的真实赋值过程 => a=1 => a=3 => b=3 => 一般来说,等号是从右向左赋值的 ...

  8. 前端学习:JS面向对象知识学习(图解)

    前端学习:JS面向对象知识学习(图解) 前端学习:JS(面向对象)代码笔记 JS面向对象图解知识全览 创建类和对象 方式1:使用Object()函数 方式2:使用自变量 方式3:使用工厂函数 创建多个 ...

  9. JS基础知识二

    JS控制语句 switch 语句用于基于不同的条件来执行不同的动作 <script> function myFunction(){ var x; var d=new Date().getD ...

  10. JS基础知识笔记

    2020-04-15 JS基础知识笔记 // new Boolean()传入的值与if判断一样 var test=new Boolean(); console.log(test); // false ...

随机推荐

  1. 数学图形(2.15)Spherical sinusoid球面正弦曲线

    这个曲线与之前的数学图形(2.7)sphere sine wave很相似.而且个人觉得从其公式上看sphere sine wave更应该叫做球面正弦曲线.当然从渲染的曲线图上看,它是非常明显的贴在球上 ...

  2. 怎么删除桌面右键"打开好桌道壁纸"

    “好桌道”是一款优秀的桌面美化工具,其中的子程序“好桌道壁纸”是其重要的组成部分,但是在卸载其子程序“好桌道壁纸”时,往往会在桌面的鼠标右键中残留下“打开好桌道壁纸”项,下面解密通过修改注册表的方式彻 ...

  3. [转] windows下sublime2 安装破解(key可用)

    转: http://jingyan.baidu.com/article/ff4116259b057c12e48237b8.html Sublime Text 2安装汉化破解.插件包安装教程 | 浏览: ...

  4. (剑指Offer)面试题54:表示数值的字符串

    题目: 请实现一个函数用来判断字符串是否表示数值(包括整数和小数).例如,字符串"+100","5e2","-123","3.14 ...

  5. 极客Web开发资源大荟萃

    前端开发已经成为当前炙手可热的技术之一.此次我们总结的前端开发包含了相关技术和流行趋势,希望从中大家可以挖掘你们所需要的,并带给你们最有价值的帮助!原文来自:极客标签 使用代码回放来愉快地学习前端知识 ...

  6. PHP快速入门 常用配置

    1 打开php.ini-dist文件 2 查找"file_uploads",确定为On(确定服务器上的 PHP 脚本是否可以接受文件上传.) 3 查找"max_execu ...

  7. Quartz.NET——作业调度组件

    之前有个旧同事说他在项目中碰到某些功能需要使用到作业调度,于是找到了这个组件,据说相当好用,叫我有时间的话去了解一下.哈,于是小了解了一下,基本的使用算是明白了,深层次的东西就不了解了,本文简单记录一 ...

  8. 总想自己动动手系列·2·本地和外网(Liunx服务器上部署的web项目)按照自定义的报文格式进行交互(完结篇)

    一.准备工作 (1)创建一个web-project工程,部署本地可正常访问,部署在云服务上可访问. (2)理解如何在web.xml文件中配置过滤器,和创建一个自定义的过滤器. (3)懂得如何打war包 ...

  9. Redis源代码剖析和凝视(八)--- 对象系统(redisObject)

    Redis 对象系统 1. 介绍 redis中基于双端链表.简单动态字符串(sds).字典.跳跃表.整数集合.压缩列表.高速列表等等数据结构实现了一个对象系统,而且实现了5种不同的对象,每种对象都使用 ...

  10. PHP LDAP class for Active Directory

    A class for PHP to talk to Active Directory through LDAP.http://sourceforge.net/projects/adldap/