Tag: jQuery

用圆形进度条倒计时器

我创build了一个倒数计时器。 我有一个被制成圆形的边框。 由于计时器趋向于零，圆形边框应该在秒内减less颜色。 我创build了JSFIDDLE HTML <div class="outer"> <button class="btn btn-default btn-timer">0.00</button> </div> JS代码 var displayminutes; var displayseconds; var initializeTimer = 1.5 // enter in minutes var minutesToSeconds = initializeTimer*60; $("#document").ready(function(){ setTime = getTime(); $(".btn-timer").html(setTime[0]+":"+setTime[1]) }); $(".btn-timer").click(function(){ var startCountDownTimer = setInterval(function(){ minutesToSeconds = minutesToSeconds-1; var timer = getTime(); $(".btn-timer").html(timer[0]+":"+timer[1]); if(minutesToSeconds == 0){ clearInterval(startCountDownTimer); console.log("completed"); } },1000) […]

使用Ajax将Javascriptvariables传递给PHP

我正在使用Ajax，这是我以前从未使用过的现有脚本。 我有一个variables设置在我的JavaScript文件，从我的网页上的input字段获取其值。 我需要使用Ajax发布到我的PHP页面，我不知道从哪里开始， 林不知道你需要看到什么代码，但我的JavaScript / AJAX代码是，我需要传递的variables是'var credoff' $(".getPoint").click(function () { var theid = $(this).attr("id"); var onlyID = theid.split("_"); var onlyID = onlyID[1]; var credoff = parseInt($(this).children('input.credoff:hidden').val()); $.ajax({ url: 'do.php', type: 'POST', data: "userID=" + onlyID, success: function (data) { if (data != "success1" && data != "success5") { $("#" + theid).text(data); } else { $("#thediv_" […]

为什么JQuery只影响第一个div元素？

我正在使用“replace”function删除一个div中的所有非数字值。 看来Jqueryreplace只影响第一个元素。 这里是我的JQuery： $('#comment').each(function() { var thz = $(this); var repl = thz.html(thz.html().replace(/\D+/g, '')); }); HTML代码： <a id="comment1" href="#"> c2fđf011. </a> <a id="comment1" href="#"> c20ff113. </a> <a id="comment1" href="#"> c201gf76341. </a> 结果： 2011年c20ff113。 c201gf76341。 我想要的结果是： 2011 20113 20176341

垂直滚动条出现时，如何停止我的Web内容左移？ 总结2017年的build议

许多程序员已经询问如何在垂直滚动条出现时停止其网页内容（特别是其居中的网页内容（ margin: 0 auto; ））。 对于像我这样使用隐藏的div和制表符来组织数据的Ajax用户来说，这一直是个问题。 当前显示的页面发生变化时，会出现问题，使得显示的材料的高度（内部窗口高度）突然大于物理窗口高度。 所有的滚动条并非一律平等的现实加剧了这个问题。 不同的浏览器给他们的滚动条不同的宽度，这种差异不能（至less不应该）被预测。 总之，理想的解决scheme是独立于滚动条宽度。 因此，这是一个自我回答的问题，在2017年8月5日之前，将所有这些答案和有用的评论（如果可能）以及我自己的解决scheme汇总成一个答案。我已经标记为重复的以前的问题，我可以find，让人们可以find一个全面的讨论这个问题。 请注意，这个答案解决了BODY内容转移的问题。 如果你有一个固定高度的DIV有移位问题，你应该把DIV的宽度设置为一个固定的（ px ）宽度，这样它的滚动条浮在文本上方，并添加一些右边的填充以防止文本掉落下来。 贡献者： Hashbrown ， Avrahamcool ， Edward Newsome

保存对此范围的访问权限

我的颜色存储在我的button的数据属性，我想用在切换。 但是，当我试图使用this访问数据信息时，没有数据可用。 我怎样才能保持我访问正确的范围？ 我试图只切换给定的颜色为不包含跳过的元素。 HTML <div> <input id="toggleButton" type="button" value="Toggle" data-color="Red" /> </div> <div id="toggleSet"> <div>Element</div> <div>Skip</div> <div>Element</div> </div> CSS .ActivateRed{ color: red; } JS $('#toggleButton').click(function(){ $("#toggleSet div").each(function(index,element){ if( element.innerHTML != "Skip" ){ $(element).toggleClass("Activate"+$(this).data("color")); //^this has no data to access? //Why am I getting undefined? } }); }); 这是我的尝试jsFiddle 。 我不断得到Activateundefined作为类名。 为什么不能访问我的toggleButton数据？

本地表单编辑演示和jqGrid 4.4.1

这个演示： http ://www.ok-soft-gmbh.com/jqGrid/LocalFormEditing.htm不能正常工作，如果我更新的JavaScript包括，最后版本的jqGrid。 <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/redmond/jquery-ui.css" /> <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/css/ui.jqgrid.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script> <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/src/i18n/grid.locale-en.js"></script> <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/src/grid.base.js"></script> <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/src/grid.common.js"></script> <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/src/grid.formedit.js"></script> <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/src/grid.inlinedit.js"></script> <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/src/grid.celledit.js"></script> <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/src/grid.subgrid.js"></script> <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/src/grid.treegrid.js"></script> <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/src/grid.grouping.js"></script> <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/src/grid.custom.js"></script> <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/src/jquery.fmatter.js"></script> <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/src/jquery.searchFilter.js"></script> […]

在所有的promise被调用之后，通过jQuery Deferreds循环

我目前正在尝试使用HTML5 FileAPI构buildfile upload器。 file upload器应该处理多个文件，并显示图像预览，如果该文件是一个图像。 由于FileReader类asynchronous工作，我想等到所有的文件都被读取。 所以我使用了Deferreds。 读取文件的方法是返回一个承诺。 另一种方法循环遍历所有文件，并将所有的承诺推送到一个数组中。 然后，我将所有的promise都添加到我的数组中，然后应用then（）方法。 现在到我的问题。 由于then（）方法只被调用一次 ，当我得到所有的承诺。 我没有机会处理每一个承诺。 我想要做的是，一旦他们都在那里循环所有的承诺，并返回结果。 这是我的FileProcessor对象 read: function(file) { var reader = new FileReader(); var deferred = $.Deferred(); reader.onload = function(event){ deferred.resolve(event.target.result); }; reader.onerror = function() { deferred.reject(this); } if(/^image/.test(file.type)) reader.readAsDataURL(file); return deferred.promise(); }, 这里是FileManager对象的handleFileSelect（）方法，它应该调用FileProcessor.read（）方法。 handleFileSelect: function(e){ var $fileList = $('#file-list'); var files = e.target.files; […]

谷歌图表：在IE中绘制双轴的多个条形图

我在同一页面上创build了双轴的多个条形图。 它在Chrome中工作正常，但在IE中不起作用 。 在IE中显示一个错误 “对象不支持属性或方法”包含“” HTML和JavaScript代码如下： startChart(); function startChart() { var data = new google.visualization.arrayToDataTable([ ['Galaxy', 'Distance', 'Brightness'], ['Canis Major Dwarf', 8000, 23.3], ['Sagittarius Dwarf', 24000, 4.5], ['Ursa Major II Dwarf', 30000, 14.3], ['Lg. Magellanic Cloud', 50000, 0.9], ['Bootes I', 60000, 13.1] ]); var options = { width: 900, chart: { title: 'Nearby galaxies', subtitle: […]

试图让多个背景图像循环通过CSS和JQUERY的幻灯片

我已经在一个div中放置了三个背景图片。 我试图让所有三个人都在一个淡入淡出的计时器上循环。 我在这里发现了类似的问题，但我无法让他们工作。 无论如何，这是相关的代码： HTML <div id="slideshow"> </div> CSS #slideshow{ position:relative; top:0; width:100%; height:635px; background: url("car4.jpg"), url("city.jpg"), url("host3.jpg"); background-repeat:no-repeat; background-size:100%; } 我希望在CSS做到这一点，但我猜这需要JQUERY ; 我没有太多的经验，但没关系。 我真的很感激任何帮助。 让我知道，如果我可以给你任何更多的信息。 谢谢。 ***我试过cssanimation，但没有得到结果。 以下是我将其更改为： #slideshow{ position:relative; top:0; width:100%; height:635px; background:url("car4.jpg"); background-repeat:no-repeat; background-size:100%; animation-name: one; animation-duration: 4s; } @keyframes one { from {background: url("car4.jpg");} to {background: url("city.jpg");} } 这看起来是正确的，但它仍然只显示原始图像“car4.jpg”谢谢

jQuery如果语句与variablesmath运算符

所以我正在寻找类似于这个问题的python if语句与variablesmath运算符，但在jQuery / Javascript中 基本上类似 var one = "4"; var two = "6"; var op = "=="; if (one op two) { //do something } 这可能吗？