JavaScript初识-笔记之3个小练习

最新推荐文章于 2024-05-14 23:26:36 发布

红烧兔纸

最新推荐文章于 2024-05-14 23:26:36 发布

阅读量1.8k

点赞数 2

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_39934520/article/details/101264067

版权

JavaScript 专栏收录该内容

14 篇文章 5 订阅

订阅专栏

3个小练习

打印倒正金字塔直线
验证邮箱地址
输入提示器

打印倒正金字塔直线

<body style="text-align:center;">
<script  type="text/javascript">//style表示样式，text-align为文字位置属性，center表居中。text-align:center一般是用来规定文本和内联元素的水平居中对齐。img是内联元素
    document.write("<h3>打印倒正金字塔直线</h3>");
    var i= 61;
    while(i>0)//i循环7次,分别是61,51,41,31,21,11,1
    {
        document.write("<hr width=" + i+"%/>");//<hr> 标签定义 HTML 页面中的主题变化（比如话题的转移），并显示为一条水平线。<hr> 元素被用来分隔 HTML 页面中的内容（或者定义一个变化）。  width是标签<hr>的宽度属性，%是width的值。HTML5 不支持 <hr> align 属性。请使用 CSS 代替。
        i=i-10;
    }
    for(var j=11;j<70;j=j+10){//j循环6次
        document.write("<hr width=" + j+"%/>");
    }

</script>
</body>

验证邮箱地址：

定义一个有参函数来验证邮箱地址的有效性。
使用prompt()方法输入地址，默认值是susan@sohu.com
邮箱地址输入正确，显示弹出框
正确的邮箱地址必须包含"@"和"."，输入不正确会有提示框
邮箱地址不能为空。

要求所示图：

<script type="text/javascript">
    function validateEmail(email){//变量email=prompt("请输入正确的邮箱地址","susan@sohu.com")
        var indexs=email.indexOf("@");//indexOf(str,index)方法，查找指定字符串首次出现的位置，从0开始查找
        if(email.length>0){
            if(indexs==-1|| email.indexOf(".")==-1)//-1代表查找不到
			//if(email.indexOf("@"==-1 ||email.indexOf(".")==-1)) 这种写法也可以
                alert("邮箱地址必须包含@和.");
            else{
                var name=email.substring(0,indexs);//substring(index1,index2)返回index1-2之间的字符串，但不包括index2对应的字符。在这里是变量email对应的字符从0位置开始到@位置结束，但不包括@这个字符
                alert("邮箱地址正确，邮箱名称是："+name);
            }
        }else{
            alert("邮箱不能为空！");
        }
    }
    validateEmail(prompt("请输入正确的邮箱地址","susan@sohu.com"));//有参函数
</script>

这个练习还可以进一步进行拓展，比如说，如果输入错误，怎样可以在提示框后，重新输入，或者说如何在提示错误后立马进行重新输入。（待完成）！！！

输入提示器

输入“星期一”时，弹出“新的一周开始了”。
输入“星期二”，“星期三”，“星期四”时，弹出“努力工作”。
输入“星期五”时，弹出“明天就是周末了”。
输出其他内容，弹出“放松的休息”。

<script type="text/javascript">

    function showDay(weekday){
        switch(weekday){
            case "星期一":
                alert("新的一周开始了");
                break;
            case "星期五":
                alert("明天就是周末了");
                break;
            case "星期二":
            case "星期三":
            case "星期四":
                alert("努力工作");
                break;
            default:
                alert("放松的休息");
                break;
        }
    }
	
	showDay(prompt('请输入今天是星期几：','星期一'));
</script>

红烧兔纸

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
JavaScript初识-笔记之3个小练习

3个小练习打印倒正金字塔直线验证邮箱地址输入提示器打印倒正金字塔直线 <body style="text-align:center;"><script type="text/javascript">//style表示样式，text-ali...
复制链接

扫一扫