独自修行:第九天

js特效-DOM补充

4.字符串的相关操作

3根据字符返回位置

indexof

从前向后索引字符串位置(参数:索引字符串)

从前面寻找第一个符合元素的位置)找不到则返回-1

lastIndexof

从后向前索引字符串位置(参数:索引字符串)

从后面寻找第一个符合元素的位置,找不到则返回-1

4.uri编码和解码

URI( Uniform ResourceIdentifiers,通用资源标识符)进行编码,以便发送给浏览器。有效的URI中不能包含某些字符,例如空格。

而这URI编码方法就可以对URI进行编码,它们用特殊的UTF-8编码替换所有无效的字符,从而让浏览器能够接受和理解

正规的var url="http://www.itmoma. com?name=yann"

encodeURIComponent()函数可把字符串作为URI组件进行编码

decodeURIComponent()函数可把字符串作为URI组件进行解码

5.截取字符串(重点)

concat 连接字符串

slice

截取字符串(参数:1,截取位置【必须】,2终结点)

asdf. slice(2);从索引号2的位置开始截取,如果没有结束位置,则会一直截取到最后.

sdf slice(2,3);结束位置,从最左边数的个数(这里从a开始数3个)

asdf slice(-1);负号表示从右边开始往左边取,-1就是取最后一个,-2就是取最后两个的意思。

substr 截取字符串(参数:1,截取位置【必须】,2截取长度)

substring和slice用法一样

6.小数位数(了解)∥保留两位小数 后面小数会四舍五入

console.log(PI.toFixed(2));

toFixed(要保留几位小数)

7.转换大小写

toUpperCase,转换为大写(参数:无)

toLowercase,转换为小写(参数:无)

JS特效-案例巩固

0.今日主要内容

一、九官格算法

知道总的列数数是多少,历遍父元素的子元素个数有多少,用子元素的个数除以总列数(parseInt)得出当前盒子所在的行数行数,

parseInt(子元素的个数取余总列数)得出当前盒子在的列

算法分析

1利用控件的索引indexs计算出控件所在的行号和列号

2.利用列号计算出控件的lef距离

3.利用行号计算出控件的top距离

案例(重要)

Title

* {

margin: 0;

padding: 0;

list-style: none;

}

#top {

margin: 20px;

}

#bottom {

position: relative;

}

.box {

margin: 0 20px 20px 0;

background: #e8e8e8;

width: 220px;

height: 360px;

}

.box p:last-child {

font-size: 13px;

color: orangered;

}

3列

4列

5列

因为遇见你

孙怡邓伦牵手演绎刺绣奇缘

因为遇见你

孙怡邓伦牵手演绎刺绣奇缘

因为遇见你

孙怡邓伦牵手演绎刺绣奇缘

因为遇见你

孙怡邓伦牵手演绎刺绣奇缘

因为遇见你

孙怡邓伦牵手演绎刺绣奇缘

因为遇见你

孙怡邓伦牵手演绎刺绣奇缘

因为遇见你

孙怡邓伦牵手演绎刺绣奇缘

因为遇见你

孙怡邓伦牵手演绎刺绣奇缘

因为遇见你

孙怡邓伦牵手演绎刺绣奇缘

因为遇见你

孙怡邓伦牵手演绎刺绣奇缘

因为遇见你

孙怡邓伦牵手演绎刺绣奇缘

因为遇见你

孙怡邓伦牵手演绎刺绣奇缘

因为遇见你

孙怡邓伦牵手演绎刺绣奇缘

因为遇见你

孙怡邓伦牵手演绎刺绣奇缘

因为遇见你

孙怡邓伦牵手演绎刺绣奇缘

window.onload = function () {

//1.获取需要的标签

var btns = $("#top").children;

var bottom = $("#bottom");

//2.监听按钮的点击

//三列布局

btns[0].onclick = function () {

//2.1定义变量 var boxW = 220, boxH = 360, mgXY = 20, allCols = 3;

//2.2历遍

//2.2.1求出当前盒子所在的行和列

var row = parseInt(i / allCols);

var col = parseInt(i % allCols);

//2.2.2盒子的定位

var currentBox = bottom.children[i];

}

};

btns[1].onclick = function () {

//2.1定义变量

var boxW = 220, boxH = 360, mgXY = 20, allCols = 4;

//2.2历遍

//2.2.1求出当前盒子所在的行和列

var row = parseInt(i / allCols);

var col = parseInt(i % allCols);

//2.2.2盒子的定位

var currentBox = bottom.children[i];

}

};

btns[2].onclick = function () {

//2.1定义变量

var boxW = 220, boxH = 360, mgXY = 20, allCols = 5;

//2.2历遍

//2.2.1求出当前盒子所在的行和列

var row = parseInt(i / allCols);

var col = parseInt(i % allCols);

//2.2.2盒子的定位

var currentBox = bottom.children[i];

}

};

};

function $(selector) {

return typeof selector === "string" ? document.querySelector(selector) : null;

}

二、内置对象Date

1.目前js中常用的内置对象

2.日期对象Date的基本使用

2.1声明日期函数

var date= new Date();//date变量中,包含了所有日期和时间

2.2 date对象常用方法

获取日期和时间

getDate()

获取日1-31

getDay ()

获取星期0-6

getMonth ()

获取月0-11

getFullYear()

获取完整年份(浏览器都支持)

getHours()

获取小时0-23

getMinutes()

获取分钟0-59

getSeconds()

获取秒0-59

getMilliseconds()

获取毫秒 1s=1000ms

getTime()

返回累计毫秒数(从1970/1/1午夜)时间戳

三、定时器

01-定时器基础概念

在常见的网页中,有很多效果都是自己运动的,比如:轮播图,获取验证码倒计时等等

基本语法结构

window. setInterval("执行的代码串",间隔时间);

setInterval(" console.log(每隔1秒打印一次)",1000);

常见形式(区别在于代码的多少的时候,让人看得清晰)

setInterval("func()", 1000)

setInterval(func,1000);

setInterval(function(){}, 1000)

02-设置和清除定时器(重要)

开启定时器setInterval()

关闭定时器clearInterval(需要接收一个变量)

给你开启的定时器的那里定义一个变量,那么就可以控制

03-定时器鲜花表白

04-抢购倒计时

实现思路

1.统一把时间转成毫秒(ms)进行计算,会更加精准

2.用将来的时间-现在的时间=剩下的时间

3.相同代码统一封装

自定义时间

var nextTime=new Date("2018/12/31 08:00:00");

实现步骤

//天数

var d= parseInt(second /3600/24);

//小时

var h= parseInt(second /3600 %24);

//分钟

//用总的小时数%24 不超过24小时

var m= parseInt(second / 60 % 60);

//秒数

var s= second%60;

05-时钟案例

案例分析·

获取小时的时候要小心,表盘是12小时制的,要取余12,

var now=new Date();

var millS=now.getMilliseconds();

var second = now.getSeconds()+millS/1000;

var min = now.getMinutes()+second/60;

var h = now.getHours()%12+min/60;

表盘 360°

一秒钟 360°/60

分钟 360°/60

一小时 360°/12

06-防止定时器累加

先清除定时器,后设置定时器

07-一次定时器

就执行一次

也是得遵循先清后设的原则:clearTimeout

setTimeout 过了什么时候才去执行,只执行一次

08-定时器匀速动画

步长一样,速度一样

09-定时器缓动动画

缓动公式·起始值+=(结束值-起始值)*缓动系数

取余怎样计算的

取余只能整数除以整数,若除数被除数大被除数就是余数

若除数比被除数小,被除数就除以除数直到剩下的数比除数小,则这个数就是余数,而且注意余数的符号要与被除数的符号一致

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180817G1QX9Y00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券