这篇博客介绍了JavaScript的基础应用，包括输入三个值的比较，数组内元素相加，绘制星号图案，实现简单计算器，遍历数组去重，使用Date对象处理时间，以及对象和数组的各种操作。还展示了冒泡排序，定义对象，统计字符串中最多字符，DOM元素操作，动态改变背景图，复选框全选，分时问候，鼠标跟随，验证码倒计时，京东倒计时，以及随机抽奖等实用功能的实现代码。
JaveScript 案例
输入三个值比大小
var a=prompt('请输入数值：')
var b=prompt("请输入数值：")
var c=prompt('请输入数值：')
function maxMin(max,min,mid){
if(max>min&&max>mid){
alert(max+'大')
}
else if(min>max&&min>mid){
alert(min+"大")
}
else if(mid>max&&mid>min){
alert(mid+'大')
}
else{
alert("相等")
}
}
maxMin(a,b,c)
数组内相加
var arr1=[23,213,43,5,34,3]
function getSum(arr){
var sum=0;
for(var i=0;i<arr.length;i++){
sum+=arr[i];
}
console.log(sum);
}
getSum([10,20,30,40]);
getSum(arr1);
输入几行几列星星
var a = prompt('输入行：')
var b = prompt('输入列：')
function xx(hang, lie) {
for (var i = 1; i <= hang; i++) {
for (var j = 1; j <= lie; j++) {
document.write('*');
}
document.write('<br/>');
}
}
xx(a, b)
计算器
var a = Number(prompt('输入第一个数：'))
var b = prompt('输入符号：')
var c = Number(prompt('输入第二个数：'))
function jsq(one,fu,two){
switch (fu) {
case "+":
alert(one + two );
break;
case "-":
alert(one - two);
break;
case "*":
alert(one * two);
break;
case "/":
alert(one / two);
break;
}
}
jsq(a,b,c)
打印1-100相加的数
var a=prompt('输入最大数：')
function shu(max){
var num=0
for(i=1;i<=max;i++){
num=num+i
}
document.write(num)
}
shu(a)
声明式函数
预解析可以提前调用
function fn(a){
console.log(a);
}
匿名表达式
不会预解析 不能提前调用
var fn2=function(a){
console.log(a);
};
fn2(4)
return返回值
function fn3(a,b){
return a+b;
}
var res=fn3(2,3);
console.log(res);
return终止代码执行
function fn4(a,b){
return false;
console.log(a,b);
}
fn(2,3);
随机抽取姓名
方法一
var sz=['刘金龙','鎏金聋','六斤龙','溜进龙','流进龙','刘晋聋','柳金隆','瘤斤笼','⑥锦龙','硫斤聋','遛紧聋','刘津珑','李传统','李船帆','李传桨','里穿衣服的','叫孤鸿寡鹄','瑠紧聋','蓅尽陇','王坚果','王坚果Pro max','王指纹']
var index =Math.floor(Math.random()*22);
console.log(sz[index]);
方法二(定时抽奖)
<style>
#d1{
width: 100px;
height: 50px;
background-color: red;
color:white;
text-align: center;
line-height: 50px;
font-size: 20px;
}
#d3{
margin-left: 10px;
}
</style>
</head>
<body>
<div id="d1">
</div>
<button id="d2">
抽奖
</button>
<script>
var arr=['鎏金聋','理串逸','亡坚果','痒总锐','假异哞','亡智闻','余总说','联名',
'胡俊丽','家臣非','玛襑豫','尘世好','伤与球','阿伟'];
var sun=3;
var a=document.querySelector('#d2');
a.addEventListener("click",function(){
a.disabled=true;
function dingshi(){
var c=document.querySelector('#d1');
sun--;
if(sun==0){
var index=Math.ceil(Math.random()*13);
c.innerHTML='恭喜'+arr[index];
clearInterval(timer);
a.disabled=false;
sun=3;
}
}
var timer=setInterval(dingshi,1000);
},false)
</script>
Date对象的常用方法
var date2=new Date('2021/10/1');//获取指定某个日期的日期对象
var date=new Date();//获取的是当前的日期对象
var year=date.getFullYear();//获取的年份
var month=date.getMonth();//获取月份
var day=date.getDate();//获取几号
var week=date.getDay();//获取星期几
var hour=date.getHours();//获取小时数
var minute=date.getMinutes();//获取分钟数
var second=date.getSeconds();//获取秒数
console.log(year);
console.log(month); //打印出来的月份比实际月份少1
console.log(day);
console.log(week);
console.log(hour);
console.log(minute);
console.log(second);
console.log(new Date().getTime());//获取当前日期距离1970年1月1日的时间戳（毫秒数）
console.log(new Date('2021/10/1').getTime());//获取10月1日距离1970年1月1日的毫秒数
数组去掉重复值
方法1
var arr=[12,12,34,34,5,6,78,876]
var newArr=[];//定义一个空数组
for(var i=0;i<arr.length;i++){
if(newArr.indexOf(arr[i])==-1){
newArr.push(arr[i]);
}
//思路：对原始数组进行for循环，判断新数组中是否存在原始数组中的元素，如果有，
//代表室第二次出现，没有说明第一次出现，就存在新数组，最后把新数组打印出来
}
console.log(newArr);
方法2
var arr=[1,2,3,44,1,44,55,66,77,8];
function unique(arr){
for(var i=0,len=arr.length;i<len;i++){
for(var j=i+1,len=arr.length;j<len;j++){
if(arr[i]===arr[j]){
arr.splice(j,1);
j--;//每删除一个数j的值就减1；
len--;//j值减小时len也要相应减1（减少循环次数，节省性能）
}
}
}
return arr;
}
document.write(unique(arr));
//1,2,3,44,55,66,77,8
数组方法
var arr1 = [1, 2, 3, 4, 5]//字面量方式
var arr2 = new Array(6);//如果传递一个参数，代表数组的长度是6
var arr3 = new Array(5, 6, 7, 8);//如果传递多个参数，代表数组中的多个元素
//判断某个变量是否为数组
var num = 10;
console.log(Array.isArray(arr1));//true
console.log(Array.isArray(num));//false
//数组中添加和删除元素
var arr=[10,3434,5,3,55,45];
//数组中前面添加一个元素
arr.unshift(5);
//数组中尾部追加一个元素
arr.push(50);
//删除数据中全面第一个元素
arr.pop();
//删除数组中指定的某个元素 参数分别是：删除的索引号、删除几个、添加的元素
arr.splice(1,1,"a");
console.log(arr);
//数组的倒序排列
var arr=[23,12,45,26,77]
arr.reverse();//顺序翻转
arr.sort(function(a,b){
return a-b;//从小到大 升序排列
});
arr.sort(function(a,b){
return b-a;//从大到小降序排列
})
console.log(arr);
//求数组中元素是否存在 如果用indexOf的返回值为-1 代表查找的元素在数组中不存在
var arr=["a","b",'c','d','e'];
var index=arr.indexOf('h');
console.log(index);
//数组转换成字符串
var arr=['hello','world','everyone'];
var str=arr.join('');//把数组转换成字符串
document.write(str);
//数组合并
var math=[66,45,67,333];
var eng=[30,20,10,60];
var bigArr=math.concat(eng);
console.log(bigArr);
冒泡排序法*
var arr=[23,34,45,56,1,63,54];//从小到大排列
//外层控制的是跑几趟 内层控制的是两两互换
for(var i=0;i<arr.length-1;i++){
for(var j=0;j<arr.length-1-i;j++){
//假设前面的数比后面的数大 ，前后换位置
if(arr[j]>arr[j+1]){
//两两交换位置
var temp=arr[j+1];
arr[j+1]=arr[j];
arr[j]=temp;
}
}
}
document.write(arr)
定义对象
var obj={
name:'荣耀',
cpu:'i5-10210u',
jidai:16,
say:function(){
alert('版本号')
}
}
console.log(obj.jidai);
console.log(obj['name']);
obj.say();
对象的循环
var obj={
name:'荣耀',
cpu:'i5-10210u',
jidai:16,
say:function(){
alert('版本号')
}
}
for(var k in obj){
console.log(k);
console.log(obj[k]);
}
统计字符串中出现次数最多的字符
var str='attfiossssfsfsjosfsfjogg';
var obj={};
for(var i=0;i<str.length;i++){
var zimu=str[i];//根据索引号获取对应单个字符
//如果原来的次数存在就累加1，否则直接赋值为1次
if(obj[zimu]){
obj[zimu]++;
}else{
obj[zimu]=1;
}
}
console.log(obj);
var max=0;//假设最大次数
var maxFu='';//假设出现次数最多的字符
for(var k in obj){
if(obj[k]>max){
max=obj[k];
maxFu=k;
}
}
console.log(maxFu+'是出现次数最多的符号');
console.log("出现的次数是"+max);
获取Dom元素的几种方式
var box1=document.getElementById('d1');//通过id名获取元素
var box2=document.getElementsByTagName('div');//通过标签名获取元素['div','div']
//h5新增的获取元素方法
var box3=document.getElementsByClassName('c1');//通过类名获取元素['div']
var box4=document.querySelector('#d1');//获取唯一的一个元素 一定要添加标识符
var box5=document.querySelectorAll('#d1');//获取的是数组
js更换背景图
方法1
<body>
<button id='d1'>火烧云</button>
<button id='d2'>陨石坑</button>
<button id=d3>云</button>
<script>
var btn=document.getElementById('d1');
btn.onclick=function(){
var box=document.body;
box.style.background="url(../精选背景图/火烧云.jpg)";
}
var btn=document.getElementById('d2');
btn.onclick=function(){
var box=document.body;
box.style.background="url(../精选背景图/陨石坑.jpg)";
}
var btn=document.getElementById('d3');
btn.onclick=function(){
var box=document.body;
box.style.background="url(../精选背景图/云.jpg)";
}
</script>
</body>
方法2
<button id='d1' class="c1">火烧云</button>
<button id='d2' class="c1">陨石坑</button>
<button id=d3 class="c1">云</button>
var btns=document.querySelectorAll('.c1');
for(var i=0;i<btns.length;i++){
btns[i].index=i;
btns[i].onclick=function(){
var index=this.index;
console.log(index);
document.body.style.background='url(../images/0"+(index+1)+".png)'
}//图片名称改成01,02,03...的格式
}
复选框全选
全选<input type="checkbox" id='checkAll'><br/>
<input type="checkbox" class='checkOne'>
<input type="checkbox" class='checkOne'>
<input type="checkbox" class='checkOne'>
<input type="checkbox" class='checkOne'>
<input type="checkbox" class='checkOne'>
<script>
var checkAll=document.getElementById("checkAll");//获取大复选框
var checkOnes=document.querySelectorAll('.checkOne');//获取所有的小复选框
checkAll.onchange=function(){
var status=this.checked;//获取大复选框的选中状态 true false
if(status==true){
//大的被选中了 下面的小盒子被选中
for(var i=0;i<checkOnes.length;i++){
checkOnes[i].checked=true;
}
}else{
//大盒子取消选中 小盒子全部取消选中
for(var i=0;i<checkOnes.length;i++){
checkOnes[i].checked=false;
}
}
console.log(this.checked);
}
分时问候
var hour=new Date().getHours();
if(hour>=8&&hour<12){
alert('早上好')
document.body.style.background="url(../精选背景图/模糊.jpg)"
}else if(hour>=12&&hour<18){
alert('中午好')
document.body.style.background="url(../精选背景图/年轮.jpg)"
}else if(hour>=18&&hour<=24){
alert('晚上好')
document.body.style.background="url(../精选背景图/任意门.jpg)"
}
点击按钮控制盒子显示
<style>
#d2{
width: 300px;
height: 300px;
background-color: red;
display:none;
}
</style>
</head>
<body>
<button id="d1">显示</button>
<div id='d2'></div>
<script>
var a=document.getElementById('d1');
var flag=0;
a.onclick=function(){
if(flag==0){
var box=document.querySelector('#d2');
box.style.display='block';
a.innerHTML='隐藏'
flag=1;
}else if(flag==1){
var box=document.querySelector('#d2');
box.style.display='none';
flag=0;
a.innerHTML='显示'
}
}
</script>
</body>
用户发表评论
<body>
<div id='box'>
<!-- 让用户输入评论的内容 -->
<textarea name="" id="content" cols="30" rows="10"></textarea>
<button id="btn">评论</button>
<ul id="list"></ul>
</div>
<script>
var btn=document.querySelector('#btn');//获取按钮
btn.onclick=function(){
var textArea=document.querySelector('#content');//获取文本域标签
var content=textArea.value;//获取表单标签的内容
var li=document.createElement('li')//创建li标签
li.innerHTML=content+'<a href="javascript:void(0)">删除</a>'//把用户输入的内容赋值给li标签
var ul=document.querySelector('#list');
ul.appendChild(li);
textArea.value='';
var delBtns=document.querySelectorAll('#list li a');//[a,a,a]
for(var i=0;i<delBtns.length;i++){
delBtns[i].onclick=function(){
var res=confirm('你确定要删除吗');
if(res){
ul.removeChild(this.parentNode);//把当前的li标签删除
}
}
}
console.log(delBtns);
}
</script>
</body>
盒子跳转(tab选项卡)
<div id="box">
<button id="d1" class='red'>按钮1</button>
<button id="d2">按钮2</button>
<button id="d3">按钮3</button>
<button id="d4">按钮4</button>
<div class="box active" >我是按钮1内容</div>
<div class="box">我是按钮2内容</div>
<div class="box">我是按钮3内容</div>
<div class="box">我是按钮4内容</div>
</div>
<script>
var btns=document.querySelectorAll('#box>button');
var boxs=document.querySelectorAll('.box');//获取所有div
for(var i=0;i<btns.length;i++){
btns[i].index=i;//把所有i保存到index属性
btns[i].onclick=function(){
//让所有的button按钮回复初始状态
for(var j=0;j<btns.length;j++){
btns[j].className='';
}
this.className='red';
//让对应的div出来 注意在这之前让所有的div先全不隐藏
for(var k=0;k<boxs.length;k++){
boxs[k].className='box';
}
boxs[this.index].className='box active';
};
}
</script>
鼠标跟随
方法1
<style>
#d1{
width: 100px;
height: 100px;
position:absolute;
top:100px;
left:50px;
}
</style>
<body>
<img src="../精选背景图/恶魔城.jpg" alt="" id="d1">
<script>
//鼠标跟随原理:用js获取鼠标的位置，然后把参数设置成图片的位置
document.addEventListener(
"mousemove",
function(event){
var pagex=event.pageX;//获取鼠标移动的那个点的x轴坐标
var pagey=event.pageY;//获取鼠标移动的那个点的y轴坐标
var d1=document.querySelector("#d1");//获取图片的DOm对象
d1.style.top=pagey+"px";
d1.style.left=pagex+"px";
}
)
</script>
方法2（放大镜效果）
<style>
#box {
width: 800px;
height: 800px;
background-color:pink;
margin: 30px auto;
position: relative;
}
#small {
width: 100px;
height: 100px;
background-color: rgba(250, 250, 119, 0.411);
position: absolute;
top: 50px;
left: 60px;
}
</style>
</head>
<body>
<div id="box">
<div id="small"></div>
</div>
<script>
// 思路：遮罩移动的原理就是遮罩触发onmousemove事件时候，动态设置它的位置
var box = document.querySelector("#box"); //获取大盒子
var small = document.querySelector("#small"); //获取小盒子 遮罩
box.onmousemove = function(event) {
var pageX = event.pageX; //你移动到的那个点距离页面左边的距离
var pageY = event.pageY; //你移动到的那个点距离页面顶部的距离
var boxX = box.offsetLeft; //获取大盒子在页面中左边的距离
var boxY = box.offsetTop; //获取大盒子在页面中顶部的距离
var zhongX = pageX - boxX;
var zhongY = pageY - boxY;
var smallX = zhongX - small.offsetWidth / 2;
var smallY = zhongY - small.offsetHeight / 2;
if (smallX <= 0) {
smallX = 0;
}
if (smallY <= 0) {
smallY = 0;
}
var leftx = box.offsetWidth - small.offsetWidth;
var topY = box.offsetHeight - small.offsetHeight;
if (smallX > leftx) {
smallX = leftx;
}
if (smallY > topY) {
smallY = topY;
}
small.style.left = smallX + "px";
small.style.top = smallY + "px";
};
</script>
</body>
验证码倒计时
<body>
<input type="text" id="txt">
<button id='btn'>发送</button>
<div id="box"></div>
<script>
var num=10;//定义初始时间
var btn=document.getElementById('btn');
btn.addEventListener("click",function(){
//按钮禁用
btn.disabled=true;
function countTime(){
var box=document.getElementById('box');//获取div元素
box.innerHTML=num+"秒后重新验证";
num--;
if(num==0){
clearInterval(timer);//清除定时器
box.innerHTML='请重新输入验证码'
//允许再次点击
btn.disabled=false;
num=10;
}
}
var timer=setInterval(countTime,1000);//开启定时器，并且保留返回值
},false)
</script>
京东倒计时
<style>
#bigBox {
width: 190px;
height: 260px;
margin: 0 auto;
background-image: url(../切图库2/闪电倒计时.png);
}
#bigBox h2 {
width: 190px;
text-align: center;
color: white;
padding-top: 40px;
}
.c1 div {
background-color: #2f3430;
width: 28px;
height: 28px;
display: inline-block;
margin-left: 6px;
margin-top: 100px;
color: white;
font-size: 23px;
}
.c1 span {
color: white;
font-size: 28px;
height: 28px;
display: inline-block;
padding-top: 1px;
line-height: 28px;
}
</style>
<body>
<div id="bigBox">
<h2>
距离假期结束
</h2>
<div class="c1">
<div id="tian"></div>
<span>:</span>
<div class="shi"></div>
<span>:</span>
<div class="fen"></div>
<span>:</span>
<div class="miao"></div>
</div>
</div>
<script>
var tian = document.querySelector('#tian')
var shi = document.querySelector('.shi')
var fen = document.querySelector('.fen')
var miao = document.querySelector('.miao')
var inputtime = new Date("2021-10-07 12:00:00")
mingzi()
setInterval(mingzi, 1000)
function mingzi() {
var nowtime = new Date();
var timer = (inputtime - nowtime) / 1000;
var a = parseInt(timer / 60 / 60 / 24);
a = a < 10 ? "0" + a : a;
tian.innerHTML = a
var b = parseInt(timer / 60 / 60 % 24);
b = b < 10 ? "0" + b : b;
shi.innerHTML = b
var c = parseInt(timer / 60 % 60);
c = c < 10 ? "0" + c : c;
fen.innerHTML = c
var d = parseInt(timer % 60);
d = d < 10 ? "0" + d : d;
miao.innerHTML = d
if(d==0){
clearInterval=(minzi);
}
}
</script>
随机抽奖
<style>
#d1 {
width: 1880px;
height: 900px;
background-color: red;
line-height: 900px;
text-align: center;
color: white;
font-size: 360px;
}
</style>
<body>
<button id="d2">抽奖</button>
<button id="d3">结束</button>
<div id="d1">
</div>
<script>
var a = document.getElementById('d2');
var b = document.getElementById('d3');
var c = document.getElementById('d1');
var timer;
var arr = ['鎏金聋', '理串逸', '亡坚果', '痒总锐', '假异哞', '亡智闻', '余总说', '联名',
'胡俊丽', '家臣非', '玛襑豫', '尘世好', '伤与球', '阿伟'];
a.addEventListener('click', function () {
a.disabled = true;
function fu() {
var h = Math.floor(Math.random() * arr.length)
c.innerHTML = "恭喜" + arr[h];
}
timer = setInterval(fu, 1)
}, false);
b.onclick = function () {
clearInterval(timer);
a.disabled=false;
}
</script>
</body>
###
扫一扫
3070
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
