Question

我想创建一个像here一样的滑块，并希望将输出变为变量。但问题是，我不知道输出在哪里。这是滑块的代码 -

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page">
  <div data-role="header">
    <h1>Slider Control</h1>
  </div>

  <div data-role="main" class="ui-content">
    <form method="post" action="demoform.asp">
      <label for="points">Points:</label>
      <input type="range" name="points" id="points" value="50" min="0" max="100">
      <input type="submit" data-inline="true" value="Submit">
    </form>
  </div>
</div>

</body>
</html>

是的，顺便说一句，我知道这会使用jquery。无论如何，你能告诉我几行代码添加（或更改）以使输出更改为变量吗？谢谢！

Answer 1

您可以在slidestop或change事件

上获取滑块的值

<script>
var sliderValue;
$(function () {
   $("#points").on("slidestop", function () {
     sliderValue =  $(this).val();
   })
   $("#points").on("change", function () {
     sliderValue =  $(this).val();
   })
});
</script>

您可以在body代码关闭之前添加此内容。

Answer 2

   public class HistList extends JPanel {
JTable table = new JTable();
 JMenuItem remove = new JMenuItem("Remove");
JScrollPane scrollPane = new JScrollPane();
MyTableModel model = new MyTableModel();

HistList() {
    try {
        UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
    } catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) {
        ex.printStackTrace();
    }
    String[] title = {" ", "Time", "Name", "Location"};
    Object[][] data = {
        {false, "01:22:16", "Google", "http://www.google.com"},
        {false, "01:22:16", "Yahoo - login", "https://login.yahoo.com/?.src=ym&.intl=us&.lang=en-US&.done=https%3a//mail.yahoo.com"},
        {false, "01:22:29", "Oracle | Integrated Cloud Applications and Platform Services", "https://www.oracle.com/index.html"}
    };
    for (int i = 0; i < data.length; i++) {
        model.addRow(data[i]);
    }
    this.table = new JTable(model);
    this.table.setShowGrid(false);
    this.scrollPane = new JScrollPane(this.table);
    Dimension size = new Dimension(510, 380);
    this.scrollPane.setPreferredSize(size);
    this.scrollPane.getViewport().setBackground(Color.WHITE);
    JTextField name = new JTextField();
    name.setPreferredSize(new Dimension(scrollPane.getWidth(), 25));
    JTextField locationText = new JTextField();
    locationText.setPreferredSize(new Dimension(scrollPane.getWidth(), 25));
    JPanel textPane = new JPanel();
    JLabel nameLabel = new JLabel("Name:");
    JPanel textPane1 = new JPanel();
    textPane1.setLayout(new BoxLayout(textPane1, BoxLayout.X_AXIS));
    textPane1.setBorder(BorderFactory.createEmptyBorder(0, 0, 0, 0));
    textPane1.add(Box.createHorizontalGlue());
    textPane1.add(nameLabel);
    textPane1.add(Box.createRigidArea(new Dimension(21, 0)));
    textPane1.add(name);
    JLabel locationLabel = new JLabel("Location:");
    JPanel textPane2 = new JPanel();
    textPane2.setLayout(new BoxLayout(textPane2, BoxLayout.X_AXIS));
    textPane2.setBorder(BorderFactory.createEmptyBorder(0, 0, 0, 0));
    textPane2.add(Box.createHorizontalGlue());
    textPane2.add(locationLabel);
    textPane2.add(Box.createRigidArea(new Dimension(5, 0)));
    textPane2.add(locationText);
    textPane.setLayout(new BoxLayout(textPane, BoxLayout.Y_AXIS));
    textPane.setBorder(BorderFactory.createEmptyBorder(0, 2, 2, 2));
    textPane.add(Box.createVerticalGlue());
    textPane.add(textPane1);
    textPane.add(Box.createRigidArea(new Dimension(0, 5)));
    textPane.add(textPane2);
    JPanel contentPane = new JPanel();
    contentPane.setLayout(new BoxLayout(contentPane, BoxLayout.Y_AXIS));
    contentPane.add(scrollPane);
    contentPane.setBorder(BorderFactory.createEmptyBorder(0, 2, 2, 2));
    contentPane.add(Box.createVerticalGlue());
    contentPane.add(Box.createRigidArea(new Dimension(0, 5)));
    contentPane.add(textPane);
    JPanel pane = new JPanel(new BorderLayout());
    pane.setBorder(BorderFactory.createEmptyBorder(15, 0, 0, 0));
    pane.setBackground(Color.WHITE);
    String[] dates = {"12/15/2016", "12/30/2016"};
    JList list;
    list = new JList(dates);
    list.setSelectionMode(ListSelectionModel.SINGLE_INTERVAL_SELECTION);
    JLabel label = new JLabel("Browsing Date");
    pane.add(label, BorderLayout.NORTH);
    pane.add(list, BorderLayout.WEST);
    pane.setPreferredSize(new Dimension(150, 380));
    JSplitPane splitPane = new JSplitPane(JSplitPane.HORIZONTAL_SPLIT, pane, contentPane);
    JMenuBar organize = new JMenuBar();
    organize.setOpaque(true);
    organize.setBackground(getBackground());
    JMenu menu = new JMenu("Organize");
    menu.add(remove);
    remove.setEnabled(false);
    menu.setOpaque(true);
    menu.setBackground(getBackground());
    menu.setIcon(new ImageIcon(Hello.class.getResource("/rsz_todo-512.png")));
    organize.add(menu);
    JPanel finale = new JPanel(new BorderLayout());
    finale.setOpaque(true);
    finale.add(organize,BorderLayout.NORTH);
    finale.add(splitPane,BorderLayout.CENTER);
    setOpaque(true);
    add(finale);
}

它不起作用。

如何使用Javascript将滑块输出转换为变量

2 个答案: