JavaScript程序设计复习（编程题）

晚晚昨晚吃晚饭很晚睡说晚

已于 2022-06-19 21:46:11 修改

阅读量592

点赞数 6

分类专栏： JavaScript 文章标签： javascript 前端开发语言

于 2022-06-13 18:59:37 首次发布

本文链接：https://blog.csdn.net/qq_55786319/article/details/125253759

版权

这篇博客回顾了JavaScript程序设计中的多个练习题目，包括改变元素样式、动态显示时间、表单数据处理、数组操作以及排序算法等。通过解决这些实际问题，深化了对JavaScript作为前端开发语言的理解和应用。

摘要由CSDN通过智能技术生成

1、设置两个按钮，点击即可改变标签p的样式，实现点击两个按钮切换p的层叠样式。

在这里插入图片描述

   <style>
        .sty01{
   
            color:brown;
            background-color: pink;
            font-size: 1.4em;
        }
        .sty02{
   
            color:aqua;
            background-color: gray;
            font-size: 20px;
        }
    </style>
    <script>
        function change01(){
   
            var p1=document.getElementById('p1');
            p1.setAttribute('class','sty01');//增加类属性
        }
        function change02(){
   
            var p1=document.getElementById('p1');
            p1.setAttribute('class','sty02');
        }
    </script>
</head>
<body>
    <p id="p1">我是一个段落p,我想被改变</p>
    <p><input type="button" value="样式1" onclick="change01()">
    &nbsp;&nbsp;&nbsp;&nbsp;
    <input type="button" value="样式2" onclick="change02()"></p>
</body>

2、实现动态显示本地时间

在这里插入图片描述

    <script>
        setInterval(function(){
   
            var date=new Date();
            var p1=document.getElementById('p1');
            p1.innerHTML=date.toLocaleDateString()+" &nbsp;"+date.toLocaleTimeString();
        },1000);
    </script>
</head>
<body>
    <p id="p1"></p>
</body>

3、获取表单控件里的值

<body>
    <form action="" name="myform" id="formid">
        <p>用户名：<input type="text" name="username"></p>
        <p>密&nbsp;码：<input type="password" name="password1"></p>
        <p>确认密码：<input type="password" name="password2"></p>
        <p>性别：<input type="radio" name="radiosex" id="boy" value="男">男
                <input type="radio" name="radiosex" id="girl" value="女">女</p>
        <p>爱好：<input type="checkbox" name="h1" value="看书">看书
        <input type="checkbox" name="h1" value="打篮球">打篮球
        <input type="checkbox" name="h1" value="画画">画画
        <input type="checkbox" name="h1" value="打游戏">打游戏</p>
        <p>所在地区：<select name="name" size="3" multiple>
            <option value="北京">北京</option>
            <option value="杭州">杭州</option>
            <option value="天津">天津</option>
        </select></p>
        <p><input type="button" value="提交" id="sub"><input type="reset" value="重置" id="ret"></p>
    </form>
        <p id="p1"></p>
    <script>
        var sub=document.getElementById('sub');
        sub.onclick=function(){
   
        var f=document.myform;
        var p1=document.getElementById('p1');
        p1.innerHTML=f.username.value+"<br>"+f.radiosex.value+"<br>"+f.name.value+"<br>";
        va