首页 >web前端 >css教程 >为什么我的 JavaScript 范围滑块从 JSFiddle 移动到外部页面时不起作用？

为什么我的 JavaScript 范围滑块从 JSFiddle 移动到外部页面时不起作用？

DDD原创: 2024-12-16 18:21:18336浏览

Why Doesn't My JavaScript Range Slider Work When Moved from JSFiddle to an External Page?

JSFiddle 代码在外部页面上出错

在尝试将功能代码从 JSFiddle 迁移到外部页面时，用户遇到了意外行为，其中 JavaScript 组件停止运行.

代码设置

用户提供了以下 HTML、CSS 和 JavaScript code:

<body>

input[type="range"]{
  -webkit-appearance: none;
  -moz-apperance: none;
  border-radius: 6px;
  width: 225px;
  height: 6px;
  border: 2px solid #eceef1;
  outline:none;
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0.15, #eceef1),
    color-stop(0.15, #0c0d17)
  ); }

input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  background-color: #1ec2c5;
  border: 3px solid #000000;
  height: 25px;
  width: 25px;
  border-radius: 20px;}

$('input[type="range"]').change(function () {
var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));

$(this).css('background-image',
            '-webkit-gradient(linear, left top, right top, '
            + 'color-stop(' + val + ', #eceef1), '
            + 'color-stop(' + val + ', #0c0d17)'
            + ')'
            ); 
});

问题根源

尽管将代码放入外部页面的 HTML、JavaScript 和 CSS 文件中，但 JavaScript 部分仍无法执行。

关键的见解来自 JSFiddle 将用户的 JavaScript 代码放置在 onload 处理程序中这一事实。因此，只有在整个页面加载后才会执行该代码。然而，在外部页面中，JavaScript 位于

中，在解析输入元素之前执行。

补救措施

要纠正该问题，用户可以采用以下三种解决方案之一：

将代码包含在 onload 中，或者最好是文档就绪处理程序中，例如，

$(document).ready(function() {
    // your code here
});

利用文档就绪处理程序的缩写形式：

$(function() {
    // your code here
});

移动包含以下内容的脚本标记的位置JavaScript 代码放在页面末尾，允许在代码之前解析元素执行。

以上是为什么我的 JavaScript 范围滑块从 JSFiddle 移动到外部页面时不起作用？的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript css html for function input issue

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：How to Create a Circular SVG Path Using Linked Border Segments?下一篇：How Can I Tightly Pack Inline Elements in HTML Without Sacrificing Readability?

查看更多