web作业

业界资讯 2023-06-05 09:12:06 阅读次数: 0

1.使用js实现的点击删除作业



<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>hello world~!!</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    <style>
        *{
      
      margin: 0;padding: 0;}
        body{
      
      font:16px/1.5 'Microsoft Yahei';}
        .clearfix:after{
      
      content:'';display:block;clear:both;}
        .fl{
      
      float:left;}
        .fr{
      
      float:right;}
        #wrap{
      
      
            height:580px;
            background:linear-gradient(180deg,#8CC1DE,#F9A886);
            overflow:hidden;
        }
        #wrap .container{
      
      
            width:800px;
            margin:50px auto;
        }
        #wrap .container .target{
      
      
            width:50%;
            background-color: #fff;
            line-height:2;
            min-height:550px;
        }
        #wrap .container .target p{
      
      
            margin:50px 20px 0;
            color:#F9A886;
        }
        #wrap .container .target a{
      
      
            background-color: #fff;
            text-decoration: none;
            color:#000;
        }
        #wrap .container .target a:hover{
      
      
            color:red;
        }
        #wrap .container .target ol li{
      
      
            list-style: none;
            font-style:normal;
            display: inline-block;
            margin:10px 0 0 20px ;
            padding:0 5px;
            color:#999;
            border:1px solid #ccc;

        }
        #wrap .container .target ol li:hover i{
      
      
            color:red;
            cursor:pointer;

        }
        #wrap .container .target ol li span{
      
      
            padding-right:5px;
        }
        #wrap .container .target ol li i{
      
      
            padding:0 5px;
            border-left:1px solid #ccc;

        }
        #wrap .container .show{
      
      
            width:50%;
            min-height:550px;
            background-color: rgba(0,0,0,0.5);

        }
        #wrap .container .show ul{
      
      
            margin-top:50px;

        }
        #wrap .container .show ul li{
      
      
            list-style: none;
            font-style:normal;
            display: inline-block;
            margin:20px;
            padding:5px;
            border:1px solid #ccc;
            color:#fff;

        }


    </style>
</head>
<body>
<div id="wrap">
    <div class="container clearfix">
        <div class="target fl">
            <p> 热门目的地：
                <a href="javascript:void(0);">马来西亚</a>
                <a href="javascript:void(0);">泰国</a>
                <a href="javascript:void(0);">三亚</a>
                <a href="javascript:void(0);">新西兰</a>
                <a href="javascript:void(0);">云南</a>
            </p>
            <ol class='clearfix' onselectstart = 'return false'>


            </ol>

        </div>
        <div class="show fr">
            <ul class='clearfix'>

            </ul>
        </div>

    </div>

</div>

</body>
<script>
    var aA = document.getElementsByTagName('a');
    var OL= document.getElementsByTagName('ol')[0];
    var tar_li= OL.getElementsByTagName('li');
    var Ul= document.getElementsByTagName('ul')[0];
    var show_li= Ul.getElementsByTagName('li');
    var new_obj;
    for(var i=0;i<aA.length;i++){
      
      
        aA[i].onclick = function(){
      
      

            if(Ul.children){
      
      
                for(var i=0;i<show_li.length;i++){
      
      
                    if(show_li[i].innerHTML.match(this.innerHTML)){
      
      
                        console.log('ok');
                        return false;
                    }
                }
            }
            var new_span = document.createElement('span');
            new_span.innerHTML = this.innerHTML;
            //console.log(this.innerHTML );
            var new_i = document.createElement('i');
            new_i.innerHTML = 'x';
            //添加事件
            new_i.onclick = cancel;
            //var val = this.value;
            var new_li = document.createElement('li');
            new_li.className = 'fl';
            new_li.appendChild(new_span);
            new_li.appendChild(new_i);
            OL.appendChild(new_li);
            new_obj = new_li.cloneNode(true);
            var i = new_obj.firstElementChild.nextElementSibling;
            new_obj.removeChild(i);
            Ul.appendChild(new_obj);
            // console.log(new_obj);
        }
    }
    function cancel(){
      
      
        // console.log(this.previousElementSibilings.innerHTML)
        for(var i=0;i<show_li.length;i++){
      
      
            if(show_li[i].innerHTML.match(this.previousElementSibling.innerHTML) ){
      
      
                //console.log(i);
                show_li[i].parentNode.removeChild(show_li[i]);
                this.parentNode.parentNode.removeChild(this.parentNode);
            }

        }
    }

</script>
</html>

2.小球弹动



<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="keywords" content="关键词">
    <meta name="description" content="描述">
    <meta name="author" content="Fly老师">
    <style>
        body{
      
      font-family: "Microsoft YaHei",serif;}
        body,dl,dd,p,h1,h2,h3,h4,h5,h6{
      
      margin:0;}
        ol,ul,li{
      
      margin:0;padding:0;list-style:none;}
        img{
      
      border:none;}

        #wrap{
      
      
            position: absolute;
            z-index: 1;
            left: 200px;
            top: 200px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background:radial-gradient(#fff 0%,#f00 100%);
        }
        #shadow{
      
      
            position:absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        #shadow p{
      
      
            position: absolute;
            width: 35px;
            height: 35px;
            background-color: pink;
            transform-origin:center center;
            transform: scale(1);
            border-radius: 50%;
        }
    </style>
</head>
<body>
<div id="wrap"></div>
<div id="shadow"></div>

<script>

    (function(){
      
      
        //获取小球以及初始left，top
        let oWrap = document.getElementById("wrap");
        let oShadow = document.getElementById("shadow");
        let sL = oWrap.offsetLeft;
        let sT = oWrap.offsetTop;

        //运动step
        let stepX = 7,
            stepY = 10;

        //获取浏览器可视区的宽高,以及更新事件
        let maxLeft,maxTop;
        window.onresize = (function s(){
      
      
            maxLeft = window.innerWidth - oWrap.offsetWidth;
            maxTop = window.innerHeight - oWrap.offsetHeight;
            return s;
        })();


        !function m(){
      
      
            sL += stepX;
            sT += stepY;

            //水平撞墙，方向取反
            if( sL >= maxLeft ){
      
      
                sL = maxLeft;
                stepX = -stepX;
            }
            if(sL <= 0){
      
      
                sL = 0;
                stepX = -stepX;
            }

            //垂直撞墙，方向取反
            if( sT >= maxTop ){
      
      
                sT = maxTop;
                stepY = -stepY;
            }
            if( sT <= 0 ){
      
      
                sT = 0;
                stepY = -stepY;
            }

            oWrap.style.left = sL+'px';
            oWrap.style.top = sT+'px';

            createShadow(sL,sT);

            requestAnimationFrame(m);
        }();

        //生成拖尾
        function createShadow(left,top){
      
      
            let oP = document.createElement("p");
            oP.style.left = left+7+'px';
            oP.style.top = top+7+'px';
            oP.style.transition = "transform .8s,opacity .8s";
            //oP.style.backgroundColor = randomColor();
            setTimeout(()=>{
      
      
                oP.style.transform = "scale(0.3)";
                oP.style.opacity = "0";
            });
            setTimeout(()=>{
      
      oShadow.removeChild(oP)},800)
            oShadow.appendChild(oP);
        }
        /*//随机颜色
        function randomColor(){
            let r = Math.floor(Math.random()*256),
                g = Math.floor(Math.random()*256),
                b = Math.floor(Math.random()*256);
            return `rgb(${r},${g},${b})`;
        }*/


    })();


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

3.个人简历


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简历</title>
    <style>
        * {
      
      
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body {
      
      
            font-family: Arial, Helvetica, sans-serif;
            font-size: 16px;
            line-height: 1.6;
            background-image: url(https://img0.baidu.com/it/u=976631688,3773003958&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1685379600&t=b2271664dbcb1216fe1e56f396ba4488);
            background-repeat: no-repeat;
            background-size: cover;
        }
        .container {
      
      
            max-width: 800px;
            margin: auto;
            padding: 20px;
        }
        h1, h2 {
      
      
            margin-bottom: 10px;
            text-align: center;
        }
        h1 {
      
      
            font-size: 36px;
        }
        h2 {
      
      
            font-size: 24px;
        }
        p {
      
      
            margin-bottom: 10px;
        }
        ul {
      
      
            list-style: none;
        }
        li {
      
      
            margin-bottom: 5px;
        }
        .section {
      
      
            margin-top: 40px;
        }
        .section:first-child {
      
      
            margin-top: 0;
        }
        .section:last-child {
      
      
            margin-bottom: 0;
        }
        .left {
      
      
            float: left;
            width: 70%;
        }
        .right {
      
      
            float: right;
            width: 30%;
            text-align: center;
        }
        .clearfix::after {
      
      
            content: "";
            display: table;
            clear: both;
        }
        .education {
      
      
            margin-top: 30px;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>个人简历</h1>
        </header>
        <section class="section">
            <div class="left">
                <h2>基本信息</h2>
                <p><strong>姓名：</strong>张三</p>
                <p><strong>性别：</strong>男</p>
                <p><strong>出生日期：</strong>1990年1月1日</p>
                <p><strong>联系电话：</strong>13800138000</p>
                <p><strong>邮箱：</strong>[email protected]</p>
            </div>
            <div class="right">
                <img src="https://img0.baidu.com/it/u=4060770951,4069855872&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1685379600&t=6a84b22b193cd4880d4f424cae290374" alt="头像" width="150" height="150">
            </div>
            <div class="clearfix"></div>
        </section>
        <section class="section">
            <div class="left">
                <h2>个人简介</h2>
                <p>我是一名计算机科学与技术专业的本科生，具有扎实的计算机基础知识，特别是在算法和数据结构方面较为熟练。拥有较强的编程能力，能够熟练使用 C++、Python 等编程语言，了解常用的 Web 开发技术。此外，我还具有严谨的逻辑思维能力和良好的团队合作意识，乐于沟通与分享。</p>
            </div>
            <div class="clearfix"></div>
        </section>
        <section class="section">
            <div class="left">
                <h2>教育背景</h2>
                <ul class="education">
                    <li>
                        <h3>XX大学</h3>
                        <p>计算机科学与技术专业</p>
                        <p>本科，2018-2022</p>
                    </li>
                </ul>
            </div>
            <div class="clearfix"></div>
        </section>
        <section class="section">
            <div class="left">
                <h2>技能</h2>
                <ul>
                    <li>熟练掌握 C++、Python 等编程语言</li>
                    <li>掌握常用的 Web 开发技术，如 HTML、CSS、JavaScript、jQuery 等</li>
                    <li>了解常用的数据库，如 MySQL、MongoDB 等</li>
                    <li>熟悉常用的算法和数据结构，如排序、查找、树、图等</li>
                    <li>了解 Linux 操作系统</li>
                </ul>
            </div>
            <div class="clearfix"></div>
        </section>
        <section class="section">
            <div class="left">
                <h2>项目经历</h2>
                <ul>
                    <li>
                        <h3>XX 项目</h3>
                        <p>该项目使用了 C++ 编写，实现了一种基于特征点匹配和 RANSAC 算法的图像拼接技术。本人主要负责了该技术的算法调研、实现和优化，取得了较好的效果。</p>
                    </li>
                </ul>
            </div>
            <div class="clearfix"></div>
        </section>
    </div>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_55671900/article/details/130913162
今日推荐
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
周排行
static方法和非static方法的区别（java）
如何查找计算机专业paper
java.lang.ClassFormatError: Incompatible magic value 0 in class file com/sitecha
跳跃游戏II
stm32_之【建立工程】
TeaWeb v0.0.9 发布，统计底层优化、主机监控功能改进
事件分发 -----控制字体大小
JavaScript DOM练习（动态表格添加） December 25，2019
JSF Scope & CDI
实现从零搭建一个登录注册页面（附源代码）
每日归档
更多
2024-05-19(0)
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022