JavaScript底子学习
1.一元运算符正负号，自增运算符
2.比力运算符
判断相称用===
字符串比力，比力的是ASC码
只管不要比力小数，小数有精度
不同范例比力会有隐式转换
3.运算符优先级
https://i-blog.csdnimg.cn/direct/d3a84bc77f484046abdbd0d1d3238bda.png
4.分支语句
除了0，其余数字都是真。除了空字符串，其余字符串都是真。
案例：简易ATM取款机
<body>
<script>
let money = 100
while (true) {
let re = prompt(`
请选择要进行的操作
1.存钱
2.取钱
3.查看余额
4.退出
`)//这里需要用反引号，才能多行输出
if (re === '4') {
break;
}
switch (re) {
case '1':
let save = +prompt('请输入存钱金额')
money = money + save
break;
case '2':
let out = +prompt('请输入取钱金额')
money = money - out
break;
case '3':
alert(`账户余额还有${money}元`)
break
default:
alert('输入的不对')
break
}
}
</script>
</body>
案例：乘法表
<head>
<meta charset="utf-8">
<title>练习</title>
<style>
span{
display:inline-block;
padding: 3px;
border: 1px solid pink;
margin: 3px;
width: 100px;
box-shadow: 2px 2px 2px rgba(255,192,203,.2);
border-radius: 2px;
}
</style>
</head>
<body>
<script>
for(i=1;i<=9;i++){
for(j=1;j<=i;j++){
document.write(`<span>${j}×${i}=${j*i}</span>`)
}
document.write(`<br>`)
}
</script>
</body>
</html> undifined加上任何数都是NAN
5.数组
5.1新增
数组.push（） 方法将一个或多个元素添加到数组末尾，并返回该数组新长度
arr.unshift（新增内容） 在数组开头添加 ，返回数组新长度
5.2删除
arr.pop（）删除末了一个元素，并返回该元素的值
arr.splice（start，deleteCount） 起始位置和删除几个元素 常用
arr.shift（）不带参数，删除开头一个元素，返回是删除元素
案例 渲染柱形图
<head>
<meta charset="utf-8">
<title>练习</title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
height: 300px;
width: 700px;
display: flex;
border-left: 1px solid pink;
border-bottom: 1px solid pink;
margin: 50px auto;
align-items: flex-end;
justify-content: space-around;
}
/*只会选取那些直接嵌套在.box元素内部的<div>元素，而不会选择那些嵌套在更深层级的<div>元素*/
.box>div {
display: flex;
width: 50px;
background-color: pink;
flex-direction: column;
/* 主轴是垂直方向 */
justify-content: space-between;
/* 两端的 flex 项紧贴容器的边缘，而中间的 flex 项之间有相等的空间 */
}
.box div span {
margin-top: -20px;
text-align: center;
}
.box div h4 {
margin-bottom: -30px;
width: 70px;
margin-left: -5px;
}
</style>
</head>
<body>
<script>
let arr = []
for (let i = 0; i < 4; i++) {
arr.push(prompt(`请输入第${i + 1}季度数额`))
}
document.write(`<div class="box">`)
for (i = 0; i < arr.length; i++) {
document.write(`
<div style="height: ${arr}px;">
<span> ${arr} </span>
<h4>第${i + 1}季度</h4>
</div>
`)
}
document.write(`</div>`)
</script>
</body>
</html> 案例 冒泡排序
<body>
<script>
/* 冒泡排序 */
let arr =
for (let i = 0; i < arr.length - 1; i++) {
for (let j = 0; j < arr.length - i - 1; j++) {
if (arr > arr) {
let temp = arr
arr = arr
arr = temp
}
}
}
document.write(arr)
</script>
</body> 开辟中直接 arr.sort()进行排序 升序
arr.sort(function (a, b) {
return a - b
}) 升序排序
降序b-a
6.立刻实行函数
防止变量污染，很常用
(function(){
console.log(11)
})()；需要加分号了
7.逻辑中断
&&一假则假，都是真，返回末了一个真值
|| 一真则真 ，左边真，右边不实行
https://i-blog.csdnimg.cn/direct/35efc3f30c6747eca9fda6fadbfe7418.png
‘’-2=-2 空字符串当0看
undifined+3=NAN undifined作任何操作都是NAN
8.对象
遍历对象用 for（let k in obj）{} ，得到对象属性是k（字符串形式），得到对象的值是obj【k】
案例：渲染表格
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>练习</title>
<style>
table {
text-align: center;
width: 600px;
}
table,
th,
td {
border: 1px solid #ccc;
border-collapse: collapse;
}
caption {
font-size: 20px;
font-weight: 700;
margin-bottom: 10px;
}
tr {
height: 20px;
cursor: pointer;
}
table tr:nth-child(1) {
background-color: #ddd;
}
table tr:not(:first-child):hover {
background-color: #eee;
}
</style>
</head>
<body>
<h2>学生信息</h2>
<p>将数据渲染到页面中</p>
<table>
<caption>学生列表</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>家乡</th>
</tr>
<script>
let student = [
{ name: '小明', age: 18, gender: '男', hometown: '河北省' },
{ name: '小红', age: 16, gender: '女', hometown: '河南省' },
{ name: '小刚', age: 17, gender: '男', hometown: '山西省' },
{ name: '小丽', age: 15, gender: '女', hometown: '山东省' }
]
for (let i = 0; i < student.length; i++) {
document.write(`
<tr>
<td>${i+1}</td>
<td>${student.name}</td>
<td>${student.age}</td>
<td>${student.gender}</td>
<td>${student.hometown}</td>
</tr>
`)
}
</script>
</table>
</body>
</html> 9.内置对象
js内部提供的对象，包含各种属性和方法
Math： Math.ceil（1.2）向上取整 ，math.floor（）向下取整，math.round（）四舍五入
math.max（1,4,9）取最大值 ，math.random（） 0-1随机数 包罗0不包罗1，math.pow（2,3）2的3次方
null 是空对象
<script>
let arr=['赵云','黄忠','关羽']
let random=Math.floor(Math.random()*arr.length)
document.write(arr)
arr.splice(random,1)
document.write(`<br>`)
document.write(arr)
</script> 案例 猜数字
<script>
function getRandom(M, N) {
return Math.floor(Math.random() * (N - M + 1) + M)
}
let ran = getRandom(1, 10)
while (true) {
let num = +prompt('输入一个数字')
if (num > ran) {
alert('猜大了')
} else if (num < ran) {
alert('猜小了')
} else {
alert('猜对了')
break
}
}
</script> 案例 随机颜色
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>练习</title>
<style>
div{
height: 200px;
width: 300px;
}
</style>
</head>
<body>
<div></div>
<script>
function getRandomColor(flag=true){
if(flag){
let str='#'
let arr=['0','1','2','3','4','5','6','7','8','9','a',
'b','c','d','e','f'
]
for(let i=0;i<6;i++){
let data=Math.floor(Math.random()*arr.length)
str+=arr
}
return str
}else{
let r=Math.floor(Math.random()*256)
let g=Math.floor(Math.random()*256)
let b=Math.floor(Math.random()*256)
return `rgb(${r},${g},${b})`
}
}
const div=document.querySelector('div')
div.style.backgroundColor=getRandomColor()
</script>
</body>
</html> 案例 渲染学习案例
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>练习</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div class="box w">
<div class="box-hd">
<h4>精品推荐</h4>
<a href="#">查看更多</a>
</div>
<div class="box-bd">
<ul class="clearfix">
<script>
let data = [
{
src: 'JavaScript基础笔记和作业/JavaScript基础第五天/06-素材/综合作业素材/images/course01.png',
title: 'Think PHP 5.0 博客系统实战项目演练',
num: 1125
},
{
src: 'JavaScript基础笔记和作业/JavaScript基础第五天/06-素材/综合作业素材/images/course02.png',
title: 'Android 网络动态图片加载实战',
num: 357
},
{
src: 'JavaScript基础笔记和作业/JavaScript基础第五天/06-素材/综合作业素材/images/course03.png',
title: 'Angular2 大前端商城实战项目演练',
num: 22250
},
{
src: 'JavaScript基础笔记和作业/JavaScript基础第五天/06-素材/综合作业素材/images/course04.png',
title: 'Android APP 实战项目演练',
num: 389
},
{
src: 'JavaScript基础笔记和作业/JavaScript基础第五天/06-素材/综合作业素材/images/course05.png',
title: 'UGUI 源码深度分析案例',
num: 124
},
{
src: 'JavaScript基础笔记和作业/JavaScript基础第五天/06-素材/综合作业素材/images/course06.png',
title: 'Kami2 首页界面切换效果实战演练',
num: 432
},
{
src: 'JavaScript基础笔记和作业/JavaScript基础第五天/06-素材/综合作业素材/images/course07.png',
title: 'UNITY 从入门到精通实战案例',
num: 888
},
{
src: 'JavaScript基础笔记和作业/JavaScript基础第五天/06-素材/综合作业素材/images/course08.png',
title: 'Cocos 深度学习你不会错过的实战',
num: 590
}
]
for (let i = 0; i < data.length; i++) {
document.write(`
<li>
<a href="#">
<img src="${data.src}"" title="${data.title}">
<h4>${data.title}</h4>
<div class="info">
<span>高级</span> • <span>${data.num}</span>人在学习
</div>
</a>
</li>
`)
}
</script>
</ul>
</div>
</div>
</body>
</html> * {
margin: 0;
padding: 0;
}
body {
background-color: #f3f5f7;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
.w {
width: 1200px;
margin: auto;
}
.box {
margin-top: 30px;
}
.box-hd {
height: 40px;
}
.box-hd h4 {
font-size: 20px;
float: left;
color: #494949;
}
.box-hd a {
float: right;
color: #a5a5a5;
font-size: 12px;
margin-top: 10px;
margin-right: 30px;
}
.box-bd ul {
width: 1225px;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.box-bd ul li {
position: relative;
float: left;
width: 228px;
height: 270px;
margin-right: 15px;
margin-bottom: 15px;
background-color: #fff;
transition: all .3s;
}
.box-bd ul li a {
display: block;
}
.box-bd ul li:hover {
top: -8px;
box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .1);
}
.box-bd ul li img {
width: 100%;
}
.box-bd ul li h4 {
margin: 20px 20px 20px 25px;
font-size: 14px;
font-weight: 400;
color: #050505;
}
.box-bd .info {
font-size: 12px;
color: #999;
margin: 0 20px 0 25px;
}
.box-bd .info span {
color: #ff7c2d;
} https://i-blog.csdnimg.cn/direct/6c6fcefd0b274457bebc76fdbcd4bec8.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]