kuronekonano
kuronekonano

JavaScript 在网页上的图片中画矩形框,并得到实时对角坐标


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>矩形绘制工具title>
    <style type="text/css">
        .box {
            background: #f00;
            width: 0px;
            height: 0px;
            position: absolute;
            opacity: 0.5;
            cursor: move;
        }
        .droptarget {
            float: left;
            width: 100px;
            height: 1000px;
            margin: 15px;
            padding: 10px;
            border: 1px solid #aaaaaa;
        }
    style>
head>

<body>

<h1>标注窗口h1>


    <script>//框内移动显示坐标
        function cnvs_getCoordinates(e)
        {
            x=e.pageX-e.target.offsetLeft;//不能用clientX,pageX为文档坐标,clientX表示浏览器界面坐标,会随滚动条改变
            y=e.pageY-e.target.offsetTop;
            document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";
        }
        function cnvs_clearCoordinates()//出框后不显示坐标
        {
            document.getElementById("xycoordinates").innerHTML="";
        }
    script>
    <div id="coordiv" style="{{ style }}" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()" >
        <img src="{{ img_src }}" ondragstart="return false;" >

        <script type="text/javascript">
            console.log('=========')
            window.onload = function(e)
            {
                e = e || window.event;
                // startX, startY 为鼠标点击时初始坐标
                // diffX, diffY 为鼠标初始坐标与 box 左上角坐标之差，用于拖动
                var startX, startY, diffX, diffY;
                // 是否拖动，初始为 false
                var dragging = false;

                var coordiv = document.getElementById('coordiv');

                // 鼠标按下
                document.onmousedown = function(e)
                {
                    startX = e.pageX;
                    startY = e.pageY;

                    // 如果鼠标在 box 上被按下,坐标判定防止在box之外
                    if(startY<=coordiv.offsetTop+coordiv.offsetHeight && startY>=coordiv.offsetTop && startX>=coordiv.offsetLeft && startX<=coordiv.offsetLeft+coordiv.offsetWidth)
                    {
                        if(e.target.className.match(/box/))
                        {
                            // 允许拖动
                            dragging = true;

                            // 设置当前 box 的 id 为 moving_box
                            if(document.getElementById("moving_box") !== null)
                            {
                                document.getElementById("moving_box").removeAttribute("id");
                            }
                            e.target.id = "moving_box";

                            // 计算坐标差值
                            diffX = startX - e.target.offsetLeft;
                            diffY = startY - e.target.offsetTop;
                        }
                        else
                        {
                            // 在页面创建 box
                            var active_box = document.createElement("div");
                            active_box.id = "active_box";
                            active_box.className = "box";
                            active_box.style.top = startY + 'px';
                            active_box.style.left = startX + 'px';
                            active_box.setAttribute("ondrop","drop(event)");
                            active_box.setAttribute("ondragover","allowDrop(event)");
                            document.body.appendChild(active_box);
                            active_box = null;
                        }
                    }

                };

                // 鼠标移动
                document.onmousemove = function(e)
                {
                    if(e.pageY <= coordiv.offsetTop+coordiv.offsetHeight && e.pageY >= coordiv.offsetTop && e.pageX >= coordiv.offsetLeft && e.pageX <= coordiv.offsetLeft+coordiv.offsetWidth)
                    {
                        // 更新 box 尺寸
                        if(document.getElementById("active_box") !== null)//如果document中有active_box,就改变box大小
                        {
                            var ab = document.getElementById("active_box");
                            ab.style.width = e.pageX - startX + 'px';
                            ab.style.height = e.pageY - startY + 'px';
                        }

                        // 移动，更新 box 坐标
                        if(document.getElementById("moving_box") !== null && dragging)
                        {
                            var mb = document.getElementById("moving_box");
                            var xy_div = document.getElementById(mb.style.left.substring(0,mb.style.left.length-2)+mb.style.top.substring(0,mb.style.top.length-2));

                            var tmx = e.pageX - diffX;
                            var tmy = e.pageY - diffY;


                            if(tmx + mb.offsetWidth <= coordiv.offsetLeft+coordiv.offsetWidth && tmx >= coordiv.offsetLeft && tmy + mb.offsetHeight <= coordiv.offsetTop+coordiv.offsetHeight && tmy >= coordiv.offsetTop)
                            {
                                mb.style.top = e.pageY - diffY + 'px';
                                mb.style.left = e.pageX - diffX + 'px';

                                if(xy_div !== null)
                                {
                                    var new_x = mb.style.left.substring(0, mb.style.left.length - 2);
                                    var new_y = mb.style.top.substring(0,mb.style.top.length - 2);
                                    xy_div.id = new_x+new_y;
                                    new_x-=coordiv.offsetLeft;
                                    new_y-=coordiv.offsetTop;
                                    var new_r = parseInt(mb.style.width.substring(0,mb.style.width.length-2))+parseInt(new_x)-coordiv.offsetLeft;
                                    var new_b = parseInt(mb.style.height.substring(0,mb.style.height.length-2))+parseInt(new_y)-coordiv.offsetTop;//"[ left: "+ new_x +", top: "+ new_y + ", right: " + new_r +" , bottom: "+ new_b +" ]";
                                    xy_div.innerText = new_x +","+ new_y + "," + new_r +","+ new_b;
                                    var input_div = document.getElementById("x_y")
                                    input_div.value=xy_div.innerHTML
                                }
                            }
                        }
                    }
                };

                // 鼠标抬起
                document.onmouseup = function(e)
                {
                    // 禁止拖动
                    dragging = false;
                    if(document.getElementById("active_box") !== null)
                    {
                        var ab = document.getElementById("active_box");
                        ab.removeAttribute("id");
                        // 如果长宽均小于 3px，移除 box
                        if(ab.offsetWidth < 10 || ab.offsetHeight < 10)
                        {
                            document.body.removeChild(ab);
                        }
                        if(ab.offsetHeight >=10 && ab.offsetHeight >=10)
                        {
                            var xy_div = document.createElement("div");
                            xy_div.id=startX.toString()+startY.toString();
                            document.body.appendChild(xy_div);
                            xy_div.innerHTML = (startX-coordiv.offsetLeft) + "," + (startY-coordiv.offsetTop) + "," + (e.pageX-coordiv.offsetLeft) + "," + (e.pageY-coordiv.offsetTop);
                            var input_div = document.getElementById("x_y")
                            input_div.value=xy_div.innerHTML
                        }
                    }
                };

                //双击鼠标
                document.ondblclick = function (e)
                {
                    if(e.target.className.match(/box/))
                    {


                        if (document.getElementById("del_box") !== null)
                        {
                            document.getElementById("del_box").removeAttribute("id");
                        }
                        e.target.id = "del_box";
                        var ab = document.getElementById("del_box");

                        var xy_div = document.getElementById(ab.style.left.substring(0,ab.style.left.length-2)+ab.style.top.substring(0,ab.style.top.length-2))
                        if(xy_div !== null)
                        {
                            xy_div.removeAttribute("id");
                            document.body.removeChild(xy_div);
                        }
                        document.body.removeChild(ab);
                    }

                }
            };
        script>
    div>
    <br>
    <form method="POST">
        <input type="text" name="location" placeholder="座位"><br>
        <input type="text" name="coor" placeholder="坐标" readonly="true" id="x_y" style="width: 800px"><br>
        <input type="submit" value="提交坐标">
    form>

    <script>
        function dragStart(event)
        {
            event.dataTransfer.setData("Text", event.target.id);
        }
        function allowDrop(event)
        {
            event.preventDefault();
        }
        function drop(event)
        {
            event.preventDefault();
            var data = event.dataTransfer.getData("Text");
            event.target.appendChild(document.getElementById(data));
        }
    script>

    <div id="xycoordinates">div>


body>
html>

你可能感兴趣的:(小贴士,模拟)

  • C语言如何定义宏函数？ 小九格物 c语言
    在C语言中，宏函数是通过预处理器定义的，它在编译之前替换代码中的宏调用。宏函数可以模拟函数的行为，但它们不是真正的函数，因为它们在编译时不会进行类型检查，也不会分配存储空间。宏函数的定义通常使用#define指令，后面跟着宏的名称和参数列表，以及宏展开后的代码。宏函数的定义方式：1.基本宏函数：这是最简单的宏函数形式，它直接定义一个表达式。#defineSQUARE(x)((x)*(x))2.带参
  • 简单了解 JVM 记得开心一点啊 jvm
    目录♫什么是JVM♫JVM的运行流程♫JVM运行时数据区♪虚拟机栈♪本地方法栈♪堆♪程序计数器♪方法区/元数据区♫类加载的过程♫双亲委派模型♫垃圾回收机制♫什么是JVMJVM是JavaVirtualMachine的简称，意为Java虚拟机。虚拟机是指通过软件模拟的具有完整硬件功能的、运行在一个完全隔离的环境中的完整计算机系统（如：JVM、VMwave、VirtualBox）。JVM和其他两个虚拟机
  • Python实现简单的机器学习算法 master_chenchengg pythonpython办公效率python开发IT
    Python实现简单的机器学习算法开篇：初探机器学习的奇妙之旅搭建环境：一切从安装开始必备工具箱第一步：安装Anaconda和JupyterNotebook小贴士：如何配置Python环境变量算法初体验：从零开始的Python机器学习线性回归：让数据说话数据准备：从哪里找数据编码实战：Python实现线性回归模型评估：如何判断模型好坏逻辑回归：从分类开始理论入门：什么是逻辑回归代码实现：使用skl
  • 科幻游戏 《外卖员模拟器》 主要地理环境设定 (1) 穷人小水滴 游戏科幻设计
    游戏名称:《外卖员模拟器》(英文名称:waimai_se)作者:穷人小水滴本故事纯属虚构,如有雷同实属巧合.故事发生在一个(架空)平行宇宙的地球,21世纪(超低空科幻流派).相关文章:https://blog.csdn.net/secext2022/article/details/141790630目录1星球整体地理设定2巨蛇国主要设定3海蛇市主要设定3.1主要地标建筑3.2交通3.3能源(电力)
  • 每日OJ_牛客_马戏团（模拟最长上升子序列） GR鲸鱼 c++算法开发语言牛客数据结构
    目录牛客_马戏团（模拟最长上升子序列）解析代码牛客_马戏团（模拟最长上升子序列）马戏团__牛客网搜狐员工小王最近利用假期在外地旅游，在某个小镇碰到一个马戏团表演，精彩的表演结束后发现团长正和大伙在帐篷前激烈讨论，小王打听了下了解到，马戏团正打算出一个新节目“最高罗汉塔”，即马戏团员叠罗汉表演。考虑到安全因素，要求叠罗汉过程中，站在某个人肩上的人应该既比自己矮又比自己瘦，或相等。团长想要本次节目中的
  • 【大模型应用开发 动手做AI Agent】第一轮行动：工具执行搜索 AI大模型应用之禅 计算科学神经计算深度学习神经网络大数据人工智能大型语言模型AIAGILLMJavaPython架构设计AgentRPA
    【大模型应用开发动手做AIAgent】第一轮行动：工具执行搜索作者：禅与计算机程序设计艺术/ZenandtheArtofComputerProgramming1.背景介绍1.1问题的由来随着人工智能技术的飞速发展，大模型应用开发已经成为当下热门的研究方向。AIAgent作为人工智能领域的一个重要分支，旨在模拟人类智能行为，实现智能决策和自主行动。在AIAgent的构建过程中，工具执行搜索是至关重要
  • KVM虚拟机源代码分析【转】 xidianjiapei001 #虚拟化技术
    1.KVM结构及工作原理1.1KVM结构KVM基本结构有两部分组成。一个是KVMDriver，已经成为Linux内核的一个模块。负责虚拟机的创建，虚拟内存的分配，虚拟CPU寄存器的读写以及虚拟CPU的运行等。另外一个是稍微修改过的Qemu，用于模拟PC硬件的用户空间组件，提供I/O设备模型以及访问外设的途径。KVM基本结构如图1所示。其中KVM加入到标准的Linux内核中，被组织成Linux中标准
  • 在模拟游戏《星露谷物语》中，体验一把闪婚需要多长时间？ 爱游戏的萌博士
    我们知道：游戏圈中有许多速通玩家，他们追求尽可能短的时间完成游戏里的某项挑战，“RTA（RealTimeAttack）”就是其中主要的玩法，也就是“从游戏开始到通关画面出现为止所需现实时间尽可能短”。为了增加难度，高手们有时候还给自己设定一些限制，比如：有玩家挑战在“无伤”的前提下通关《塞尔达传说：荒野之息》等等。近日，博士就在海外玩家社群中留意到一项新的游戏速通纪录引发了热议！游戏产品并非《塞尔
  • 一文让你彻底搞懂什么是VR、AR、AV、MR 码上飞扬 vrarmrav
    随着科技的飞速发展，现实世界与虚拟世界的界限变得越来越模糊。各种与现实增强相关的技术如雨后春笋般涌现，令人眼花缭乱。本文将为你详细解读四种常见的现实增强技术：虚拟现实（VR）、增强现实（AR）、混合现实（MR）和增强虚拟（AV），让你彻底搞懂它们之间的区别与联系。一、虚拟现实（VR）1.什么是VR？虚拟现实（VirtualReality，简称VR）是一种通过计算机模拟生成的三维环境，使用户能够沉浸
  • 2021年化工自动化控制仪表考试及化工自动化控制仪表考试技巧 女王219 安全生产模拟考试一点通安全生产一点通题库
    题库来源：安全生产模拟考试一点通公众号小程序化工自动化控制仪表考试参考答案及化工自动化控制仪表考试试题解析是安全生产模拟考试一点通题库老师及化工自动化控制仪表操作证已考过的学员汇总，相对有效帮助化工自动化控制仪表考试技巧学员顺利通过考试。1、【单选题】辐射传热()任何介质做媒介。（A）A、不需要B、需要C、有时需要2、【单选题】同一密度的液体深度越深,压强()。（B）A、越小B、越大C、基本不变3
  • 使用Python和Playwright破解滑动验证码 asfdsgdf python开发语言
    滑动验证码是一种常见的验证码形式，通过拖动滑块将缺失的拼图块对准原图中的空缺位置来验证用户操作。本文将介绍如何使用Python中的OpenCV进行模板匹配，并结合Playwright实现自动化破解滑动验证码的过程。所需技术OpenCV模板匹配：用于识别滑块在背景图中的正确位置。Python：主要编程语言。Playwright：用于浏览器自动化，模拟用户操作。破解过程概述获取验证码图像：下载背景图和
  • 爬虫技术抓取网站数据被限制怎么处理 Bearjumpingcandy 爬虫
    爬虫技术用于抓取网站数据时，可能会遇到一些限制，常见的包括反爬机制、速率限制、IP封禁等。以下是应对这些情况的一些策略：尊重robots.txt：每个网站都有robots.txt文件，遵循其中的规定可以避免触犯网站的抓取规则。设置合理频率：控制爬虫请求的速度，通过添加延迟或使用代理服务器，减少对目标网站的压力。使用代理：获取并使用代理IP地址可以更换访问来源，降低被识别的可能性。模拟用户行为：使用
  • 爬虫技术抓取网站数据 Bearjumpingcandy 爬虫
    爬虫技术是一种自动化获取网站数据的技术，它可以模拟人类浏览器的行为，访问网页并提取所需的信息。以下是爬虫技术抓取网站数据的一般步骤：发起HTTP请求：爬虫首先会发送HTTP请求到目标网站，获取网页的内容。解析HTML：获取到网页内容后，爬虫会使用HTML解析器解析HTML代码，提取出需要的数据。数据提取：通过使用XPath、CSS选择器或正则表达式等工具，爬虫可以从HTML中提取出所需的数据，如文
  • 数组模拟单链表 Star_. 蓝桥杯java数据结构链表
    实现一个单链表，链表初始为空，支持三种操作：向链表头插入一个数；删除第k个插入的数后面的数；在第k个插入的数后插入一个数。现在要对该链表进行M次操作，进行完所有操作后，从头到尾输出整个链表。注意:题目中第k个插入的数并不是指当前链表的第k个数。例如操作过程中一共插入了n个数，则按照插入的时间顺序，这n个数依次为：第1个插入的数，第2个插入的数，…第n个插入的数。输入格式第一行包含整数M，表示操作次
  • 神经网络传递函数sigmoid,神经网络传递函数作用 快乐的小荣荣 神经网络机器学习深度学习人工智能
    神经网络传递函数选取不同会有特别大差别嘛？只是最后一层，但前面层是非线性，那么可能存在区别不大的情况。线性函数f(a*input)=af(input),一般来说，input为向量，最简化情况下，可以假设input的各个维度，a1=a2=a3。。。意味着你线性层只是简单的对输入做了scale~而神经网络能起作用的原因，在于通过足够复杂的非线性函数，来模拟任何的分布。所以，神经网络必须要用非线性函数。
  • 前端three.js的Sprite模拟下雪动画效果 qq_35430208 three.js前端javascript三维场景中下雪效果threejs实现下雪效果
    一、效果如图所示：二、原理同下雨一样三、完整代码：index.jsimport*asTHREEfrom'three';import{OrbitControls}from'three/addons/controls/OrbitControls.js';importmodelfrom'./model.js';//模型对象//场景constscene=newTHREE.Scene();scene.add
  • 若依后端正常启动但是uniapp移动端提示后端接口异常 大可大可抖 uni-app
    pc端能用模拟器也能正常连接接口，手机端真机调试连不上接口解决：1.先看config.js的填自己的ip地址module.exports={//baseUrl:'https://vue.ruoyi.vip/prod-api',baseUrl:"http://192.168.101.5:8080",}2.网络环境问题（防火墙）点击属性然后选择专用
  • python的request请求401_Python模拟HTTPS请求返回HTTP 401 unauthorized错误 weixin_39599372
    Python模拟HTTPS请求返回HTTP401unauthorized错误开始是使用的httplib模块，代码如下：header={"Content-type":"application/json","Accept":"*/*"}params={‘source‘:‘en‘,‘target‘:‘es‘,‘text‘:match.group(1)}data=urllib.urlencode(para
  • 使用STM32实现简单的智能温控系统 棂梓知识 stm32单片机嵌入式硬件
    智能温控系统是一种能够根据环境温度实时调整设备的工作状态的系统。在本篇文章中，我们将使用STM32微控制器来实现一个简单的智能温控系统。该系统将会有以下功能：实时监测环境温度，并显示在LCD屏幕上。当环境温度超过设定的阈值时，自动开启风扇。当环境温度恢复正常时，自动关闭风扇。通过按键模拟调节设定的阈值。系统设计首先，我们需要准备一些硬件设备。具体而言，我们需要以下组件：STM32F103C8T6开
  • 打开C语言常用内存函数的大门(一) —— memcpy()函数 （内含讲解用法和模拟实现） 埋头编程~ C语言c语言开发语言visualstudio算法
    文章目录1.前言2.memcpy函数2.1memcpy函数的原型2.2memcpy函数的形参和返回值详解3.memcpy函数的演示4.memcpy函数的模拟实现5.总结1.前言在之前写的文章中，我介绍了几个比较常用的字符串函数strlen、strcmp、strcpy。它们作用的对象只能是形如字符串类型的数据。那这难免会引起我们心中一泡浓厚的求知欲——C语言有没有给我们提供一些类似于字符串函数的功能
  • STM32 如何生成随机数 千千道 STM32stm32单片机物联网
    目录一、引言二、STM32随机数发生器概述三、工作原理1.噪声源2.线性反馈移位寄存器（LFSR）3.数据寄存器（RNG_DR）4.监控和检测电路：5.控制和状态寄存器6.生成流程四、使用方法1.使能随机数发生器2.读取随机数3.错误处理五、注意事项1.随机数的质量2.安全性3.性能考虑六、总结一、引言在嵌入式系统开发中，随机数的生成常常是一个重要的需求。无论是用于加密、模拟、游戏还是其他需要不确
  • 影刀RPA与WPS文档协同办公：实现高效自动化处理的策略与实践 enter回车键 影刀RPA
    摘要随着数字化转型的深入，企业对于办公自动化的需求日益增长。影刀RPA（RoboticProcessAutomation）与WPS文档的协同办公提供了一种高效、自动化的解决方案。本文旨在探讨影刀RPA与WPS文档如何配合使用，以实现工作流程的自动化，提高办公效率，并为企业带来实际效益。引言影刀RPA作为一种自动化工具，能够模拟人类用户的行为，执行重复性高、规则性强的工作任务。而WPS文档作为办公软
  • CV、NLP、数据控掘推荐、量化 海的那边- AI算法自然语言处理人工智能
    下面是对CV（计算机视觉）、NLP（自然语言处理）、数据挖掘推荐和量化的简要概述及其应用领域的介绍：1.CV（计算机视觉，ComputerVision）定义：计算机视觉是一门让计算机能够从图像或视频中提取有用信息，并做出决策的学科。它通过模拟人类的视觉系统来识别、处理和理解视觉信息。主要任务：图像分类：识别图像中的物体并分类，比如猫、狗、车等。目标检测：在图像或视频中定位并识别多个对象，如人脸检测
  • python之requests模块详解 Vibe~ python语言python爬虫
    目录requests使用requests请求方法requests响应对象属性Requests模块是一个用于网络请求的模块，主要用来模拟浏览器发请求。其实类似的模块有很多，比如urllib，urllib2，httplib，httplib2，他们基本都提供相似的功能。但是这些模块都复杂而且差不多过时了，requests模块简单强大高效，使得其在众多网络请求模块中脱引而出。requests使用环境安装：
  • 【Python】数据结构,链表,算法详解 AIAdvocate python数据结构链表排序算法广度优先深度优先
    今日内容大纲介绍自定义代码-模拟链表删除节点查找节点算法入门-排序类的冒泡排序选择排序插入排序快速排序算法入门-查找类的二分查找-递归版二分查找-非递归版分线性结构-树介绍基本概述特点和分类自定义代码-模拟二叉树1.自定义代码-模拟链表完整版"""案例:自定义代码,模拟链表.​背景: 顺序表在存储数据的时候,需要使用到连续的空间,如果空间不够,就会导致扩容失败,针对于这种情况,我们可以通过链表实现
  • Visual Studio中的Android模拟器使用详解 wurui8 androidandroidstudioandroidandroid应用
    关注微信号：javalearns随时随地学Java或扫一扫随时随地学JavaMicrosoft本周发布了VisualStudio2015预览版,里面包含Android开发工具.安装的时候,如果选Android开发,VisualStudio会把调试Android应用程序用的VisualStudio模拟器也装上.在介绍这个新模拟器之前,我们先来聊一聊,为什么需要一个新的Android模拟器–当然,你也
  • Open3D 实现CSF布料模拟算法 今夕是何年， 单目+双目Open3d计算机视觉
    目录一、算法原理二，详细过程三，环境安装四，代码实现五，结果展示6，在cloudcompare中的实现一、算法原理1、流程概述1）利用点云·滤波算法或者点云处理软件滤除异常点;2）将激光雷达点云倒置;3）设置模拟布料，设置布料网格分辨率GR，确定模拟粒子数。布料的位置设置在点云最高点以上;4）将布料模拟点和雷达点投影到水平面，为每个布料模拟点找到最相邻的激光点的高度值，将高度值设置为IHV;5)布
  • 多层建筑能源参数化模型和城市冠层模型的区别 WW、forever WRF模型原理及应用城市模拟
    多层建筑能源参数化（Multi-layerBuildingEnergyParameterization,BEP）模型和城市冠层模型（UrbanCanopyModel,UCM）都是用于模拟城市环境中能量交换和微气候的数值模型，但它们的侧重点和应用场景有所不同。以下是两者的主要区别：1.目标和应用场景BEP模型：目标：主要用于模拟多层建筑群的能量交换过程，特别是建筑内部和外部的热量传输、建筑能耗以及建
  • 育方式吗？#科普 #涨知识 #人造子宫 努力幸运
    替代女性实现生养。为了证明人造子宫的可行性，美国费城儿童医院曾做过有趣的实验。科学家们将8只早产的小羊羔各自放进一个透明的塑料袋子里进行孕育。这些小羊羔的胎灵等同于22-23周的人类胎儿。塑料袋中清晰可见的粘稠液体又以模拟子宫内的羊水。袋子和小羊羔身体上还插着很多大大小小的管子，源源不断地输送着营养物质和氧气。科学家们将这样的袋子称为生育袋。生育袋放置在保温容器中，以维持妊娠所需的适宜温度。4个星
  • [HarmonyOS Next示例代码] 鸿蒙UI开发 - 组件动态创建 xiaohai_09 HarmonyOSNextUI开发harmonyos鸿蒙
    鸿蒙UI开发-组件动态创建源码下载地址介绍本示例介绍了在声明式UI中实现组件动态创建的方法效果图预览主页面广告关闭弹窗使用说明进入应用后，广告组件随即被动态创建。其分为两种，分别为图片广告与视频广告。实现思路构建广告组件。源码参考AdBuilder.ets。模拟从云端初始化卡片列表，根据云端数据生成普通卡片对象和广告卡片对象。源码参考代码可参考MainPage.ets中的aboutToAppear
  • 集合框架 天子之骄 java数据结构集合框架
       集合框架 集合框架可以理解为一个容器，该容器主要指映射(map)、集合(set)、数组(array)和列表(list)等抽象数据结构。 从本质上来说，Java集合框架的主要组成是用来操作对象的接口。不同接口描述不同的数据类型。   简单介绍：   Collection接口是最基本的接口，它定义了List和Set，List又定义了LinkLi
  • Table Driven（表驱动）方法实例 bijian1013 javaenumTable Driven表驱动
    实例一： /** * 驾驶人年龄段 * 保险行业，会对驾驶人的年龄做年龄段的区分判断 * 驾驶人年龄段：01-[18,25);02-[25,30);03-[30-35);04-[35,40);05-[40,45);06-[45,50);07-[50-55);08-[55,+∞) */ public class AgePeriodTest { //if...el
  • Jquery 总结 cuishikuan javajqueryAjaxWebjquery方法
    1.$.trim方法用于移除字符串头部和尾部多余的空格。如：$.trim('   Hello   ') // Hello2.$.contains方法返回一个布尔值，表示某个DOM元素（第二个参数）是否为另一个DOM元素（第一个参数）的下级元素。如：$.contains(document.documentElement, document.body); 3.$
  • 面向对象概念的提出 麦田的设计者 java面向对象面向过程
            面向对象中，一切都是由对象展开的，组织代码，封装数据。   在台湾面向对象被翻译为了面向物件编程，这充分说明了，这种编程强调实体。       下面就结合编程语言的发展史，聊一聊面向过程和面向对象。      c语言由贝尔实
  • linux网口绑定 被触发 linux
    刚在一台IBM Xserver服务器上装了RedHat Linux Enterprise AS 4，为了提高网络的可靠性配置双网卡绑定。 一、环境描述 我的RedHat Linux Enterprise AS 4安装双口的Intel千兆网卡，通过ifconfig -a命令看到eth0和eth1两张网卡。 二、双网卡绑定步骤： 2.1 修改/etc/sysconfig/network
  • XML基础语法 肆无忌惮_ xml
    一、什么是XML？ XML全称是Extensible Markup Language，可扩展标记语言。很类似HTML。XML的目的是传输数据而非显示数据。XML的标签没有被预定义，你需要自行定义标签。XML被设计为具有自我描述性。是W3C的推荐标准。   二、为什么学习XML？ 用来解决程序间数据传输的格式问题 做配置文件 充当小型数据库   三、XML与HTM
  • 为网页添加自己喜欢的字体 知了ing 字体 秒表 css
    @font-face { font-family: miaobiao;//定义字体名字 font-style: normal; font-weight: 400; src: url('font/DS-DIGI-e.eot');//字体文件 } 使用： <label style="font-size:18px;font-famil
  • redis范围查询应用-查找IP所在城市 矮蛋蛋 redis
    原文地址： http://www.tuicool.com/articles/BrURbqV 需求 根据IP找到对应的城市 原来的解决方案 oracle表（ip_country）： 查询IP对应的城市： 1.把a.b.c.d这样格式的IP转为一个数字，例如为把210.21.224.34转为3524648994 2. select city from ip_
  • 输入两个整数， 计算百分比 alleni123 java
    public static String getPercent(int x, int total){ double result=(x*1.0)/(total*1.0); System.out.println(result); DecimalFormat df1=new DecimalFormat("0.0000%");
  • 百合——————>怎么学习计算机语言 百合不是茶 java 移动开发
        对于一个从没有接触过计算机语言的人来说，一上来就学面向对象，就算是心里上面接受的了，灵魂我觉得也应该是跟不上的，学不好是很正常的现象，计算机语言老师讲的再多，你在课堂上面跟着老师听的再多，我觉得你应该还是学不会的，最主要的原因是你根本没有想过该怎么来学习计算机编程语言，记得大一的时候金山网络公司在湖大招聘我们学校一个才来大学几天的被金山网络录取，一个刚到大学的就能够去和
  • linux下tomcat开机自启动 bijian1013 tomcat
    方法一： 修改Tomcat/bin/startup.sh 为: export JAVA_HOME=/home/java1.6.0_27 export CLASSPATH=$CLASSPATH:$JAVA_HOME/lib/tools.jar:$JAVA_HOME/lib/dt.jar:. export PATH=$JAVA_HOME/bin:$PATH export CATALINA_H
  • spring aop实例 bijian1013 javaspringAOP
    1.AdviceMethods.java package com.bijian.study.spring.aop.schema; public class AdviceMethods { public void preGreeting() { System.out.println("--how are you!--"); } } 2.beans.x
  • [Gson八]GsonBuilder序列化和反序列化选项enableComplexMapKeySerialization bit1129 serialization
    enableComplexMapKeySerialization配置项的含义  Gson在序列化Map时，默认情况下，是调用Key的toString方法得到它的JSON字符串的Key，对于简单类型和字符串类型，这没有问题，但是对于复杂数据对象，如果对象没有覆写toString方法，那么默认的toString方法将得到这个对象的Hash地址。   GsonBuilder用于
  • 【Spark九十一】Spark Streaming整合Kafka一些值得关注的问题 bit1129 Stream
    包括Spark Streaming在内的实时计算数据可靠性指的是三种级别： 1. At most once，数据最多只能接受一次，有可能接收不到 2. At least once, 数据至少接受一次，有可能重复接收 3. Exactly once  数据保证被处理并且只被处理一次，   具体的多读几遍http://spark.apache.org/docs/lates
  • shell脚本批量检测端口是否被占用脚本 ronin47
    #!/bin/bash cat ports |while read line do#nc -z -w 10 $line nc -z -w 2 $line 58422>/dev/null2>&1if[ $?-eq 0]then echo $line:ok else echo $line:fail fi done 这里的ports 既可以是文件
  • java-2.设计包含min函数的栈 bylijinnan java
    具体思路参见：http://zhedahht.blog.163.com/blog/static/25411174200712895228171/ import java.util.ArrayList; import java.util.List; public class MinStack { //maybe we can use origin array rathe
  • Netty源码学习-ChannelHandler bylijinnan javanetty
    一般来说，“有状态”的ChannelHandler不应该是“共享”的，“无状态”的ChannelHandler则可“共享” 例如ObjectEncoder是“共享”的, 但 ObjectDecoder 不是 因为每一次调用decode方法时，可能数据未接收完全（incomplete）， 它与上一次decode时接收到的数据“累计”起来才有可能是完整的数据，是“有状态”的 p
  • java生成随机数 cngolon java
    方法一： /** * 生成随机数 * @author [email protected] * @return */ public synchronized static String getChargeSequenceNum(String pre){ StringBuffer sequenceNum = new StringBuffer(); Date dateTime = new D
  • POI读写海量数据 ctrain 海量数据
    import java.io.FileOutputStream; import java.io.OutputStream; import org.apache.poi.xssf.streaming.SXSSFRow; import org.apache.poi.xssf.streaming.SXSSFSheet; import org.apache.poi.xssf.streaming
  • mysql 日期格式化date_format详细使用 daizj mysqldate_format日期格式转换日期格式化
    日期转换函数的详细使用说明  DATE_FORMAT(date,format) Formats the date value according to the format string. The following specifiers may be used in the format string. The&n
  • 一个程序员分享8年的开发经验 dcj3sjt126com 程序员
      在中国有很多人都认为IT行为是吃青春饭的，如果过了30岁就很难有机会再发展下去!其实现实并不是这样子的，在下从事.NET及JAVA方面的开发的也有8年的时间了，在这里在下想凭借自己的亲身经历，与大家一起探讨一下。 明确入行的目的 很多人干IT这一行都冲着“收入高”这一点的，因为只要学会一点HTML, DIV+CSS，要做一个页面开发人员并不是一件难事，而且做一个页面开发人员更容
  • android欢迎界面淡入淡出效果 dcj3sjt126com android
    很多Android应用一开始都会有一个欢迎界面，淡入淡出效果也是用得非常多的，下面来实现一下。 主要代码如下： package com.myaibang.activity; import android.app.Activity;import android.content.Intent;import android.os.Bundle;import android.os.CountDown
  • linux 复习笔记之常见压缩命令 eksliang tar解压linux系统常见压缩命令linux压缩命令tar压缩
    转载请出自出处:http://eksliang.iteye.com/blog/2109693 linux中常见压缩文件的拓展名 *.gz gzip程序压缩的文件 *.bz2 bzip程序压缩的文件 *.tar tar程序打包的数据，没有经过压缩 *.tar.gz tar程序打包后，并经过gzip程序压缩 *.tar.bz2 tar程序打包后，并经过bzip程序压缩 *.zi
  • Android 应用程序发送shell命令 gqdy365 android
    项目中需要直接在APP中通过发送shell指令来控制lcd灯，其实按理说应该是方案公司在调好lcd灯驱动之后直接通过service送接口上来给APP，APP调用就可以控制了，这是正规流程，但我们项目的方案商用的mtk方案，方案公司又没人会改，只调好了驱动，让应用程序自己实现灯的控制，这不蛋疼嘛！！！！ 发就发吧！ 一、关于shell指令： 我们知道，shell指令是Linux里面带的
  • java 无损读取文本文件 hw1287789687 读取文件无损读取读取文本文件charset
    java 如何无损读取文本文件呢？ 以下是有损的 @Deprecated public static String getFullContent(File file, String charset) { BufferedReader reader = null; if (!file.exists()) { System.out.println("getFull
  • Firebase 相关文章索引 justjavac firebase
    Awesome Firebase 最近谷歌收购Firebase的新闻又将Firebase拉入了人们的视野，于是我做了这个 github 项目。 Firebase 是一个数据同步的云服务，不同于 Dropbox 的「文件」，Firebase 同步的是「数据」，服务对象是网站开发者，帮助他们开发具有「实时」（Real-Time）特性的应用。 开发者只需引用一个 API 库文件就可以使用标准 RE
  • C++学习重点 lx.asymmetric C++笔记
    1.c++面向对象的三个特性：封装性，继承性以及多态性。   2.标识符的命名规则：由字母和下划线开头，同时由字母、数字或下划线组成；不能与系统关键字重名。   3.c++语言常量包括整型常量、浮点型常量、布尔常量、字符型常量和字符串性常量。   4.运算符按其功能开以分为六类：算术运算符、位运算符、关系运算符、逻辑运算符、赋值运算符和条件运算符。 &n
  • java bean和xml相互转换 q821424508 javabeanxmlxml和bean转换java bean和xml转换
    这几天在做微信公众号 做的过程中想找个java bean转xml的工具，找了几个用着不知道是配置不好还是怎么回事，都会有一些问题， 然后脑子一热谢了一个javabean和xml的转换的工具里，自己用着还行，虽然有一些约束吧 ， 还是贴出来记录一下      顺便你提一下下，这个转换工具支持属性为集合、数组和非基本属性的对象。   packag
  • C 语言初级 位运算 1140566087 位运算c
    第十章 位运算   1、位运算对象只能是整形或字符型数据，在VC6.0中int型数据占4个字节   2、位运算符： 运算符 作用 ~ 按位求反 << 左移 >> 右移 & 按位与 ^ 按位异或 | 按位或 他们的优先级从高到低；   3、位运算符的运算功能： a、按位取反： ~01001101 = 101
  • 14点睛Spring4.1-脚本编程 wiselyman spring4
    14.1 Scripting脚本编程 脚本语言和java这类静态的语言的主要区别是:脚本语言无需编译,源码直接可运行; 如果我们经常需要修改的某些代码,每一次我们至少要进行编译,打包,重新部署的操作,步骤相当麻烦; 如果我们的应用不允许重启,这在现实的情况中也是很常见的; 在spring中使用脚本编程给上述的应用场景提供了解决方案,即动态加载bean; spring支持脚本
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他