使用JS实现鼠标移动 鼠标坐标实时显示值输入框中

实现鼠标移动实时值输入框中
详细代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MouseMoves</title>
    <style>
         div {
            height: 200px;
            width: 200px;
        }

        .d1 {
            background-color: aqua;
        }
        body{
            margin: 0px;
        }
    </style>
    <script type="text/javascript">
        // 实现鼠标移动 鼠标坐标实时显示值输入框中
        function mymousemove(e){
          var i1=  document.getElementById("i1");
          var x=e.clientX;
          var y=e.clientY;
          i1.value=x+","+y;
        }
       

    </script>
</head>
<body>
    <form action="">
        <div class="d1" onmousemove="mymousemove(event)">鼠标移动</div>
        <input type="text" id="i1">
        
        
    </form>
    
</body>
</html>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
要在 JFreeChart 折线图实现鼠标移动上去显示坐标信息,可以使用 ChartMouseListener 接口和 ChartPanel 类。具体步骤如下: 1. 创建 ChartMouseListener 接口的实现类,重写 chartMouseMoved 方法,在该方法获取鼠标所在的坐标,并将其显示在界面上。 2. 创建 ChartPanel 对象,并添加 ChartMouseListener 实现类的实例到 ChartPanel 。 3. 将 ChartPanel 对象添加到界面。 下面是一个示例代码,演示如何在 JFreeChart 折线图实现鼠标移动上去显示坐标信息: ```java import java.awt.BorderLayout; import java.awt.Color; import java.awt.Dimension; import java.awt.event.MouseEvent; import java.awt.event.MouseMotionListener; import javax.swing.JFrame; import org.jfree.chart.ChartFactory; import org.jfree.chart.ChartMouseEvent; import org.jfree.chart.ChartMouseListener; import org.jfree.chart.ChartPanel; import org.jfree.chart.JFreeChart; import org.jfree.chart.axis.NumberAxis; import org.jfree.chart.plot.XYPlot; import org.jfree.chart.renderer.xy.XYLineAndShapeRenderer; import org.jfree.data.xy.XYDataset; import org.jfree.data.xy.XYSeries; import org.jfree.data.xy.XYSeriesCollection; public class LineChartDemo extends JFrame { public LineChartDemo(String title) { super(title); // 创建数据集 XYDataset dataset = createDataset(); // 创建图表 JFreeChart chart = createChart(dataset); // 创建 ChartPanel 对象 ChartPanel chartPanel = new ChartPanel(chart); chartPanel.setPreferredSize(new Dimension(500, 300)); chartPanel.addChartMouseListener(new MyChartMouseListener(chartPanel)); // 添加 ChartPanel 到界面 getContentPane().add(chartPanel, BorderLayout.CENTER); } private XYDataset createDataset() { XYSeries series = new XYSeries("Random Data"); for (int i = 0; i < 100; i++) { series.add(i, Math.random() * 100); } XYSeriesCollection dataset = new XYSeriesCollection(); dataset.addSeries(series); return dataset; } private JFreeChart createChart(XYDataset dataset) { // 创建图表 JFreeChart chart = ChartFactory.createXYLineChart( "Line Chart Demo", // chart title "X", // x axis label "Y", // y axis label dataset, // data null, // no legend true, // tooltips false // no URLs ); // 设置背景颜色 chart.setBackgroundPaint(Color.white); // 获取图表的绘图区域 XYPlot plot = (XYPlot) chart.getPlot(); // 设置绘图区域的背景颜色 plot.setBackgroundPaint(Color.lightGray); // 设置绘图区域的网格线颜色 plot.setDomainGridlinePaint(Color.white); plot.setRangeGridlinePaint(Color.white); // 设置绘图区域的轴线颜色 plot.setDomainAxis(new NumberAxis()); plot.setRangeAxis(new NumberAxis()); plot.getDomainAxis().setLabelPaint(Color.white); plot.getRangeAxis().setLabelPaint(Color.white); // 设置绘图区域的线条颜色 XYLineAndShapeRenderer renderer = new XYLineAndShapeRenderer(); renderer.setSeriesPaint(0, Color.blue); renderer.setSeriesShapesVisible(0, true); plot.setRenderer(renderer); return chart; } private class MyChartMouseListener implements ChartMouseListener { private ChartPanel chartPanel; public MyChartMouseListener(ChartPanel chartPanel) { this.chartPanel = chartPanel; } public void chartMouseClicked(ChartMouseEvent event) { // do nothing } public void chartMouseMoved(ChartMouseEvent event) { int x = event.getTrigger().getX(); int y = event.getTrigger().getY(); double chartX = chartPanel.getChart().getXYPlot().getDomainAxis().java2DToValue(x, chartPanel.getScreenDataArea()); double chartY = chartPanel.getChart().getXYPlot().getRangeAxis().java2DToValue(y, chartPanel.getScreenDataArea()); System.out.println("x=" + chartX + ", y=" + chartY); } } public static void main(String[] args) { LineChartDemo demo = new LineChartDemo("Line Chart Demo"); demo.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); demo.pack(); demo.setVisible(true); } } ``` 这样,在鼠标移动到折线图上时,就会在控制台输出当前鼠标所在的坐标。你可以根据实际需求,将坐标显示在界面的合适位置上。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值