JavaScript表单对象程序设计训练 Day9

最新推荐文章于 2024-07-05 16:41:23 发布

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

最新推荐文章于 2024-07-05 16:41:23 发布

阅读量304

点赞数

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

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

版权

学习打卡同时被 2 个专栏收录

71 篇文章 2 订阅

订阅专栏

JavaScript

14 篇文章 0 订阅

订阅专栏

1、设计一个表单，通过选择下拉框选择不同的图片，并将选择的图片显示在文本框中。

在这里插入图片描述
这个我忘记使用form了

<body onload="loaditem()">
    <select name="" id="s1" onchange="selectitem()"></select>
    <p ><input type="text" multiple style="width:200px;height:300px"></p>
    <script>
        var img=['image/1.jpg','image/2.jpg','image/3.jpg','image/4.jpg','image/5.jpg','image/6.jpg','image/7.jpg'];
        var imgtext=['图片1','图片2','图片3','图片4','图片5','图片6','图片7'];
        function loaditem(){
            var s1=document.getElementById('s1');
            for(var i=0;i<img.length;i++){
                var option=document.createElement('option');
                var imgitem=document.createTextNode(imgtext[i]);
                option.appendChild(imgitem);
                s1.appendChild(option);
            }
        }
        function selectitem(){
            var ninput=document.querySelector('input');
            var s1=document.getElementById('s1');
            for(var i=0;i<imgtext.length;i++){
                if(s1[i].selected){
                    ninput.style.backgroundImage="url("+img[i]+")";
                    ninput.style.backgroundSize='cover';
                }
            }
        }
    </script>
</body>

另一种方法：
在这里插入图片描述

<body>
    <center>
        <h2>请选择图片</h2>
        <hr width="300">
        <br>
        <script>
            var images = new Array("image/1.jpg","图形一",
                                   "image/2.jpg","图形二",
                                   "image/3.jpg","图形三",
                                   "image/4.jpg","图形四");
            function displayImage(){
                var IFname = document.f.s.options[document.f.s.selectedIndex].value;
                document.im.src = IFname;
            }
            document.writeln('<img name = "im" src="',images[0],'" border = 2 width = 200 height = 300>');
            document.writeln('<form name="f">');
            document.writeln('<p><select name="s" onChange="displayImage()">');
            document.write('<option selected value="',images[0],'">');
            document.writeln(images[1],'</option>');
            for(i=2;i<images.length;i+=2){
                document.writeln('<option value="',images[i],'">',images[i+1],'</option>'); 
            }
            document.writeln('</select></p></form>');
        </script>
    </center>
</body>

2、设计一个包含用户名、密码、重复密码、年龄等栏目的表单，并对输入的密码和重复密码进行一致性验证和保证输入的年龄是数字进行验证。

在这里插入图片描述

   <script>
        function isValidage(s){
            var i,ch,age;
            for(i=0;i<s.length;i++){
                ch=s.charAt(i);
                if(ch<'0'||ch>'9'){
                    alert('请输入数字!');
                    return false;
                }
            }
            return true;
        }
        function checkAge(){
            var f=document.myForm;
            if(isValidage(f.age.value))
                alert('您输入的年龄是'+f.age.value);
            else{
                f.age.focus();
                f.age.select();//选取文本框中的值
            }
            // return false;
        }
        function checkpwd(){
            var p1=document.myForm.pwd1.value;
            var p2=document.myForm.pwd2.value;
            if(p1!==p2){
                alert('两次密码输入不一致');
            }
        }
    </script>
</head>
<body>
    <form action="" name="myForm">
        <p>用户名：<input type="text"></p>
        <p>密码：<input type="password" name="pwd1"></p>
        <p>重复密码：<input type="password" name="pwd2" onchange="checkpwd()"></p>
        <p>年龄：<input type="text" name="age" onchange="checkAge()"></p>
    </form>
</body>

3、设计一个含有文本框的表单，实现当鼠标在页面上移动时，鼠标坐标会显示在文本框中。

在这里插入图片描述

    <script>
        function show(){
            document.getElementById('showxy').value='X='+window.event.x+',Y='+window.event.y;
        }
        document.onmousemove=show;
    </script>
</head>
<body>
    <form action="">
        <input type="text" id="showxy">
    </form>
</body>