文章目录
js算法题
1、求和计算器
用prompt和alert制作一个求两个数和的计算器？
<script>
// 创建两个变量来存放输入的值，输入的值默认是字符串类型，需要先转换为数字类型
var a=Number(prompt('请输入第一个值'));
var b=Number(prompt('请输入第二个值'));
// 两个数值求和
var sum=a+b;
// 弹出结果
alert('数值'+a+'与数值'+b+'的结果是'+ sum);
</script>
2、求π（莱布尼茨公式）
根据用户输入的值计算相应精度的π？
- 累加器作为总和
- 累乘器作为每一块的元素结果
<script>
// 根据用户输入的值，根据莱布尼茨计算公式计算π
var n=Number(prompt("请输入一个值"));
// 存放值的和，因为公式第一项是1，所以先加1
var sum=1;
// 存放每一项的值
var item=1;
for(var i=1;i<n;i++){
// 每一项都是前边项的基础上再乘以一个i/(2i+1),item就是当前项的结果
item*=(i/(2*i+1));
// 用sum值加上每一项乘机的结果
sum+=item;
}
// 莱布尼茨计算的是2分之π，所以结果要乘以2才得到的是π
alert(sum*2);
</script>
3.喇叭花数
<script>
// 喇叭花数：一个三位整数，各位数阶乘的和等于这个三位数： abc=a!+b!+c!
// 首先定义求阶乘的函数
function factorial(n) {
for(var i=1,result=1;i<=n;i++){
result*=i;
}
return result;
}
// 遍历所有三位数判断它是否为喇叭花数
for(var i=100;i<=999;i++){
// 将三位数拆分
var str=String(i);
a=str[0];
b=str[1];
c=str[2];
if(factorial(a)+factorial(b)+factorial(c)==i){
console.log(i+"是蝴蝶数");
}
}
</script>
4.递归
4.1用递归求n的阶乘
<!-- 用递归求4的阶乘 -->
<script>
function digui(n){
if(n==1) return 1;
return n*(digui(n-1));
}
alert(digui(5));
</script>
4.2递归求1-100的和
<script>
// 求1-100的和
function fun(n){
if(n==1) return 1;
return n+fun(n-1);
}
alert(fun(100));
</script>
4.3菲波那切数列
<script>
// 求斐波那契数列第n项的值：从第三项开始，每一项等于前两项的和
function fib(n){
if(n==0||n==1) return 1;
return fib(n-1)+fib(n-2);
}
for(i=0;i<10;i++){
console.log(fib(i));
}
</script>
4.4工资涨幅
<script>
//小慕入职新公司，月薪一万元。工资每年涨幅5%。计算出小慕工作20年后，月薪为少
var n=20;
var t=0.05;
function fun(n){
if(n==1) return 10000;
return fun(n-1)*0.05+fun(n-1);
}
console.log(fun(20));
</script>
4.5如何实现深克隆
<script>
// 实现深克隆
// 定义一个多维数组
var array = [1, 2, 3, 5, 6, 8[26, 32, [55, 25]]];
function deepClone(arr) {
// 在函数内定义结果，为的是每一次调用时都会有一个初始result
var result = [];
for (var i = 0; i < arr.length; i++) {
//判断这个数据项是不是一个更深层次的数组,如果是，就再一次调用克隆
if (Array.isArray(arr[i])){
// 数组深度总有一个结尾，当调用到最后一组，则所有的数据项都不是数组了，就可以将数据项push到新数组中了，这样一层一层往回返
result.push(deepClone(arr[i]));
}else{
// 如果不是数组，则直接输入到新数组中
result.push(arr[i]);
}
}
// 将浅克隆的结果返回给它的调用官方
return result;
}
var deep=deepClone(array);
console.log(deep);
console.log(array);
console.log(deep==array);//false
//深克隆成功
</script>
5.对象问题
1.输出执行结果？
- obj.name寻找的是name属性名的值
- obj[name]寻找的是name变量名的值
<script>
var obj={
name:"lili",
age:18
}
var name="zhufeng";
console.log(obj.name);//"lili"
console.log(obj["name"]);//"lili"
console.log(obj[name]);//obj["zhufeng"]====>undefined
console.log(obj[job]);//obj[找不到job这个变量]====>报错：job is not defined
</script>
2.引用数据类型改变指向地址问题？
<script>
var a = 12;
var b = a;//b和a是基本数据类型，所以b克隆a的值
console.log(b);//12
var obj1 = { "name": "lili", "age": 12 };
var obj2 = obj1;//obj1和obj2是引用数据类型，所以obj1将数据地址传给obj2
obj2.age = 18;//obj2修改堆空间中的值，obj1也会看到obj2的修改的值
console.log(obj1.age);//18
obj2={};//让obj2又执行了另一个数据空间，所以obj2断掉对原来数据地址的引用，从新指向新地址
console.log(obj1.age);//18,obj1仍然指向原地址
</script>
3.对象内存创建顺序问题？
<script>
var obj = {
n: 10,
b: obj.n * 10//由于这里obj的值还没有创建成功，所以报错，obj未定义undefined
}
console.log(obj.b);
</script>
6.全局与局部变量
1.考察局部变量的声明提升？
<script>
// 局部变量，变量的声明提升
var a=10;//这是全局变量
function fun(){
a++;//只要函数中有定义该变量，即使先调用再定义的，它就不会用全局变量，而是使用声明提升的局部变量，所以a的值是undefined,a++的值是NaN
var a=5;//a的值由NaN转为5
console.log(a);//5
}
console.log(a);//10,全局变量不受局部变量的变化影响
</script>
2.考察形参变量的作用域
<script>
var a=123;
var b=22;
function fun(a){
document.write(a);//undefined,因为调用参数传没有传入值，则默认为undefined值
a=34;
document.write(b);//22,因为没有形参b，所以会向上寻找定义了的b.
}
fun();
document.write(a);//这是函数外边，寻找全局变量
</script>
7.BAT
1.判断输出结果？
typeof []//"object"
typeof typeof []//"string"
2.判断输出结果？
var num=parseInt("px35.5");//num=NaN
if(num==35.5){//不成立
alert(0)
}else if(num==35){//不成立
alert(1)
}else if(num==NaN){//NaN不自等（坑）
alert(3)
}else if(typeof num=='number'){//成立，NaN也是number类型
alert(4)//输出4
}else{
alert(5)
}
3.1.阿里xue案题
-
访问执行优先级高于赋值
a.x=a={ n:2; } a.x是访问对象属性 a是对象 所以先给a.x赋值，给a赋值<script> let a = { n: 1 } let b = a; a.x = a = { n: 2 } console.log(a.x);//undefined console.log(b);//{n:2,x:地址值} </script>
8.闭包
8.1闭包的记忆性案例？
<script>
// 闭包实例：测量体温标准，A校区不能超过37.3度，B校区不能超过37.0度
// 外边这层函数，就是闭包封锁的函数，传入的形参biaozhun就是会被记忆的值
function creatTemp(biaozhun){
//定义局部函数，在调用闭包时传入的值是给这个函数传值
function Temp(n){
//
if(n>biaozhun){
alert("你的温度过高");
}else{
alert("你的温度正常");
}
}
return Temp;//注意，返回的是函数名，不是Temp()调用函数
}
// 定义完函数之后，需要换一个地方执行，给creatTemp一个标准值
// 定义A小区的的标准体温为37.3，闭包之后只要调用Temp_A函数就可以以37.3为标准
var Temp_A=creatTemp(37.3);
Temp_A(37.2);//温度正常
Temp_A(37.6);//温度过高
// 定义B小区的标准体温为37.0，闭包之后只要调用Temp_B函数就可以以37.0为标准
var Temp_B=creatTemp(37.0);
Temp_B(37.3);//温度过高
Temp_B(36.9);//温度正常
</script>
8.2闭包的模拟私有变量？
- 核心要素是封装，不能直接获取函数中的私有变量，想要对私有变量进行操作，需要先定义相应的函数，否则操作不了。
//题目：定义一个变量a,要求是能保证这个a只能被进行指定操作（如加1、乘2），而不能进行其他操作。
<script>
function fun(){
//a是局部变量，所以，函数外是无法访问到a的
var a=0;
//我们想要获取a，就可以定义一个对象，再在外部通过闭包的方式获取它
return {
// 获取a的值属性名是我们需要调用的函数名，属性值是函数表达式（匿名函数）
getA:function(){
return a;
},
// 另a+1
add:function(){
a++;
},
pow: function(){
a*=2;
}
}
}
// 在外面将外层函数进行闭包
var obj=fun();
// 这时obj就可以使用fun函数中定义的对象属性了
obj.getA();//0
obj.add();//a+1
obj.pow();//a*2
</script>
8.3生成多个闭包时的运算结果？
<script>
function fun(){
var count=0;
return function(){
count=count+1;
console.log(count);
};
}
// 定义了两个闭包，他们两个互不关联，都获得了fun的初始值
var fun1=fun();//定义一个新的fun闭包
var fun2=fun();//定义一个新的fun闭包
fun1();//1
fun2();//1,因为他们两个互不关联，所以上面的count+1与fun2中的count无关
fun2();//2,
fun1()//2
</script>
9.js实现鼠标划过变色
1.js实现交叉颜色，并且鼠标划上变色？
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
#lists {
width: 500px;
height: 500px;
margin: 0 auto;
border: 1px solid #333;
display: flex;
flex-direction: column;
align-items: stretch;
}
li {
flex: 1;
}
</style>
</head>
<body>
<ul id="lists">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</body>
</html>
<script>
var ols = document.getElementById("lists");
var lis = ols.querySelectorAll("#lists>li");
function color() {
for (i = 0; i < lis.length; i++) {
if (i % 2 == 0) {
lis[i].style.background = "red";
} else {
lis[i].style.background = "green";
}
lis[i].onmouseover = function () {
this.oldColor=this.style.backgroundColor;
this.style.background = "pink";
};
lis[i].onmouseout = function () {
this.style.background = this.oldColor;
}
}
};
color();
</script>
10.节点
10.1节点创建一个20行13列的表格
<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>Document</title>
<style>
td {
width: 5px;
height: 5px;
border: 1px solid #333;
}
</style>
</head>
<body>
<table id="tb" class="tab"></table>
<script>
// 获取到table节点
var otb = document.getElementById("tb");
//挂载到table节点
for (i = 0; i < 20; i++) {
//创建孤儿节点tr
var otr = document.createElement("tr");
for (j = 0; j < 13; j++) {
// 创建孤儿节点td
var otd = document.createElement("td");
otr.appendChild(otd);
}
otb.appendChild(otr);
}
</script>
</body>
11.事件
11.1文本域只能输入30个字符，动态提示用户剩余输入字符个数
<!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>Document</title>
</head>
<body>
<p>字数限制在30字内,<span>您还可以输入<b>30</b>字</span></p>
<textarea id="text" cols="50" rows="70"></textarea>
<script>
// 文本域标签
var otext=document.getElementById("text");
//span标签
var ospan=document.querySelector("span");
otext.onkeyup=function(){
var content=otext.value;
var count=content.length;
if(count<=30){
var remain=30-count;
ospan.innerHTML="您还可以输入<b>"+remain+"</b>字";
}
else{
var remain=count-30;
ospan.innerHTML="您已经超出了<b>"+remain+"</b>字";
}
}
</script>
</body>
</html>
11.2实现下拉框动态改变div的背景颜色
<body>
<span>请选择你喜欢的颜色</span>
<select name="" id="color">
<option value="0">请选择</option>
<option value="yellow">黄色</option>
<option value="orange">橙色</option>
<option value="pink">粉色</option>
<option value="blue">蓝色</option>
</select>
<div id="div">我是div</div>
<script>
var oselect=document.getElementById('color');
var ooptions=oselect.querySelectorAll("option");
var odiv=document.getElementById("div");
oselect.onchange=function(){
var col=oselect.value;
if(col==0){
odiv.innerText="我没有发生任何变化";
odiv.style.background="white";
}else{
odiv.innerText="我是div";
odiv.style.background=col;
}
}
</script>
</body>
12.数组去重
1.数组去重？
- 数组去重有三种方式：
- 各数组项一一向后对比
- 借用对象辅助判断去重
- 借用新数组放不重复数据
方式一：数组从左往右挑出每一个值，与后面的项一一对比
<script>
// 思路：数组从左往右挑出每一个值，与后面的项一一对比，如果相同，就删除掉后面重复的数据项
// ary.length-1:是因为数组最后一项后面没有值了，所以这一项不需要比较了
// j=i+1:这是因为第i向只需要从它后面一项开始一一比较，它本身以及前面的项不需要比较了
// j--：是因为删除这一项后，后面的每一项会向前移，填补这一项，所以减一来继续监测这个索引的数据值
function rem(ary){
for(var i=0;i<ary.length-1;i++){
// 获取数组的第i项数据项
var item=ary[i];
//再次遍历，这次是遍历第i项后面的所有项
for(var j=i+1;j<ary.length;j++){
if(ary[j]==item){
// 删除后面重复的那一项
ary.splice(j,1);
// 放置数组塌陷
j--;
}
}
}
// 一定记得要返回,否则外边获取的值就是undefined
return arr;
}
var arr=[1,2,3,5,2,4];
alert(rem(arr));
</script>
方式二：使用对象存储已经存在的数组数据项，对象的属性名和属性值都是数组某个数据项的数据值，如果对象中存在这个属性名，则代表数组中已经存在这个数据值了，后面在出现这个数据值，则是重复的值，就可以删除
<script>
// 思路：使用对象存储已经存在的数组数据项，对象的属性名和属性值都是数组某个数据项的数据值，如果对象中存在这个属性名，则代表数组中已经存在这个数据值了，后面在出现这个数据值，则是重复的值，就可以删除
function unique(arr){
// 对象是辅助判断作用，只接收数组中第一次出现的数据项，添加到对象 属性名:属性值都是数据项的值
var obj={};
for(var i=0;i<arr.length;i++){
if(obj[arr[i]]==arr[i]){
// 走到这里说明数组中已经出现过这个值了，所以需要删除掉
arr.splice(i,1);
i--;
}
// 走到这里说明该数据项值在数组中第一次出现，添加到对象中
obj[arr[i]]=arr[i];
}
return arr;
}
var arr=[1,5,6,5,5,7,8];
console.log(unique(arr));
</script>
方式三：使用新数组接收不重复数据项
<body>
<script>
//方式三：使用新数组接收不重复数据项
var arr = [7, 2, 4, 5, 6, 2, 3, 2, 1];
// 创建新数组，用来存放不重复的值
function unique(arr) {
var newArr = [];
for (var i = 0; i < arr.length; i++) {
// 判断是否重复，如果不重复
if (!newArr.includes(arr[i])) {
newArr.push(arr[i]);
i--;
}
}
// 一定要返回
return newArr;
}
alert(unique(arr));
</script>
13.排序
1.冒泡排序实现？
<!-- 冒泡排序 -->
/*
冒泡排序：
目的：从小到大进行排序
var ary=[2,1,5,8];
// 两两进行比较，如果前者比后者大，就交换顺序， 经过一轮比较之后，得到了一个最大值8
//--------- 需要比较多少轮？ary.length-1 轮（因为最后一个数字不用比，就是最小的）
// 每一轮我需要比较多少次？------ary.length-1-已比较的轮数
var ary=[8,2,1,5];// 正常情况下，两两比较的次数： ary.length-1
第一轮的：[2,1,5,8]；// 经过一轮比较得到了一个最大值8 比了三次
第二轮的：[1,2,5,8]；//经过二轮比较得到了一个最大值5 比了两次 ary.length-1-已比较的轮数
第三轮的：[1,2,5,8]；
第四轮 不用比了，已经得到三个最大值了，最后一个就是最小的
*/
<script>
var ary=[2,1,5,8,5,221,3,2];
var swap=0;
// 比较的轮数
for(var i=0;i<ary.length;i++){
// 每轮比较的for循环
for(var j=0;j<ary.length-i;j++){
// 如果前面比后面的大，就交换位置
if(ary[j]>ary[j+1]){
swap=ary[j];
ary[j]=ary[j+1];
ary[j+1]=swap;
}
}
}
alert(ary);
</script>
2.快速排序？
<script>
//快速排序
var ary=[12,15,4,13,16,11];//4,11,12,13,12
function fast(ary){
// 做一个条件，如果传入的数组的长度是0或者1，说明已经没有比较的值了，就可以返回这个数组了
if(ary.length<=1){
return ary;
}
// 中间项的索引
var centerIndex=Math.floor(ary.length/2);
// splice的返回值是数组，拿到删除的项得加索引0,这个是获取中间值
var centerValue= ary.splice(centerIndex,1)[0];
// 设置左右两个空数组
var leftArr=[];
var rightArr=[];
// for循环,交换位置
for(var i=0;i<ary.length;i++){
// 如果遍历的数小于中间数，就把这个数放在左边
if(centerValue>ary[i]){
leftArr.push(ary[i]);
}else{//否则放在右边的数组中
rightArr.push(ary[i]);
}
}
// 最终获得左右数组和中间值，将三个数组拼接
// 左右两个数组又能够作为一个无序数组，进行快速排序，所以左数组和右数组仍需要调用函数
return fast(leftArr).concat(centerValue, fast(rightArr));
}
alert(fast(ary));
</script>
14.验证码
1.验证码如何实现？
<!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>Document</title>
<style>
button {
width: 200px;
height: 50px;
cursor: pointer;
}
#code {
border: 1px solid #333;
height: 50px;
width: 200px;
margin-top: 100px;
font-size: 40px;
line-height: 50px;
text-align: center;
}
</style>
</head>
<body>
<button id="btn">获取验证码</button>
<div id="code"></div>
<script>
// 字母和数字的范围
let codeText = "1234567890qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM";
var obtn=document.getElementById("btn");
var ocode=document.getElementById("code");
function getCode(num,begin,end) {
// 先判断这三个数是否为未定义
if(num==undefined){ num=4;}
if(begin==undefined) {begin=0;}
if(end==undefined) {end=codeText.length-1;}
// 获取一个在0-61的随机索引
var newCode = "";
var indexArr=[];
while(newCode.length<num){
// 获取0-61，包括61之间的一个随机数
var index =Math.round(Math.random() * (end-begin)+begin) ;
// 如果已经出现了这个index，则重新选择,实现不出现重复的数字
if(!indexArr.includes(index)){
indexArr.push(index);
// 将随机数的索引对应数据项放到新字符串中
newCode += codeText.charAt(index);
}
}
// for (let i = 0; i < num; i++) {
// // 获取0-61，包括61之间的一个随机数
// var index =Math.round(Math.random() * (end-begin)+begin) ;
// // 如果已经出现了这个index，则重新选择,实现不出现重复的数字
// if(indexArr.includes(index)){
// i--;
// continue;
// }
// indexArr.push(index);
// // 将随机数的索引对应数据项放到新字符串中
// newCode += codeText.charAt(index);
// }
return newCode;
}
ocode.innerText=getCode();
// 设计按钮的点击事件
obtn.onclick=function(){
ocode.innerText=getCode();
}
</script>
</body>
</html>
15.时间格式转换
1.如何将"2019-8-18 12:32:18"转换为"2019年8月18日 12时32分18秒"?
<script>
var str="2019-8-18 12:32:18";
var timeArr=str.split(" ");
// 将年月日与时分秒分割开
var year=timeArr[0];
var time=timeArr[1];
//将每一个数分开
var newyear=year.split("-");
var newtime=time.split(":");
// 各拼接两部分
var nyear=newyear[0]+"年"+newyear[1]+"月"+newyear[2]+"日";
var ntime=newtime[0]+"时"+newtime[1]+"分"+newtime[2]+"秒";
// 拼接两部分,用空格隔开
var ne=nyear.concat(" ",ntime);
console.log(ne);
</script>
16.网址参数转对象属性
1.将网址中的问号后面的参数截取为对象中的属性？
<script>
var str = "http://www.mi.com/?id=100&price=180";
function toObj(str) {
// 首先获取?出现的位置
var qusindex = str.indexOf("?");
console.log(qusindex);
// 截取？后面的字符串
var parm = str.slice(qusindex + 1);
// 将字符串根据&分割
var parmArr = parm.split("&");
// 向新对象中添加
var obj = {};
for (var i = 0; i < parmArr.length; i++) {
var item = parmArr[i].split("=");
obj[item[0]] = item[1];
}
console.log(obj);
return obj;
}
var ob=toObj(str);
</script>
17.函数上下文
1.求下面函数的执行结果？
<script>
function fun(){
return this.a+this.b;
}
var a=1;
var b=2;
var obj={
a:3,
b: fun(),//3，执行到这一步时，会执行fun()函数，符合函数名()的规则，所以this指代的是window对象
fun:fun
}
var res=obj.fun();//6这里符合对象名.方法()的调用形式，所以this指代的是obj对象
console.log(res);
</script>
2.求函数的执行结果？
//注意点：考虑到this.b和this.b()的区别
// this.b表示获取b后面的函数体
// this.b()，表示调用b后面的函数，函数会被执行
//return 函数体时，函数体会被执行
<script>
var c=1;
var obj={
a:function(){
var c=3;
return this.b;//转为obj.b,调用b后面的匿名函数，this指代window对象，
},
b:function(){
var c=4;
document.write(this.c)//window.c，所以结果为1
},
c:2
};
var obj1=obj.a();//符合规则一对象名.函数名()调用，this指代obj
obj1()
</script>
3.上下文规则四题目？
<script>
var a=1;
var obj={
a=2,
//因为函数是立即执行函数，所以在预编译时期，就会执行这个函数，所以fun的值是return的那个函数
fun=(function(){
var a=this.a;//立即执行函数的this表示window对象，所以找window对象中的全局变量a
//返回这个函数，用于上面执行了立即执行函数，形成了闭包，记住了a的值等于1
return function(){
console.log(a+this.a);//
}
} )()
}
obj.fun();//3，a是闭包中的a，this.a：由于是对象名.方法名（）方式调用的，所以this代指的是obj
</script>
4.上下文规则五题目？
<script>
setInterval(obj.fun,2000)//调用fun的是定时器，所以fun函数中的this代指window对象
setInterval(function(){obj.fun(),2000})//调用fun的是obj，所以fun函数中的this代指obj对象
</script>
18.鼠标移动生成小球
<!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>Document</title>
<style>
body{
background-color: black;
}
.ball{
border-radius: 50%;
position: absolute;
}
</style>
</head>
<body>
<script>
// 小球类
function Ball(x,y){
// 传入小球的圆心距离浏览器左上角的坐标值
this.x=x;
this.y=y;
//给定小球的初始半径
this.r=10;
//小球的背景颜色
this.color=colorArr[parseInt(Math.random()*5)];
//调用初始化方法生成小球元素
this.init();
//把自己推入数组，这里的this不是类本身，而是new出来的实例对象
arr.push(this);
// 添加随机的x和y的增量，实现小球随机方向的移动，放在构造函数中，是因为在创建实例之前就应该给定一个确定的方向让小球移动
do{
this.xadd=parseInt(Math.random()*10-5);
this.yadd=parseInt(Math.random()*10-5);
}while(this.xadd==0&&this.add==0);
//透明度属性
this.opacity=1;
}
//初始化方法
Ball.prototype.init=function(){
//创建自己的dom元素
this.dom=document.createElement('div');
this.dom.className="ball";
this.dom.style.width=this.r*2+"px";
this.dom.style.height=this.r*2+"px";
this.dom.style.left=this.x-this.r+"px";
this.dom.style.top=this.y-this.r+"px";
this.dom.style.backgroundColor=this.color;
// 将该元素上树到body元素中
document.body.appendChild(this.dom);
}
// 小球状态更新方法
Ball.prototype.update=function(){
// 位置改变
this.x+=this.xadd;
this.y+=this.yadd;
//使小球的透明度减小
this.opacity-=0.05;
//半径改变
this.r+=0.02;
this.dom.style.width=this.r*2+"px";
this.dom.style.height=this.r*2+"px";
this.dom.style.left=this.x-this.r+"px";
this.dom.style.top=this.y-this.r+"px";
this.dom.style.backgroundColor=this.color;
this.dom.style.opacity=this.opacity;
//如果小球的opacity为0，则删除小球，释放内存
if(this.opacity<0){
// 删除数组中的小球
for(var i=0;i<arr.length;i++){
if(arr[i]==this){
arr.splice(i,1);
}
}
//删除dom元素中的小球
document.body.removeChild(this.dom);
}
}
// 把所有的小球实例都放在同一个数组中
var arr=[];
//创建一个颜色数组
var colorArr=["#666fff","#aaabbb","#ccff66","#ff99cc","#ff6666"];
//设置定时器，更新所有小球的实例
setInterval(function(){
//遍历数组，调用小球的undate方法
for(var i=0;i<arr.length;i++){
arr[i].update();
}
},50)
// 鼠标指针的事件监听
document.onmousemove=function(e){
var x=e.clientX;
var y=e.clientY;
// 只要鼠标移动就会产生一个新的小球随机移动
new Ball(x,y);
}
</script>
</body>
</html>
19.Date实现倒计时
<!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>Document</title>
</head>
<body>
<h1 id="tag">2021年高考倒计时</h1>
<h2 id="tag2">2021年高考倒计时</h2>
<script>
// 获取2022年6月7号时间对象
var gt = new Date("2022-06-21");
// 设置定时器,每秒更新一次
setInterval(function () {
// 获取当前时间
var nt = new Date();
// 让后面的时间减前面的时间，获取的是时间戳
var sy = gt - nt;//得到的是剩余时间戳,毫秒数
// 获取剩余天数
syDay = parseInt(sy / (1000 * 60 * 60 * 24));
//获取减去天数后剩余的小时数
syHours = parseInt(sy % (1000 * 60 * 60 * 24) / (1000 * 60 * 60));
//获取减去上面剩余的分钟数
syMinutes = parseInt(sy % (1000 * 60 * 60) / (1000 * 60));
// 获取减去上面剩余的秒数
sySeconds = parseInt(sy % (1000 * 60) / (1000));
// 获取显示倒计时的dom元素
var tags = document.getElementById("tag2");
tags.innerText = "倒计时" + syDay + "天" + syHours + "小时" + syMinutes + "分" + sySeconds + "秒";
},1000)
</script>
</body>
</html>
扫一扫
396
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
