Javascript基础（2）

最新推荐文章于 2022-11-23 17:32:46 发布

Always_Love

最新推荐文章于 2022-11-23 17:32:46 发布

阅读量2.2w

点赞数

分类专栏： JS 入门

本文链接：https://blog.csdn.net/Always_Love/article/details/103488491

版权

入门同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

15 篇文章 0 订阅

订阅专栏

上周进行了JS的进一步学习，学习了几个对象，以及数组的操作还有冒泡事件，下面就做一下总结。

一、知识点
内置对象
number对象：
.toString(进制数) 转换成不同进制数
.toFixed(小数位数) 保留小数倍数

string对象
.length 字符串长度
indexOf()查找字符串返回字符串位置，如果没找到返回－1
match() 查找指定字符串，找到返回该字符串，没有返回null
replace(“被替换内容”,“替换的新内容”)
toUpperCase()转换成大写
toLowerCasw()转换成小写
split(“间隔符”) 把字符串转换成为数组
charAt(n) 返回指定位置的字符 n第一个位置为0
slice(start,end) 包含start不包含end 截取指字位置字符串
trim()去除字符串两端空白
substr(start,length)截取字符串长度 start开始截取位置，length表示截取长度
substring(起始位置索引值，[结束位置索引值]) 包含头部不包含结束索引位置符号

Date对象
obj=new Date()获取当前系统时间
年：obj.getFullYear()
月：obj.getMonth() 返回0－11 月11表示12月返回值+1
日：obj.getDate()
星期：obj.getDay() 0－6 0表示星期天
小时：obj.getHours()
分：obj.getMinutes()
秒：obj.getSeconds()

计时器
计时器名＝setInterval(“函数”，时间) 在指定时间内多次调用函数，时间单位为毫秒
清除计时器clearInterval(计时器名)
注：一般写在函数外部

计时器名＝setTimeOut(“函数”，时间) 在指定时间内调用一次函数，时间单位为毫秒
清除计时器clearTimeOut(计时器名)
注：一般写的函数内部

赋值：new Date(year, month, day, hours, minutes, seconds, milliseconds)
eg: new Date(2020,0,1,0,0,0,0) 2020年元旦零点

Math对象
Math.PI 圆周率
Math.sqrt() 平方根
Math.floor() 向下舍入
Math.ceil() 向上舍入
Math.random()随机数 0~1
Math.round() 四舍五入
Math.max() 最大值
Math.min() 最小值

Array数组:
concat（）合并连接数组
toString() 数组转换成字符串
indexOf（）字符串在数组中出现的位置（索引值）
join() 数组转换成指定分隔符的字符串

pop()删除数组最后一个元素
shift() 删除数组第一个元素

push()向数组末尾添加一个元素
unshift() 向数组开头添加一个元素

reverse() 反转数组元素
sort() 数组排序
splice(插入或删除的位置，规定删除的元素如果为0则表示插入，[可选，表示要添加的新元素]) 方法用于插入、删除或替换数组的元素。
valueOf()返回数组的原始值

事件冒泡阻止方式：
1.event.stopPropagation();
阻止了事件冒泡，但不会阻击默认行为
2.return false;
阻止了事件冒泡，也阻止了默认行为
3.event.preventDefault();
不阻击事件冒泡，但阻击默认行为

捕获和冒泡
监听事件
addEventListener(“事件”，方法，true/false) 默认为flase,表示冒泡，为true时表示捕获
移除监听事件
removeEventListener()

二、实践例子
1、倒计时
代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>倒计时</title>
    <style>
        p{
            width:500px;
            height:100px;
            display:block;
            margin:20% auto 10px;
            padding:5% 0 0;
            text-align: center;
            background: pink;
            border:double 10px orange;
            font-size: 24px;
            font-weight: bold;
            color: #c41402;
        }
    </style>
</head>
<body>
<p id="show"></p>
<script>
    function countDown(){
 var oldtime=new Date(2020,0,1,0,0,0,0);
 var nowtime=new Date();
 var oldtimes=parseInt((oldtime.getTime())/1000);
 var nowtimes=parseInt((nowtime.getTime())/1000);
    var times=parseInt(oldtimes-nowtimes);
//console.log(times);
  var tian=Math.floor(times/(24*60*60));
  var xs=Math.floor((times-tian*(24*60*60))/(60*60));
  var fz=Math.floor((times-tian*24*60*60-xs*60*60)/60);
  var miao=Math.floor(times-tian*24*60*60-xs*60*60-fz*60);
        if(tian<10){
            var tian1=0;
        }else{
            tian1="";
        }
        if(xs<10){
            var shi=0;
        }else{
            shi="";
        }
        if(fz<10){
            var fen=0;
        }else{
            fen="";
        }
        if(miao<10){
            var miao1=0;
        }else{
            miao1="";
        }
  document.getElementById("show").innerHTML="现在距离元旦还有："+tian1+tian+"天"+shi+xs+"小时"+fen+fz+"分钟"+miao1+miao+"秒";
    }
    countDown();
    setInterval("countDown()",1000);
</script>
</body>
</html>

效果：
在这里插入图片描述 2、搜索框
代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
            box-sizing: border-box;
        }
        .search{
            width:700px;
            margin:100px auto 0;
        }
        .search>p>span{
            width:600px;
            height:35px;
            border:solid 3px #900;
            display: inline-block;
        }
        input{
            outline:none;
        }
        .search input[type="text"]{
            width:500px;
            height:29px;
            border:none;
            padding-left: 10px;
        }
        .search input[type="button"]{
            width:94px;
            height:29px;
            background: #900;
            color:#fff;
            font-size: 14px;
            text-align: center;
            font-weight: bold;
            line-height: 29px;
            border:none;
            cursor: pointer;
        }
        #show{
            width:506px;
            border:solid 1px #aaa;
            border-top: none;
            /*visibility: hidden;*/
        }
        #show p{
            line-height: 30px;
            text-indent: 5px;
            font-weight: bold;
        }
        #show p:hover{
            background: #900;
            color:#fff;
        }
    </style>
</head>
<body>
<div class="search">
    <p><span><input type="text" id="searchbox" placeholder="请输入搜索关键词"/><input type="button" value="搜索" id="searchbtn"/></span></p>
    <div id="show">

    </div>
</div>
<script>
    var datalist=["hello","welcome","china","huawei","internationl","west","linux","fighting","qwertyuiop","asdfghjkl","zxcvbnm"];//定义数据库数组
    var searchbox=document.getElementById("searchbox");//获取文本框
    var show=document.getElementById("show");//获取显示对象
    searchbox.onkeyup=function(){//文本框在键盘松开时触发
        var zhi=this.value;// 提取当前文本框中的内容
        var newdata=[];// 定义一个空数组
        show.style.visibility="visible";// 默认让显示对象内容显示
        show.innerHTML="";//默认情况下清空显示内容
        for(var x=0;x<datalist.length;x++){ //遍历数据库数组内容
            if(zhi.trim().length>0 && datalist[x].indexOf(zhi)>-1){ //判断当输入的值不为空且在数据库中能查找到时
                newdata.push(datalist[x]);//把对应的数据添加到新数组中
            }
        }
       // console.log(newdata.valueOf())
       /*显示数据*/

        for(var y=0;y<newdata.length;y++){  //遍历新数组
            var newp=document.createElement("p");//创建新元素p
            newp.innerHTML=newdata[y]; //把遍历对应的数组内容赋值给新元素 p中
            show.appendChild(newp); //把新元素内容添加到显示元素中
        }
//点击选中数据，并隐藏数据列表
        var ps=document.getElementById("show").children;  // 找到所有的显示元素中的子元素p
        for(var i=0;i<ps.length;i++){ //遍历所有子元素
            ps[i].onclick=function(){ //点击对应子元素时触发
                searchbox.value=this.innerHTML;// 将点击的元素内容添加到搜索文本中
                show.style.visibility="hidden";//把显示数据列表隐藏
            }
        }


    }
</script>
</body>
</html>

效果：
在这里插入图片描述 3、日期时钟
代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        span{
            width:500px;
            height:100px;
            display:block;
            margin:20% auto 10px;
            padding:5% 0 0;
            text-align: center;
            background: pink;
            border:double 10px orange;
        }
        button{
            display: block;
            margin:0 auto;
        }
    </style>
</head>
<body>
<span id="show"></span>
<button id="btn">停止时间</button>
<script>
    function times(){
    var now=new Date();
    if(now.getDay()==0){
        var xq="天"
    }else{
        xq=now.getDay();
    }
        if(now.getMonth()<9){
            var yue=0;
        }else{
            yue="";
        }
        if(now.getDate()<10){
            var tian=0;
        }else{
            tian="";
        }
        if(now.getHours()<10){
            var shi=0;
        }else{
            shi="";
        }
        if(now.getMinutes()<10){
            var fen=0;
        }else{
            fen="";
        }
        if(now.getSeconds()<10){
            var miao=0;
        }else{
            miao="";
        }
        document.getElementById("show").innerHTML="现在是："+now.getFullYear()+"年"+yue+(now.getMonth()+1)+"月"+tian+now.getDate()+"日 星期"+xq+" "+shi+now.getHours()+":"+fen+now.getMinutes()+":"+miao+now.getSeconds();
    // timer=setTimeout("times()",1000);
    }
  times();
   timer=setInterval("times()",1000);
    document.getElementById("btn").onclick=function(){
    // clearTimeout(timer);
      clearInterval(timer);
    }
</script>
</body>
</html>

效果：
在这里插入图片描述 4、验证码
代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        span{
            width:70px;
            height:20px;
            line-height: 20px;
            display: inline-block;
            background:url("images/yz0.jpg");
            text-align: center;
            font-weight: bolder;
            letter-spacing: 5px;
        }
    </style>
</head>
<body>
<input type="text" placeholder="请输入验证码" onblur="test()"/><span id="show"></span><!--<button id="btn">换一个</button>-->
<strong id="ts"></strong>
<script>
    function yzm(){
        var one=parseInt(Math.random()*10);
        var two=parseInt(Math.random()*10);
        var three=parseInt(Math.random()*10);
        var four=parseInt(Math.random()*10);
        document.getElementById("show").innerHTML=""+one+""+two+""+three+""+four;
        document.getElementById("show").style.background="url(images/yz"+one+".jpg)";
    }
    yzm();
    document.getElementById("show").onclick=yzm;
    function test(){
        var ones=parseInt(document.getElementsByTagName("input")[0].value);
        var seconder=parseInt(document.getElementById("show").innerText);
        if(ones.length==0){
            document.getElementById("ts").innerHTML="请输入验证码！";
            yzm();
        }else if(parseInt(ones)!=seconder){
            document.getElementById("ts").innerHTML="验证码无效，请重新输入！";
            yzm();
        }else{
            document.getElementById("ts").innerHTML="验证成功！";
        }
    }
</script>
</body>
</html>

效果：
在这里插入图片描述
三、总结
JS是前端开发的核心，所以要打好基础才能为后面的学习提供知识支持，边学习多讨论。老师说的好，在讨论中有些隐藏的问题就会浮现出来，这样才能提高学习的效率，另外对将来的面试阐述也是一个锻炼，养成良好的习惯，这对自己是一个受益终生的事情。

Always_Love

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript基础（2）

       上周进行了JS的进一步学习，学习了几个对象，以及数组的操作还有冒泡事件，下面就做一下总结。一、知识点内置对象number对象：.toString(进制数) 转换成不同进制数.toFixed(小数位数) 保留小数倍数string对象.length 字符串长度indexOf()查找字符串返回字符串位...
复制链接

扫一扫