C1任务四

2023-12-15 03:32
文章标签 任务 c1

本文主要是介绍C1任务四,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

任务点一:

生成图片

源代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #box{
                width:400px;
                height: 600px;
                border: 1px solid #000000;
                border-radius: 10px;
                margin: 100px auto;
            }
            
            #img img{
                width: 400px;
                height: 600px;
                border-radius: 10px;
            }
            
            #close img{
                position: absolute;
                width: 30px;
                height: 30px;
                margin-top: -618px;
                margin-left: 384px;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <div id="img">
                <img src="img/王冲.jpg" />
            </div>
            <div id="close">
                <img src="img/关%20%20闭.png" />
            </div>
        </div>
    </body>
    <script>
        var close = document.getElementById("close");
        var box = document.getElementById("box");
        
        close.onclick = function(){
            box.style.display = "none";
        }
    </script>
</html>

 效果图如下:

轮播图

源代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #box{
                width: 600px;
                height: 400px;
                margin: 100px auto;
            }
            
            img{
                width: 600px;
                height: 400px;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <img src="img/h1.jpg" id="img"/>
        </div>
    </body>
    <script>
        var timeId = "";
        var index = 1;
        var img = document.getElementById("img");
        
        timeId = setInterval(function(){
            index++;
            if(index>5) index =1;
            img.src = "img/h"+index+".jpg";
        },3000);
    </script>
</html>

效果图如下:

此处略去剩余图片

img文件目录如下

多级联动菜单:

源代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            
        </style>
    </head>
    <body>
        <select id="s1">
            <option index="1">河南</option>
            <option index="2">河北</option>
        </select>
        <select id="s2">
            <option index="1">南阳</option>
            <option index="2">郑州</option>
        </select>
        <select id="s3">
            <option index="1">南阳1区</option>
            <option index="2">南阳2区</option>
        </select>
    </body>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        var s1 = $("#s1");
        var s2 = $("#s2");
        var s3 = $("#s3");
        
        var index1 = 1;
        var index2 = 2;
        
        var ny = ["南阳1区","南阳2区"];
        var zz = ["郑州1区","郑州2区"];
        var hn = [{
                    shi:"南阳",
                    next:ny
                },{
                    shi:"郑州",
                    next:zz
                }];
        
        var ts =  ["唐山1区","唐山2区"];
        var sjz = ["石家庄1区","石家庄2区"];
        var hb = [{
                    shi:"唐山",
                    next:ts
                },{
                    shi:"石家庄",
                    next:sjz
                }];
                
        var sheng = [{
                    shi:"河南",
                    next:hn
                },{
                    shi:"河北",
                    next:hb
                }];
        
        s1.change(function(){
            var options2 = $("#s2 option");
            var options3 = $("#s3 option");
            
            var num1 = s1.get(0).selectedIndex;
            var num2 = s2.get(0).selectedIndex;
            
            for(var i = 0;i < options2.length;i++){
                options2.eq(i).text(sheng[num1].next[i].shi);
            }
            
            for(var i = 0;i < options3.length;i++){
                options3.eq(i).text(sheng[num1].next[num2].next[i]);
            }
        });
        
        s2.change(function(){
            var options2 = $("#s2 option");
            var options3 = $("#s3 option");
            
            var num1 = s1.get(0).selectedIndex;
            var num2 = s2.get(0).selectedIndex;
            
            for(var i = 0;i < options2.length;i++){
                options2.eq(i).text(sheng[num1].next[i].shi);
            }
            
            for(var i = 0;i < options3.length;i++){
                options3.eq(i).text(sheng[num1].next[num2].next[i]);
            }
        });
    </script>
</html>

 效果图如下:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

这篇关于C1任务四的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/494956

相关文章

FreeRTOS学习笔记(二)任务基础篇

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、 任务的基本内容1.1 任务的基本特点1.2 任务的状态1.3 任务控制块——任务的“身份证” 二、 任务的实现2.1 定义任务函数2.2 创建任务2.3 启动任务调度器2.4 任务的运行与切换2.4.1 利用延时函数2.4.2 利用中断 2.5 任务的通信与同步2.6 任务的删除2.7 任务的通知2

Flink任务重启策略

概述 Flink支持不同的重启策略,以在故障发生时控制作业如何重启集群在启动时会伴随一个默认的重启策略,在没有定义具体重启策略时会使用该默认策略。如果在工作提交时指定了一个重启策略,该策略会覆盖集群的默认策略默认的重启策略可以通过 Flink 的配置文件 flink-conf.yaml 指定。配置参数 restart-strategy 定义了哪个策略被使用。常用的重启策略: 固定间隔 (Fixe

第49课 Scratch入门篇:骇客任务背景特效

骇客任务背景特效 故事背景:   骇客帝国特色背景在黑色中慢慢滚动着! 程序原理:  1 、 角色的设计技巧  2 、克隆体的应用及特效的使用 开始编程   1、使用 黑色的背景: ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/7d74c872f06b4d9fbc88aecee634b074.png#pic_center)   2

AsyncTask 异步任务解析

1:构建AsyncTask 子类的回调方法: A:doInBackground:   必须重写,所有的耗时操作都在这个里面进行; B: onPreExecute:     用户操作数据前的调用; 例如:显示一个进度条 等 ; C: onPostExecute:    当doInBackground 执行完成后;会自动把数据传给onPostExecute方法;也就是说:这个方法是处理返回的数据的方法

使用Node-API进行异步任务开发

一、Node-API异步任务机制概述         Node-API异步任务开发主要用于执行耗时操作的场景中使用,以避免阻塞主线程,确保应用程序的性能和响应效率。         1、应用场景: 文件操作:读取大型文件或执行复杂的文件操作时,可以使用异步工作项来避免阻塞主线程。网络请求:当需要进行网络请求并等待响应时,可以使用异步工作项来避免阻塞主线程,从而提高应用程序的响应性能。数据库操

探索Invoke:Python自动化任务的瑞士军刀

文章目录 探索Invoke:Python自动化任务的瑞士军刀背景:为何选择Invoke?`invoke`是什么?如何安装`invoke`?简单的`invoke`库函数使用方法场景应用:`invoke`在实际项目中的使用场景一:自动化测试场景二:代码格式化场景三:部署应用 常见问题与解决方案问题一:命令执行失败问题二:权限不足问题三:并发执行问题 总结 探索Invoke:P

RISC-V (十)任务同步和锁

并发与同步 并发:指多个控制流同时执行。         多处理器多任务。一般在多处理器架构下内存是共享的。           单处理器多任务,通过调度器,一会调度这个任务,一会调度下个任务。  共享一个处                                理器一个内存。                 单处理器任务+中断: 同步: 是为了保证在并发执行的环境中各个控制流可

145-Linux权限维持Rootkit后门Strace监控Alias别名Cron定时任务

参考 【权限维持】Linux&Rootkit后门&Strace监控&Alias别名&Cron定时任务_alias ls='alerts(){ ls $* --color=auto;python -c "-CSDN博客 参考 FlowUs 息流 - 新一代生产力工具 权限维持-Linux-定时任务-Cron后门 利用系统的定时任务功能进行反弹Shell 1、编辑后门反弹shell脚本

环形定时任务 原理

业务背景 在稍微复杂点业务系统中,不可避免会碰到做定时任务的需求,比如淘宝的交易超时自动关闭订单、超时自动确认收货等等。对于一些定时作业比较多的系统,通常都会搭建专门的调度平台来管理,通过创建定时器来周期性执行任务。如刚才所说的场景,我们可以给订单创建一个专门的任务来处理交易状态,每秒轮询一次订单表,找出那些符合超时条件的订单然后标记状态。这是最简单粗暴的做法,但明显也很low,自己都下不去手写

Spring 创建定时任务

我们在编写Spring Boot应用中经常会遇到这样的场景,比如:我需要定时地发送一些短信、邮件之类的操作,也可能会定时地检查和监控一些标志、参数等。 创建定时任务 在Spring Boot中编写定时任务是非常简单的事,下面通过实例介绍如何在Spring Boot中创建定时任务,实现每过5秒输出一下当前时间。 在Spring Boot的主类中加入@EnableScheduling注解,启用定