js基础day06
一.动态创建节点
<head>
<meta charset="UTF-8">
<title>02-动态创建节点</title>
<style>
*{
margin: 0;
padding: 0;
}
#box{
position: relative;
}
#box div{
width: 100px;
height: 100px;
background-color: red;
border: 1px solid #000;
position: absolute;
}
</style>
</head>
<body>
<button id="btn1">创建节点</button>
<button id="btn2">删除节点</button>
<div id="box">
</div>
<script>
//1.获取按钮
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
//2.获取大盒子
var box = document.getElementById('box');
//3.给添加按钮添加事件
btn1.onclick = function () {
//1.创建子节点
var odiv = document.createElement('div');
//2.添加到box中
box.appendChild(odiv);
//随机颜色
var r = parseInt(Math.random() * 256);
var g = parseInt(Math.random() * 256);
var b = parseInt(Math.random() * 256);
//随机色 取值范围 0 到255
odiv.style.backgroundColor = 'rgb('+ r +', '+ g + ', '+ b +')';
//九宫格排布
//总列号
var count = 3;
//行号
var row = 0;
//列号
var col = 0;
//3.获取box所有子节点
var divList = box.children;
//4.遍历
for(var i = 0; i< divList.length ; i++){
//4.1 取出每一个子节点
var div = divList[i];
//4.2 计算行号和列号
row = parseInt(i / count);
col = i % count;
//4.3 计算小盒子x和y
//x = 列号 * (宽度 + 水平间距)
var x = col * (100 + 10);
//y = 行号* (高度 + 垂直间距);
var y = row * (100 + 10);
//4.4 设置left和top
div.style.left = x + 'px';
div.style.top = y + 'px';
}
}
//4.给删除按钮添加事件
btn2.onclick = function () {
//1.获取保存所有div数组
var btnList = box.children;
//2.获取最后一个子节点索引
var lastIndex = btnList.length - 1;
//判断最后一个子节点索引
if(lastIndex < 0){
alert('没有盒子了,请添加盒子')
return;
}
//3.取出最后一个子节点
var lastDiv= btnList[lastIndex];
//4.删除最后一个子节点
box.removeChild(lastDiv);
}
</script>
</body>
二.发微博
<head>
<meta charset="UTF-8">
<title>03-发微博-css</title>
<style>
*{
margin: 0;
padding: 0;
}
#box{
width: 600px;
border: 1px solid #000;
margin: 100px auto;
padding: 20px;
text-align: center;
}
#box textarea{
width: 400px;
height: 200px;
resize: none;
}
#box ul{
width: 400px;
list-style: none;
/*background-color: red;*/
margin-left:108px;
}
#box ul li{
text-align: left;
line-height: 30px;
border-bottom: 1px dashed #000;
}
#box ul li a{
color: black;
float: right;
text-decoration: none;
}
</style>
</head>
<body>
<div id="box">
发微博:<textarea ></textarea>
<button>发布</button>
<ul>
</ul>
</div>
<script>
var box = document.getElementById('box');
//1.获取所有子节点
var text = box.children[0];
var btn = box.children[1];
var oul = box.children[2];
//2.给按钮添加点击事件
btn.onclick = function () {
//1.创建li
var li =document.createElement('li');
//2.将li添加到ul上
// oul.appendChild(li);
oul.insertBefore(li , oul.children[0]);
//3.获取文字内容, 设置给li
//console.log(text.value);
li.innerHTML = text.value;
//4.清空文字内容
text.value = '';
//5.添加a标签
var oa = document.createElement('a');
oa.innerHTML = '删除';
//6.添加到li上
li.appendChild(oa);
//7.给a标签添加点击事件
oa.onclick = function () {
//获取a所在的li
var li = oa.parentNode;
//删除a所在的li
oul.removeChild(li); //父节点删除子节点
}
}
</script>
</body>
三.日期对象
1 获取日期对象
var myDate = new Date();
2 Date() 返回当日的时期和时间
console.log(myDate);
3 myDate.getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
4 myDate.getDay()从 Date 对象返回一周中的某一天 (0 ~ 6), 0 代表周日, 6 代表周六
5 myDate.getMonth()从 Date 对象返回月份 (0 ~ 11)。 0（一月） 11（十二月）
6 myDate.getFullYear()从 Date 对象以四位数字返回年份。
7 myDate.getHours()返回 Date 对象的小时 (0 ~ 23)。
8 myDate.getMinutes()返回 Date 对象的分钟 (0 ~ 59)。
9 myDate.getSeconds()返回 Date 对象的秒数 (0 ~ 59)。
10 myDate.getMilliseconds()返回 Date 对象的毫秒(0 ~ 999)。
11 myDate.getTime()返回 1970 年 1 月 1 日至今的毫秒数。时间戳
12 myDate.valueOf()返回 Date 对象的原始值。
四.钟表案例
<div id="clock">
<div id="hour"></div>
<div id="minute"></div>
<div id="second"></div>
</div>
<script>
//1.获取标签
var hour = document.getElementById('hour');
var minute = document.getElementById('minute');
var second = document.getElementById('second');
//2.开启定时器
function changeTime() {
//2.1 获取当前时间
var date = new Date();
//2.2 获取时分秒
var ms = date.getMilliseconds();// 获取毫秒
//毫秒转换为秒
var s = date.getSeconds() + ms/1000; //获取秒
var m = date.getMinutes();//获取分钟
//分针转换为小时,计算角度
var h = date.getHours() + m / 60; //获取小时
//console.log(h, m, s);
//2.3 让针走
//秒针每一个小格子 算1秒钟，每个格子度数 = 360 / 12 * 5 -> 6
second.style.transform = 'rotate('+ 6 * s+'deg)';
//分针每一个小格子 算1分钟，每个格子度数 = 360 / 12 * 5 -> 6
minute.style.transform = 'rotate('+ 6 * m +'deg)';
//时针每一个大格子 算1小时，每个格子度数 360 / 12 = 30
hour.style.transform = 'rotate('+ 30 * h +'deg)'
}
var timer = setInterval(changeTime, 100);
</script>
五.js对象认识
- js对象 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。
- 在 JavaScript 中，对象是拥有属性和方法的数据。
-
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔： - 注意: js对象格式 在其他语言中 为键值对 {key: value}, 这种格式也叫字典
- 注意: js对象是无序的数据集合, 对象根据属性名就能取到值
1.定义js对象
var person = {
name:'张三',
age:20,
score:99
}
2.获取js值方式
a.对象.属性名
person.name; // 输出为 张三
b.对象[属性名]
person['age']; //输出为 20
3. js属性赋值
person.name = '李四'
person['age']= 33;
4.json
- json 传输数据的格式, 本质是一个字符串
- js对象: 是以键值对的方式保存数据, 以大括号进行包括的, {key:value}
- JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。
- json 中 ，[] 是一个数组 。 {} 是一个对象
5.js和json相互转换
- js对象转换为 JSON 字符串，使用 JSON.stringify() 方法：
var json = JSON.stringify({a: 'Hello', b: 'World'});
//结果是 '{"a": "Hello", "b": "World"}'
- JSON 转换为js对象，使用 JSON.parse() 方法：
var obj = JSON.parse('{"a": "Hello", "b": "World"}');
//结果是 {a: 'Hello', b: 'World'}
六.js对象dom操作
根据js对象中数据，设置元素
<div id="box"></div>
<script>
//获取box
var box = document.getElementById('box');
//1.数据, js对象
var data = {
width:'100px',
height:'100px',
background:'red',
border:'10px solid #ccc'
};
//2.点语法设置 将数据设置到元素上
// box.style.width = data.width;
// box.style.height = data.height;
// box.style.background = data.background;
// box.style.border = data.border;
//
//3.dom值设置
// box.style['width'] = data.width;
// box.style['height'] = data.height;
// box.style['background'] = data.background;
// box.style['border'] = data.border;
//4.js对象遍历
//for...in 增强for循环
//用法：每遍历一次， 从data中取一个键值对，将键赋值给key
for(var key in data){
//1.查看key
//console.log(key, typeof key);
//2.遍历取值
//console.log(data[key]);
// 注意： data.key 使用点语法来取值，属性必需是对象里面的属性，并且这个属性不能动态修改
console.log(data.key); //key 键不是固定的
//box.style.key = data.key; //错误用法
//3.使用[] ,来取值和赋值
box.style[key] = data[key];
}
七.js对象动态加载
<div id="box"></div>
<script>
//js对象使用
//一条数据对应一个ul, 每条数据为一个js对象
var data = {
box:[
{name:'张三',age:20, sex:'男'},
{name:'李四',age:30, sex:'女'},
{name:'王五',age:40, sex:'妖'}
]
}
//1.获取box
var box = document.getElementById('box');
//2.根据键，取出数组
var arr = data.box;
console.log(arr);
//3.遍历数组，根据数组元素个数创建ul
for(var i = 0; i < arr.length; i++ ){
//1.取出一条数据
var dic = arr[i];
//2.创建ul
var oul = document.createElement('ul');
//ul添加到box
box.appendChild(oul);
//3.遍历js对象， 根据键值对个数创建li
for(var key in dic){
//3.1 创建li
var li = document.createElement('li');
oul.appendChild(li);
//3.2 设置li内容
li.innerText = key + ':'+ dic[key];
}
}
</script>
八.自定义属性方法二
1.setAttribute() 设置值
- setAttribute(name,value)
- name: 要设置的属性, 字符串类型
- value: 属性值, 字符串类型
- 没有返回值
- 注意:如果当前元素里面有这个属性, 再次设置这个属性, 会覆盖前面属性
//获取box
var box = document.getElementById('box');
var item = box.setAttribute('name', '张三');
box.setAttribute('name', '李四');
console.log(item);
2.getAttribute() 给自定义属性赋值
- 参数: 属性名
- 返回值: 获取的值
var item2 = box.getAttribute('name');
console.log(item2);
九.event对象
1.事件也是对象
-
事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。
-
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
-
事件通常与函数结合使用，函数不会在事件发生前被执行！
-
clientX返回当事件被触发时，鼠标指针的水平坐标。
-
clientY返回当事件被触发时，鼠标指针的垂直坐标。
//注意：哪个元素触发的点击事件， 获取的就是哪个元素上的点
//event对象， 只要添加事件，系统就会传递一个event对象
box.onclick = function (event) {
//alert(111);
//获取box鼠标点坐标
//event.clientX 光标在网页可视区域的x坐标
console.log(event.clientX);
//event.clientY 光标在网页可视区域的y坐标
console.log(event.clientY);
}
2.获取鼠标点坐标兼容写法
- event 兼容性 只支持 ie9+ 和 opera 火狐
- window.event 支持 ie全版本， 支持opera 谷歌 ,不支持火狐
document.onclick = function (event) {
// console.log(event.clientX);
// console.log(event.clientY);
// console.log(window.event.clientX);
// console.log(window.event.clientY);
//兼容写法
var eve = event || window.event;
console.log(eve.clientX);
console.log(eve.clientY);
}
十.offset家族
-
box.offsetWidth 获取元素自身宽度。offsetWidth = width + border*2 + padding * 2
-
box.offsetHeight 获取元素自身高度。offsetHeight = height + border*2 + padding * 2
-
注意：使用 style.width 获取元素自身宽度，该元素必需通过行内式设置，否则获取不到
-
box.offsetLeft 获取当前有定位父元素左边距离
-
box.offsetTop 获取当前有定位父元素顶部距离
-
注意：先看当前父元素有没有定位, 如果当前父元素没有定位,就往上找, 直到找到有定位父元素为止
十一.天使案例
<style>
*{
margin: 0;
padding: 0;
}
#ospan{
width: 96px;
height: 80px;
background: url("images/110.gif");
position: absolute;
left: 0;
top: 0;
}
</style>
<span id="ospan"></span>
<script>
//1.获取span
var ospan = document.getElementById('ospan');
//动画， 起始状态，结束状态
var beginX = 0;
var beginY = 0;
//动画结束坐标点
var endX = 0;
var endY = 0;
//2.添加事件
document.onmousemove = function (event) {
var eve = event || window.event;
//获取坐标点
// var x = eve.clientX;
// var y = eve.clientY;
//设置span的left和top
// ospan.style.left = x + 'px';
// ospan.style.top = y + 'px';
//获取终点坐标
endX = eve.clientX;
endY = eve.clientY;
}
//做动画，开启定时器
setInterval(function () {
//减速动画
beginX = beginX + (endX - beginX) / 10;
beginY = beginY + (endY - beginY) / 10;
//设置span的left和top
ospan.style.left = beginX + 'px';
ospan.style.top = beginY + 'px';
}, 40);
十二.鼠标移动
/*
2个不动点
点击鼠标那刻
1.鼠标点相对于文档, x , y 是不变的
2.鼠标点相对与元素的位置是不变的
拖拽 根据 鼠标点移动 ，计算 盒子left和top移动
设置left和top 就是设置是box的左上角的点
*/
//1.获取box
var box = document.getElementById('box');
//2.添加事件， 监听鼠标点击
box.onmousedown = function (event) {
//注意: 在哪使用事件对象, 就在哪获取事件对象
var eve = event || window.event;
//console.log(eve);
//鼠标点击时，计算当前点击坐标点到盒子左边的距离 = 鼠标点x坐标 - 鼠标左边距离文档的距离
var x = eve.clientX - box.offsetLeft;
//鼠标点击时，计算当前点击坐标点到盒子顶部的距离 = 鼠标点y坐标 - 鼠标顶部距离文档的距离
var y = eve.clientY - box.offsetTop;
//随着鼠标移动，获取鼠标点击在文档中的点坐标， 移动盒子
document.onmousemove = function (event) {
var eve = event || window.event;
//需求:鼠标点 和盒子中心点重合
//计算 left = x - 盒子宽度 *0.5;
//计算 top = y - 盒子高度 * 0.5;
//鼠标点是确定的， 只能移动box
// box.style.left = eve.clientX -box.offsetWidth * 0.5 + 'px';
// box.style.top = eve.clientY - box.offsetHeight *0.5 + 'px';
//console.log(eve);
box.style.left = eve.clientX - x + 'px';
box.style.top = eve.clientY - y + 'px';
}
}
//监听鼠标抬起
box.onmouseup = function () {
//清空onmousemove 事件
document.onmousemove = null;
}
十三.滚动事件
- window.onscroll 当滚动条移动就会调用这个事件
- 获取滚动距离，即往上滚出页面的距离。兼容性
- document.documentElement.scrollTop 支持ie7+ , 支持谷歌, 火狐, opera, 不支持safari
- document.body.scrollTop 支持ie7以下, safari,不支持谷歌, 火狐, opera
//兼容写法
var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
console.log(scrollT);
十四.回调函数
//需求给所有按钮添加背景颜色
//1.获取box
var box = document.getElementById('box');
//2.获取所有按钮
var btnList = box.getElementsByTagName('button');
//3.遍历，给所有按钮设置背景颜色
for(var i = 0; i < btnList.length; i++ ){
btnList[i].style.backgroundColor = 'red';
}
//1.获取box
var box = document.getElementById('box');
//2.获取所有按钮
var btnList = box.getElementsByTagName('button');
//封装设置背景色
//参数：要设置的元素
function setColor(obj) {
obj.style.backgroundColor = 'red';
}
//3.遍历，给所有按钮设置背景颜色
for(var i = 0; i < btnList.length; i++ ){
setColor(btnList[i]);
}
//1.获取box
var box = document.getElementById('box');
//2.获取所有按钮
var btnList = box.getElementsByTagName('button');
//封装设置背景色
//参数：要设置的元素
function setColor(obj) {
obj.style.backgroundColor = 'red';
}
//3.遍历，给所有按钮设置背景颜色
//封装遍历
/*
参数：btnList 遍历的元素数组
参数：fn 传入函数
*/
function each(btnList, fn) {
for(var i = 0; i < btnList.length; i++ ){
fn(btnList[i]);
}
}
each(btnList, setColor);
//1.获取box
var box = document.getElementById('box');
//2.获取所有按钮
var btnList = box.getElementsByTagName('button');
//封装设置背景色
//3.遍历，给所有按钮设置背景颜色
//封装遍历
/*
参数：btnList 遍历的元素数组
参数：fn 传入函数
*/
function each(btnList, fn) {
for(var i = 0; i < btnList.length; i++ ){
fn(btnList[i], i);
}
//console.log(fn);
}
//each(btnList, setColor);
//通过打印fn 和setColor 结果相等 ,所以验证两者等价
//console.log(setColor);
//-------------------------------------
//回调函数 该匿名函数就是回调函数数
//传入元素， 返回获取到元素和索引
each(btnList, function (obj, index) {
obj.style.backgroundColor = 'red';
//each函数外部获取函数内部的值
console.log(obj);
console.log(index);
});
网友评论