做会计需要了解的网站及软件免费推广的app有哪些
文章目录
-
- 概要
- 整体架构流程
- 技术名词解释
- 技术细节
- 小结
概要
什么是 JavaScript？
JavaScript 是一种脚本，一门编程语言，它可以在网页上实现复杂的功能，网页展现给你的不再是简单的静态信息，而是实时的内容更新，交互式的地图，2D/3D 动画，滚动播放的视频等等。JavaScript 怎能缺席。它是标准 Web 技术蛋糕的第三层，其中 HTML 和 CSS 我们已经在学习中心的其他部分进行了详细的讲解
- HTML是一种标记语言，用来结构化我们的网页内容并赋予内容含义，例如定义段落、标题和数据表，或在页面中嵌入图片和视频。
- CSS 是一种样式规则语言，可将样式应用于 HTML 内容，例如设置背景颜色和字体，在多个列中布局内容
- JavaScript是一种脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画，还有很多。（好吧，虽然它不是万能的，但可以通过简短的代码来实现神奇的功能。）
这三层依次建立，秩序井然。
整体架构流程
技术名词解释
变量是什么？
一个变量，就是一个用于存放数值的容器。这个数值可能是一个用于累加计算的数字，或者是一个句子中的字符串。变量的独特之处在于它存放的数值是可以改变的。
-
number类型的变量，在需要转换成boolean类型时， 如果值为0或者NaN，则转换成false，否则为true
-
string类型的变量，在需要转换成boolean类型时， 如果值为''空字符串，则转换成false，否则为true
-
null和undefined都会转换成false
//1.数据类型和变量let a=3console.log(typeof a)//numbera='abc'console.log(typeof a)//stringa=trueconsole.log(typeof a)//booleana=nullconsole.log(typeof a)//nullaconsole.log(typeof a)//undefinedlet bconsole.log(typeof b)//2.数据类型转换let age=undefinedif(age){console.log(1)}else{console.log(0)}数组是什么？
数组通常被描述为“像列表一样的对象”; 简单来说，数组是一个包含了多个值的对象。数组对象可以存储在变量中，并且能用和其他任何类型的值完全相同的方式处理，区别在于我们可以单独访问列表中的每个值，并使用列表执行一些有用和高效的操作，如循环 - 它对数组中的每个元素都执行相同的操作。也许我们有一系列产品和价格存储在一个数组中，我们想循环遍历所有这些产品，并将它们打印在发票上，同时将所有产品的价格统计在一起，然后将总价格打印在底部。
如果我们没有数组，我们必须将每个产品存储在一个单独的变量中，然后调用打印的代码，并为每个产品单独添加。花费的时间要长得多，效率很低，而且也容易出错。如果我们有 10 个产品需要添加发票，那就只是有点麻烦而已，但是 100 个，或者 1000 个呢？
//1.简单数组let arr1=[1,2.5,'a',true,null,undefined,null];console.log(arr1.length)//2.复杂的数组let arr2=[{id:1,name:'曹操',age:40},{id:2,name:'刘备',age:41},{id:3,name:'孙权',age:42},]什么是函数？
在 JavaScript 中另一个基本概念是函数, 它允许你在一个代码块中存储一段用于处理单任务的代码，然后在任何你需要的时候用一个简短的命令来调用，而不是把相同的代码写很多次。在本文中，我们将探索函数的基本概念，如基本语法、如何定义和调用、范围和参数。
函数的定义
您在过去的课程中还看到很多定制功能 - 在代码中定义的功能，而不是在浏览器中。每当您看到一个自定义名称后面都带有括号，那么您使用的是自定义函数。
//函数的2种常用的定义方式function f1(){console.log('f1函数')}let f2=function(){console.log('f2函数')}console.log(arr1)console.log(arr2)//3.数组的遍历arr2.forEach(function(e,i){console.log(e,i)})//简化为 箭头函数的表现形式arr2.forEach((e,i)=>{console.log(e,i)})//4.数组的筛选,原数组不会被改变，筛选出来的结果返回到新数组中let arr3 = arr2.filter((e,i)=>{return e.age<42})console.log(arr3)JS-dom操作
事件是发生在你正在编程的系统中的事情——当事件发生时，系统产生（或“触发”）某种信号，并提供一种机制，当事件发生时，可以自动采取某种行动（即运行一些代码）。事件是在浏览器窗口内触发的，并倾向于附加到驻留在其中的特定项目。这可能是一个单一的元素，一组元素，当前标签中加载的 HTML 文档，或整个浏览器窗口。有许多不同类型的事件可以发生。
<p>
什么是dom操作？和html进行交互<br>
1.获取html标签，返回一个元素对象<br>
2.设置值<br>
</p>
<input id="input1" type="text" value="aa">
<ul id="ul1">
<li>1-a-12</li>
<li>2-b-13</li>
<li>3-c-14</li>
</ul>
<button οnclick="changeText()">替换按钮</button>
<ul>
<li>onclick属性表示一个点击事件属性</li>
<li>onclick属性值是一个函数名称()</li>
<li>表示一旦点击该按钮，就调用这个函数</li>
</ul>
JS代码：
//1.单个的设置
//1.1获取
let input1=document.getElementById('input1')
//1.2设置值
input1.value='曹操'
//2.批量的设置
let arr2=[
{id:1,name:'曹操',age:40},
{id:2,name:'刘备',age:41},
{id:3,name:'孙权',age:42},
]
//2.1获取ul
let ul1=document.getElementById('ul1')
function changeText(){
//2.2替换
let s=''
arr2.forEach((e)=>{
s+=`<li>${e.id}-${e.name}-${e.age}</li>`
})
ul1.innerHTML=s
}
技术细节
炫酷的js动画：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>心动的感觉</title><style>/* 定义动画 */@keyframes jump{from{transform: scale(0.5);opacity: 0.5;}to{transform: scale(2.0);opacity: 1;}}/* 定义一个iou旋转动画 */@keyframes circles{from{transform: rotate(0deg);z-index: 1;}to{transform: rotate(360deg);/*z-index: -1;*/}}.f{width: 170px;height: 160px;/* border: 1px solid rebeccapurple; */position: relative;left: 200px;top: 200px;/* 给父元素绑定动画 *//* animation: jump 1s ease alternate infinite; */}.m{animation: jump 1s ease infinite alternate; }.f>div{position: absolute;}/* 两个圆 */.z1,.z2{width: 100px;height: 100px;border-radius: 50%;background-color: red;}.z2{left: 70px;}.z3{width: 100px;height: 100px;background-color: red;left: 35px;top: 35px;transform: rotate(45deg);}.z4{top: 50px;left: 50px;font-size: large;color: aliceblue;z-index: -1;}.z4c{animation: circles 1s linear 0.5s infinite alternate;}button{width: 80px;height: 40px;background-color: rgb(39, 141, 39);border: none;color: white;font-size: large;border-radius: 10px;cursor: pointer;box-shadow: 0 8px 5px gray;margin-left: 20px;}button:active{transform: translate(5px,5px);}</style>
</head>
<body><button onclick="start1()">开始</button><button onclick="stop1()">停止</button><div id="divF" class="f"><div class="z1"></div><div class="z2"></div><div class="z3"></div><div id="z4" class="z4">I o u</div></div>
</body>
<script>//1.获取let divF=document.getElementById('divF')let z4=document.getElementById('z4')function start1(){//2.设值（不能使用关键字class）divF.className='f m'z4.className='z4 z4c'}function stop1(){//2.设值（不能使用关键字class）divF.className='f'z4.className='z4'}
</script>
</html>强盛集团实现薪资翻倍功能：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>强盛集团</title><style>button{width: 100px;height: 40px;border: none;outline: none;color: white;border-radius: 8px;font-size: large;color: seashell;cursor: pointer;margin-left: 40px;}.fb>button:nth-child(1){background-color: rebeccapurple;}.fb>button:nth-child(2){background-color: goldenrod;}.fb>button:nth-child(3){background-color: green;}.fb>button:nth-child(4){background-color: rgb(11, 171, 235);}/* 鼠标放上去，有个阴影 */button:hover{box-shadow: 10px 10px 10px rebeccapurple;}/* 鼠标点击，动一动 */button:active{transform: translate(5px,5px);}/* tbody中的每一个tr隔行变色 */tbody>tr:nth-child(odd){background-color: skyblue;}tbody>tr:nth-child(even){background-color: rgb(240, 194, 78);}</style>
</head>
<body><h1 style="text-align: center;">强盛集团员工薪资表</h1><h2 style="text-align: center;">风浪越大，鱼越贵</h2><div class="fb" style="text-align: center;"><button onclick="changeText()">生成表格</button><button onclick="doubleMoney()">薪资翻倍</button><button onclick="restEmp()">退休人员</button><button onclick="sumMoney()">薪资总数</button>
</div><table style="margin-top: 30px;" align="center" border="1" cellspacing="0" cellpadding="20"><thead><tr><th><a href="javascript:orderEmp('id')">序号</a></th><th><m>姓名</m></th><th><a href="javascript:orderEmp('age')">年龄</a></th><th><a href="javascript:orderEmp('money')">薪资</a></th></tr></thead><tbody id="td1"><tr bgcolor="lightskyblue"><td>1</td><td>高启强</td><td>36</td><td>2000000</td></tr></tbody><tfoot id="tfoot"><tr style="text-align: center; color:rgb(255,255,0);"><td colspan="4">薪资总数:</td></tr></tfoot></table>
</body>
<script>let arr2=[{id:1,name:'高启强',age:36,money:300},{id:2,name:'高启盛',age:30,money:200},{id:3,name:'唐小龙',age:34,money:100},{id:4,name:'唐小虎',age:32,money:50},{id:5,name:'陈泰',age:66,money:30},{id:6,name:'老默',age:40,money:10},]//2.1获取td1元素let td1=document.getElementById('td1')let tfoot=document.getElementById('tfoot')function changeText(){//2.2替换//调用函数createTab(arr2)}//重复出现的代码，封装成一个函数,把某个数组中的数据放在tbody中function createTab(arr){let s=''arr.forEach((e)=>{s+=`<tr><td>${e.id}</td><td>${e.name}</td><td>${e.age}</td><td>${e.money}</td></tr>`})td1.innerHTML=s}let newEmps;function doubleMoney(){//薪资翻倍后，返回一个新的数组newEmps=arr2.map((e)=>{e.money*=2return e;})//调用函数createTab(newEmps)}//退休功能function restEmp(){let newEmps=arr2.filter((e)=>{return e.age>65})//调用函数createTab(newEmps)}//薪资求和function sumMoney(){let moneySumif(newEmps){//alert('对翻倍后的数组求和')moneySum=newEmps.reduce((sum,e)=>{return sum+e.money},0)}else{//alert('对原数组求和')moneySum=arr2.reduce((sum,e)=>{return sum+e.money},0)}tfoot.innerHTML=`<tr style="text-align: center; color:rgb(255,255,0);"><td colspan="4">薪资总数:${moneySum}</td></tr>`}//排序let a = truefunction orderEmp(type){a=!a//每调用一次，a取反let newEmps2switch(type){case 'id':console.log('根据id排序')newEmps2=arr2.sort((e1,e2)=>{return a? e2.id-e1.id : e1.id-e2.id})break;case 'age':console.log('根据age排序')newEmps2=arr2.sort((e1,e2)=>{return a? e2.age-e1.age : e1.age-e2.age})break;case 'money':console.log('根据money排序')newEmps2=arr2.sort((e1,e2)=>{return a? e2.money-e1.money : e1.money-e2.money})break;}//调用生成tbody的函数createTab(newEmps2)}
</script>
</html>js炫酷走马灯：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>走马灯</title><style>.f{width: 800px;height: 100px;border-top: 1px solid rebeccapurple;}.f>div{width: 60px;height: 40px;background-color: white;border-radius: 50%;float: left;margin-left: 20px;}@keyframes changeColor{0%{background-color: rgb(236, 65, 65);}20%{background-color: rgb(235, 176, 68);}40%{background-color: rgb(28, 148, 28);}60%{background-color: rgb(35, 35, 165);}80%{background-color: rebeccapurple;}100%{background-color: pink;}}.f>div:nth-child(1){animation: changeColor 3s ease 0s infinite;}.f>div:nth-child(2){animation: changeColor 3s ease 1s infinite;}.f>div:nth-child(3){animation: changeColor 3s ease 2s infinite;}.f>div:nth-child(4){animation: changeColor 3s ease 3s infinite;}.f>div:nth-child(5){animation: changeColor 3s ease 4s infinite;}.f>div:nth-child(6){animation: changeColor 3s ease 5s infinite;}.f>div:nth-child(7){animation: changeColor 3s ease 6s infinite;}.f>div:nth-child(8){animation: changeColor 3s ease 7s infinite;}.f>div:nth-child(9){animation: changeColor 3s ease 8s infinite;}.f>div:nth-child(10){animation: changeColor 3s ease 9s infinite;}</style>
</head>
<body id="body"><form action="" method=""><button onclick="generate">生成</button><input type="text" name="submit1" value=" ">行</form><div class="f"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
</body>
<script>// function generate(){// }// 1.获取let body=document.getElementById('body')let s=''for(let i=0;i<10;i++){s+=`<div class="f"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>`}body.innerHTML=s
</script>
</html>效果图：
小结
本节小课堂我们对js核心课程进行了学习，有数据类型转换，变量，简单数组和复杂数组，函数的两种定义方式，js-dom操作，并且通过四个有趣的小项目加以巩固所学到的知识点，这些绚丽的js前端动画特效让我眼前一亮，核心代码也通俗易懂。希望上述内容能带给你们帮助，有需求或者想要讨论前端内容的可以评论或者私信我。看到这里的小伙伴点个赞吧！我们一起学习打卡哟！