首页 > 其他分享 >6.7总结

6.7总结

时间:2024-06-09 20:33:20浏览次数:11  
标签:总结 滚动 6.7 var const dt document scroll

第三版,差不多是最后一个版本了

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

    <script type="text/javascript" src="js/rem.js"></script>
    <link rel="stylesheet" href="css/style.css">
    <link rel="icon" href="/src/views/map1/images/image.png">
    <link rel="stylesheet" href="css/comon0.css">
    <link rel="stylesheet" href="css/bubble.css">
    <title>生态卫士</title>

    <style>
        .scroll-container {
            height: auto;
            overflow: hidden;
            position: relative;
        }

        .scroll-news {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            animation: scroll-up 50s linear infinite;
        }

        @keyframes scroll-up {
            from {
                top: 0;
            }

            to {
                top: -100%;
            }
        }
    </style>
</head>

<body style="visibility: hidden;">
    <div class="container-flex" tabindex="0" hidefocus="true">
        <div class="box-left">
            <div class="left-top">
                <div class="current-num">
                    <div>当前数据来源</div>
                    <p style="font-size: medium;">物种2000中国节点</p>
                    <p style="font-size: medium;">植物科学数据中心</p>
                </div>
            </div>
            <div class="left-center">
                <div class="title-box">
                    <h6>入侵等级分析</h6>
                </div>
                <div class="chart-box pie-chart">
                    <div id="pie_fanzui" style="width:100%;"></div>
                </div>
            </div>
            <div class="left-bottom" class="select">
                <div class="title-box">
                    <h6>入侵物种种类</h6>
                </div>
                <div class="chart-box">
                    <table class="table3">
                        <thead>
                            <tr>
                                <th>入侵等级</th>
                                <th>数量</th>
                                <th>详情</th>
                                <th>备注</th>
                                </th>
                            </tr>
                        </thead>
                        <tbody id="tList">
                            <tr>
                                <td>一级</td>
                                <td>38</td>
                                <td><a href="https://www.iplant.cn/ias/splist?exkey=6E9C70B741D00BE5B37A064636CBB134CB17A4E8AC1C26A8E4C0838DE9A792F576B1468B5435BFCAF13EC0DE19F2CD27C5736CE00B77A6F2"
                                        target="_blank">查看</a></td>
                                <td>恶意入侵</td>
                            </tr>
                            <tr>
                                <td>二级</td>
                                <td>49</td>
                                <td><a href="https://www.iplant.cn/ias/splist?exkey=6E9C70B741D00BE5B37A064636CBB1347C19519A7C52E460DD34756F632BBF118983B9C1E053075B1311F6468E4CA3500F8A6734635F80D2"
                                        target="_blank">查看</a></td>
                                <td>严重入侵</td>
                            </tr>
                            <tr>
                                <td>三级</td>
                                <td>69</td>
                                <td><a href="https://www.iplant.cn/ias/splist?exkey=6E9C70B741D00BE5B37A064636CBB13420FFF1B223C1513CF1CDEB0B1FF9365151F1F790197FD3754C2A265F008016E94EADA5F35A6C5397"
                                        target="_blank">查看</a></td>
                                <td>局部入侵</td>
                            </tr>
                            <tr>
                                <td>四级</td>
                                <td>61</td>
                                <td><a href="https://www.iplant.cn/ias/splist?exkey=6E9C70B741D00BE5B37A064636CBB134FAE44317C29D51DAA7BD6FD5BEE6CD318731B04D84C6EAB900687CBE2870F553CFCF8DFF877DA391"
                                        target="_blank">查看</a></td>
                                <td>一般入侵</td>
                            </tr>

                            <tr>
                                <td>其他</td>
                                <td>304</td>
                                <td><a href="https://www.iplant.cn/ias/splist?exkey=6E9C70B741D00BE5B37A064636CBB1345C601267350001389F8A375B5329B01D50D8A24A4BE829557081230F98BE7966"
                                        target="_blank">查看</a></td>
                                <td>有待观察</td>
                            </tr>
                        </tbody>
                    </table>

                </div>
            </div>
        </div>
        <div class="box-center">
            <div class="center-top">
                <h1><img src="/public/logo.png" style="width:55px;margin-right:20px;" />物种多样性数据分析</h1>
            </div>
            <div class="center-center">
                <div class="weather-box">
                    <div class="data">
                        <p class="time" id="time">00:00:00</p>
                        <p id="date"></p>
                    </div>
                    <div class="weather">
                        <img id="weatherImg" src="images/weather/weather_img01.png" alt="">
                        <div id="weather">
                            <p class="active">多云</p>
                            <p>16-22℃</p>
                            <p>天津市和平区</p>
                        </div>
                    </div>
                </div>
                <img src="images/line_bg.png" alt="">
                <div class="select-box" style="height: 0.3rem;">
                    <div data-type="2">
                        <div class="select" tabindex="0" hidefocus="true">
                            <p style="color:#FFFF00;font-weight:bold;">NO.1广东: 294种</p>
                            <p style="color:#7FFF00;font-weight:bold;">NO.2云南: 288种</p>
                            <p style="color:#7FFFD4;font-weight:bold;">NO.3台湾: 287种</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="center-bottom">
                <div class="chart-box">
                    <div id="china_map" style="width:100%;height:95%;"></div>
                </div>
            </div>
        </div>
        <div class="box-right">
            <div class="right-top">
                <div class="title-box">
                    <h6 id="barTitle">物种分布</h6>
                </div>
                <div class="chart-box">
                    <div class="boxall" style="height: 3.2rem">
                        <div class="inner">
                            <div class="boxnav" style="height: 3.0rem">
                                <div class="tagcloud">
                                    <a class="b01 co01" href="#">身体霸凌</a>
                                    <a class="b02 co02" href="#">没有朋友</a>
                                    <a class="b03 co03" href="#">言语霸凌</a>
                                    <a class="b04 co04" href="#">外貌</a>
                                    <a class="b03 co05" href="#">男生居多</a>
                                    <a class="b01 co02" href="#">常感到孤独</a>
                                    <a class="b02 co03" href="#">11~14岁居多</a>
                                    <a class="b03 co04" href="#">霸凌事件频发</a>
                                    <a class="b04 co05" href="#">部分地区集中</a>
                                    <a class="b01 co03" href="#">不敢举报</a>
                                    <a class="b02 co04" href="#">隐蔽性</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right-center">

                <div class="title-box">
                    <h6>相关文献</h6>
                </div>
                <div class="chart-box pie-chart">
                    <div class="boxall" style="height: 2.4rem; width: 100%;">
                        <div class="allnav">
                            <div class="scroll-container">
                                <div class="scroll-news" id="news-container"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right-bottom">
                <div class="title-box">
                    <p id="switchBtn"><span class="active" data-dataType="income">种及种下统计年度变化</span></p>
                </div>
                <div>
                    <div id="line_time" style="width:90%;height:160px;margin-left:15px;"></div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/layer/layer.min.js"></script>
    <script type="text/javascript" src="js/layer/laydate/laydate.js"></script>
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <script type="text/javascript" src="js/china.js"></script>
    <script type="text/javascript" src="js/infographic.js"></script>
    <script type="text/javascript" src="js/macarons.js"></script>
    <script type="text/javascript" src="js/shine.js"></script>
    <script type="text/javascript" src="js/base.js"></script>

    <script type="text/javascript">
        $('document').ready(function () {
            $("body").css('visibility', 'visible');
            var localData = [$('#teacher').val(), $('#start').val() + '/' + $('#end').val(), $('#leader').val()]
            localStorage.setItem("data", localData);
        });
    </script>

    <script src="js/bubble.js"></script>

    <script>
        function fetchNews() {
            const proxyUrl = 'https://cors-anywhere.herokuapp.com/';
            const url = 'http://www.sp2000.org.cn/news/show_new_details/27b42027ff28423ab03f92e6f4062051';
            
            fetch(proxyUrl + url)
                .then(response => response.text())
                .then(data => {
                    const parser = new DOMParser();
                    const doc = parser.parseFromString(data, 'text/html');
                    
                    const newsContainer = document.getElementById('news-container');
                    newsContainer.innerHTML = ''; // 清空之前的内容
                    
                    doc.querySelectorAll('.boxall').forEach(item => {
                        const titleTag = item.querySelector('.alltitle a');
                        const sourceTag = item.querySelector('.allnav2 p');
                        
                        if (titleTag && sourceTag) {
                            const title = titleTag.textContent.trim();
                            const link = titleTag.href;
                            const source = sourceTag.textContent.trim();
                            
                            const newsItem = `
                                <div class="boxall">
                                    <div class="alltitle"><i class="fas fa-fire icon"></i><a href="${link}" target="_blank">${title}</a></div>
                                    <div class="allnav2">
                                        <p>--${source}</p>
                                    </div>
                                </div>
                            `;
                            newsContainer.insertAdjacentHTML('beforeend', newsItem);
                        }
                    });
                })
                .catch(error => console.error('Error fetching news:', error));
        }

        document.addEventListener('DOMContentLoaded', function() {
            fetchNews(); // 初次加载时获取数据
            setInterval(fetchNews, 1800000); // 每30分钟获取一次数据
        });
    </script>

    <script>
        // 在页面加载完成后执行滚动
        document.addEventListener("DOMContentLoaded", function () {
            // 获取滚动新闻容器和滚动新闻元素
            var scrollContainer = document.querySelector('.scroll-container');
            var scrollNews = document.querySelector('.scroll-news');

            // 计算滚动新闻元素的高度,用于设置滚动容器的高度
            var scrollHeight = scrollNews.clientHeight;
            scrollContainer.style.height = scrollHeight + 'px';
        });
    </script>

    <script>
        /*3D标签云*/
        tagcloud({
            selector: ".tagcloud", //元素选择器
            fontsize: 100, //基本字体大小, 单位px
            radius: 140, //滚动半径, 单位px 页面宽度和高度的五分之一
            mspeed: "slow", //滚动最大速度, 取值: slow, normal(默认), fast
            ispeed: "slow", //滚动初速度, 取值: slow, normal(默认), fast
            direction: 0, //初始滚动方向, 取值角度(顺时针360): 0对应top, 90对应left, 135对应right-bottom(默认)...
            keep: false, //鼠标移出组件后是否继续随鼠标滚动, 取值: false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动
        });
    </script>

    <script>
        var t = null;
        t = setTimeout(time, 1000); //開始运行
        function time() {
            clearTimeout(t); //清除定时器
            dt = new Date();
            var y = dt.getFullYear();
            var mt = dt.getMonth() + 1;
            var day = dt.getDate();
            var h = dt.getHours(); //获取时
            var m = dt.getMinutes(); //获取分
            var s = dt.getSeconds(); //获取秒
            document.getElementById("showTime").innerHTML = y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
            t = setTimeout(time, 1000); //设定定时器,循环运行     
        }
    </script>

</html>

 

标签:总结,滚动,6.7,var,const,dt,document,scroll
From: https://www.cnblogs.com/gyg1222/p/18239962

相关文章

  • JS(JavaScript)学习总结
    概念:JavaScript(简称“JS”)是一种具有函数优先的轻量级,解释型或即时编译型的编程语   言。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式、声明式、函数式编程范......
  • 题目集4-6的总结性blog
    前言:在这三周java的练习中,又运用了很多知识点,正则表达式,类与对象之间的关系,类与类之间的关系,继承,多态等等,巩固了上次学习的知识并掌握了新的技巧,这轮学习让我意识到,java题目需要先构思再实践,很多复杂的类之间联系,不构思好就去写代码,就会浪费很多时间。第四次大作业:这个题目是对......
  • PTA题目集4~6的总结
    PTA题目集4~6的总结一、前言第四次题目集为答题判题程序4,输入信息有题目信息、试卷信息、答题信息、学生信息、删除题目信息等。本次作业新增内容有选择题题目信息,填空题题目信息、输出顺序的变化:只要是正确格式的信息,可以以任意的先后顺序输入各类不同的信息,比如试卷可以出现......
  • OOP第二阶段题集总结
    一.前言知识点:考察继承和多态为多,其中还涉及迭代器的使用,在每个题集中都有一个综合性题目设计多方面知识点考试,有List类和HashMap的使用以及正则表达式的运用,并且注重考查设计,理解类与类之间的关系进行合理设计,其中也要遵循我们所学的单一职责,开闭原则,迪米特法则等。题量:第四次......
  • 【三级指针、二级指针、一级指针、指针值】原理+超直白说明/总结(当然,还是会有点涩~)
    看不懂的原理及区别在计算机编程中,指针是一个变量,其值为另一个变量的地址。指针的级别是根据它们所指向的对象类型来定义的。当我们谈论“一级指针”、“二级指针”和“三级指针”时,我们实际上是在讨论指针所指向的对象的类型。1.一级指针一级指针(或称为普通指针)是最常......
  • 第二次opp的总结和分析
    23201927-杨民星第二次blog1.前言:  继上次第一次blog之后,又开展了3次的Java的opp的训练集。在这三次的opp的题目中,第一次是对于之前三次题目的最后一次的迭代(上次3个题集的blog23201927-杨民星-第一次博客)这个题目也是答题系统的最后一个题目;而对于后面两个题目,就是基于电路......
  • 题目集4~6的总结性Blog
    第二次Blog是对第二类大作业的总结前言:前三次题目集的题量不会很大,提出的引脚我是第一次正式这种问题,有点陌生。难度偏小,虽然我没有拿满,老师还把后面的迭代方向告诉了我们,也更方便我们的设计,这一次对我来说应该是一次突破,因为我从未有一次如此清楚我代码的结构和问题,但我也有一......
  • OO题目集4~6总结
    OO题目集4~6总结​在之后的几次题目集的7-1题目中,难度渐渐高了起来,第四次题目集主要是在第三次题目集的基础上添加了一些功能,而之后的两次则是设计一个新的程序,是关于电路设备及电路的,与之前的答题程序不同,新的题目对于创新和思考能力以及思维逻辑能力要求更高,而接下来我将......
  • 第二次Blog总结
    一、前言经过题目集4至题目集6的学习与实践,我深刻体会到了面向对象编程(OOP)的魅力与挑战。本次总结将重点围绕三次题目集中的7-1题目,从知识点、题量、难度等方面进行分析与总结。知识点题目集4至6中的7-1题目,无一不紧扣面向对象编程(OOP)的核心概念。这些题目不仅深入探索了类的继......
  • PTA题目集4~6的总结
    前言1.第四次题目集的7-1在答题程序-3的基础上新增了一些内容,输入的内容增加,并且输入的格式有更加灵活,很好的考察了我们对于信息的处理能力、对正则表达式相关知识点的掌握还有使用面向对象方法编程的熟练度。此外,相比于前面三题,这次题目的要求更加***钻和细致,非常考验我们当前对......