<button id='showel'>Отобразить элемент</button>
<div class="hello">Hello</div>
<button id='pageload'>Перезагрузить страницу</button>
.hello{
display: none;
}
$('#showel').click(function(){
$('.hello').css('display', 'block');
});
$('#pageload').click(function(){
location.reload();
setTimeout(function(){$('#showel')[0].click();}, 5000);
});
有没有办法让事件 $('#showel')[0].click(); 更新后调用？ https://jsfiddle.net/Nata_Hamster/vpeqmd85/
function format(n) {
return n.replace('.', ',') + "%";
//return n + "%";
}
var h = format(3.5);
alert(h);您需要将点替换为逗号，即结果应该是"3,5%". Replace必须在函数内部，必须为ionRangeSlider. 将 n 转换为数字或字符串也无济于事。
<div class="parent">
<a class="child" id="child">Child</a>
</div>
<div class="parent2">
<a class="child2" id="child2">Child with argument</a>
</div>
child.addEventListener('click', Handling);
child2.addEventListener('click', Handling(3));
function Handling(arg) {
var _this = this;
if (_this.parentElement) {
alert(_this.parentElement);
}
else {alert("no parent, arg="+arg);}
}
https://jsfiddle.net/Nata_Hamster/o7xf5j9s/
如果调用不带参数的处理函数，则返回父级。当您尝试使用参数调用时，它会丢失。
<div class="col">
<div class="field undecided">
<input id="opt" type="checkbox" value="no" />
<label for="opt">no</label>
</div>
<div class="field">
<input id="opt1" type="checkbox" value="cat" />
<label for="opt1">cat</label>
</div>
<div class="field">
<input id="opt2" type="checkbox" value="dog" />
<label for="opt2">dog</label>
</div>
<div class="field">
<input id="opt3" type="checkbox" value="hamster" />
<label for="opt3">hamster</label>
</div>
<div class="field">
<input id="opt4" type="checkbox" value="rat" />
<label for="opt4">rat</label>
</div>
</div>
$(':checkbox').click(function(){
if ($(this).is(':checked')) {
if ($(this)[0].defaultValue === 'no') {
$(this).parents('.col').find('.field').addClass('disabled-answer');
//$(this)[0].val('no').removeClass('disabled-answer');
$('.undecided').removeClass('disabled-answer');
}
}
else {$(this).parents('.col').find('.field').removeClass('disabled-answer');}
});
When "no" is selected, all options except "no" itself should become inactive. 在所有元素的点击活动中被禁用，然后“返回”为“否”。但是访问“否”的唯一方法是分配一个额外的未定类。它将它视为集合的一个元素（例如，$(this)[0].val('no')），就好像它是集合的所有元素一样。我想知道在这种情况下如何处理第二种方式是正确的。
如果输入的数字等于数组 var arr = [1, 21, 31, 41] 的任何元素，则脚本应显示单词“year”；设置是否指定了特定元素，例如 arr[0]，但 arr[i] 不识别
<input id="myTextBox" type="text"/>
<div><span class="value"></span><span class="year"></span></div>
$("#myTextBox").on("change keyup", function() {
var value = $(this).val()
$('.value').text(value);
var arr = [1, 21, 31, 41]; // "год"
for (var i = 0; i < arr.length; i++){
if (value == arr[i]) {$('.year').text("год")}
else {$('.year').text("лет")}
}
});
处理图像时，使用以下代码
function changeImage(e) {
var files = e.target.files;
var fr = new FileReader();
fr.onloadend = function() {
document.getElementById('img').src = fr.result;
};
fr.readAsDataURL(files[0]);
}
我是否正确理解“文件”是输入类型<input type="files"> https://api.jquery.com/file-selector/#file1？如果是这样，我在哪里可以找到描述这种用法的官方文档？谷歌只提供论坛链接，但必须有来源。JQ Dock 中不搜索“files”，只搜索类似的词，例如其他 Dock 中的“:file”。
<div class="step1">
<input type="checkbox">
<input type="checkbox">
</div>
页面上有几个类似的元素，类名分别是 step1、step2 ...我们需要创建一个元素数组，每个元素显示子元素的数量（在本例中为复选框。）
stepAnswers[1] = $('.step1 input').length;
原来是这样写数量的，但是通过数组收集是不可能的
for (let i in stepAnswers) {
stepAnswers[i] = $('.step'+[i]+' input').length;
}
function generateNew() {
var data = `<div class="step">
<input id="opt21" type="checkbox"/>
<label for="opt21">red</label>
<input id="opt22" type="checkbox"/>
<label for="opt22">green</label>
</div>`;
$('.new').html(data);
}
$('button').on('click', generateNew)
$('.step :checkbox').on('click', function() {
alert('Чекбокс нажат')
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="step">
<input id="opt21" type="checkbox" />
<label for="opt21">red</label>
<input id="opt22" type="checkbox" />
<label for="opt22">green</label>
</div>
<button>Новые чекбоксы</button>
<div class="new"></div>.parent {
background-color: red;
width: 200px;
height: 200px;
opacity: 0.3;
position: relative;
}
.child {
background-color: green;
width: 100px;
height: 100px;
opacity: 1;
z-index: 10;
position: relative;
}<div class="parent">
<div class="child"></div>
</div>属性：opacity: 1;对于子元素，浏览器似乎会忽略，而如果您设置，例如，0.2（小于父元素） - 显示。
有 3 个 $('.ground') 和 3 个 $('.tip') 对象
无法通过 jQuery 对象 https://learn.jquery.com/using-jquery-core/jquery-object/
<div class='ground'>red</div>
<div class='ground'>green</div>
<div class='ground'>blue</div>
<div class='tip' style="background-color:red;"></div>
<div class='tip' style="background-color:green;"></div>
<div class='tip' style="background-color:blue;"></div>
<script>
var gruond = $('.ground');
for (i=0; i<=gruond.length; i++) {
gruond[i].mouseenter(function(){
$('.tip')[i].fadeIn("slow");
})
gruond[i].mouseleave(function(){
$('.tip')[i].fadeOut("slow");
})
}
</script>
https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
return a - b;
});
console.log(numbers); // [1, 2, 3, 4, 5]
1.让我们以码头为例。什么是a，什么是b？这些元素是数字数组吗？如果是，它们是如何选择的？
2.如果没有参数，.sort(function(){ return Math.random()-0.5; })- 随机数组改组的工作代码。Math.random()-0.5 - 随机数（-0.5; 0.5]。按0、按0.1等排序有什么逻辑意义（按id排序，比如按年龄、按数字排序不清楚）？
<a id="test"></a>
<script>
var test = $('#test');
console.log(test);
console.log(test[0]);
</script>
我两次请求测试选择器的内容，在第二种情况下，索引为 0。图片显示了控制台发出的内容。这种“现象”的名称是什么——你只能通过分配一个索引（或者它不是一个索引？）来获得 html 格式，在第一种情况下是什么样的表示？
forest[0] = {
x : cvs.width/2-width_path_near-tree_size/2,
y : cvs.height/2-tree_size+10,
size : tree_size,
}
function draw() {
for (var i=0; i<forest.length; i++){
ctx.drawImage(masTree[randTree], forest[i].x, forest[i].y, forest[i].size, forest[i].size);
if(forest[i].y == 3*cvs.height/4){
forest.push({
y : cvs.height/2-tree_size+10,
x : cvs.width/2-width_path_near-tree_size/2,
size : tree_size
});
}
forest[i].y += 0.5;
forest[i].x -= 0.4;
forest[i].size += 0.4;
}
requestAnimationFrame(draw);
}
http://jsfiddle.net/Nata_Hamster/et7f9p6w/
如果在这种情况下将 forest[0] 声明（仅它，或 forest[0] 和 var forest ）放置在 draw() 内，使其成为本地，则 draw 不起作用（x，y，大小不变） http： //jsfiddle.net /Nata_Hamster/8g697z02/ JS背后的逻辑是什么？
window.onload = function(){
draw();
}
window.onload = draw;
这两个条目都是有效的，为什么在第一种情况下需要括号（参数的空列表），在第二种情况下它可以在没有它们的情况下工作。JS背后的逻辑是什么？
if (localStorage.getItem('todo')!=undefined){
var tasks = [];
tasks = JSON.parse(localStorage.getItem('todo'));
for (var key in tasks) {
$('#list').append("<li >" + tasks[key] + "</li>");
}
}
function SaveTask(){
var tasks = [];
$('li.task').each(function(i, el){
var val = $(el).text();
tasks.push(val);
});
console.log(tasks);
localStorage.setItem('todo', JSON.stringify(tasks));
}
function AddTask(){
var val = $('#new-todo').val();
var del = $('<a class="del" href="#" />').text('×');
var li = $('<li class="task" />').html(val).append(del);
if (val) {
li.appendTo($('#list'));
$('#new-todo').val('');
}
del.click(function () {
li.remove();
});
}
$('#btn-enter').click(function () {
AddTask();
SaveTask();
});
重新加载页面时，仅显示最近添加的页面，而不是全部。如果 var 任务 = []; 使它成为全局，有一个不正确的保存到数组中。这里有 2 个选项 - 调整 SaveTask() 或 localStorage。会考虑一切... http://jsfiddle.net/Nata_Hamster/6vhas75k/
我不太明白这段代码中jqury的逻辑（TODO列表）
$('.del').click(function () {
li.remove();
});
为什么解释器删除当前元素，以及以下，为什么不都是 lis http://jsfiddle.net/Nata_Hamster/zr4a2v9e/
如果有的话，通过使 $('.del') 成为变量来解决正确的删除问题，然后它成为当前 var li 的一部分，而不是页面http://jsfiddle.net/Nata_Hamster/01py6wgn/上的选择器 ，只是想了解第一种情况 jq 中的行为，而不是在不触及之前添加的元素的情况下引导它。
有必要同时将空格变为<br>，并且第一个字母变为大写。
$(this).html(s.charAt(0).toUpperCase()+s.substr(1).toLowerCase());
$(this).html(s.replace(/\s/g, "<br>"));
他们单独工作。如果两者都在一个函数中，则只有最后一个会触发。
var pos_y = canvas.height;- 这样的条目无效（整个画布立即变为空白）。当您尝试设置高度时document.getElementById。
在这种情况下，方法canvas接受canvas.height. 为什么代码的有效性甚至会删除一些无害的东西
var h = document.getElementById('drawingCanvas').clientHeight;
var canvas;
var context;
window.onload = function() {
canvas = document.getElementById("drawingCanvas");
context = canvas.getContext("2d");
setTimeout("drawFrame()", 300);
}
var pos_y = 200; // не принимает canvas.height
function drawFrame(){
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = 'yellow';
context.strokeStyle = 'yellow'
context.fill();
context.beginPath();
context.arc(canvas.width/2, pos_y, 30, 0,Math.PI*2, true);
context.stroke();
pos_y-=1;
setTimeout("drawFrame()", 300);
}
我做了一个动画：一个鬼出现又消失。而且，他在场的时间少于他不在场的时间，这正是我想要的。
但是出现的时间是不能调节的，但是，好像是取决于整个区间的时间t
var t = setInterval(function appear(){
var ghost = document.getElementById("ghost");
if (ghost.style.display == "none")
{ghost.style.display = "block";}
else
{var t1 = setTimeout(function disappear(){
ghost.style.display = "none";
}, 1)}
}, 6000)
它应该按功能消失t1。我想做的更少。延迟t1减少到1ms，但没有响应。为什么是这样？
var t = setInterval(function appear() {
var ghost = document.getElementById("ghost");
if (ghost.style.display == "none") {
ghost.style.display = "block";
} else {
var t1 = setTimeout(function disappear() {
ghost.style.display = "none";
}, 1)
}
}, 6000)body {
background: black url(https://s.cdpn.io/16327/texture_bg.jpg) no-repeat 50% 0px;
}
#ghost {
position: absolute;
left: 25%;
display: none;
}<img id="ghost" src="https://isstatic.askoverflow.dev/nrYtc.png" width="280">升级找到的代码。在原作中，一缕缕雾气在画布上上下移动并消失。我试图将已变为最大值的高度设置为 0（更准确地说，反之亦然，我们从下到上），并且动画循环。我还没有完全理解变量的本质。从var td = new Date().getTime() - p.start;数学上讲，这通常是（-延迟），但是变量是不断增长的（与实时相关？）
if (p.newTop < 0)
{
newTop = 100;
}
移动到坐标 100（100 纯粹是为了清楚起见）成功。但是“归零” td 以将其分配给 newTop 以获取新线圈是行不通的。
const TIMEOUT = 40;
var stTime = 0;
canvasWidth = 1600;
canvasHeight = 200;
pCount = 0;
pCollection = new Array();
var puffs = 1;
var particlesPerPuff = 50; //2000
var img = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/85280/smoke2.png';
var smokeImage = new Image();
smokeImage.src = img;
for (var i1 = 0; i1 < puffs; i1++) {
var puffDelay = i1 * 1500;
for (var i2 = 0; i2 < particlesPerPuff; i2++) {
addNewParticle((i2 * 50) + puffDelay);
}
}
draw(new Date().getTime(), 3000);
function addNewParticle(delay) {
var p = {};
p.top = canvasHeight;
p.left = randBetween(-200, 800);
p.start = new Date().getTime() + delay;
p.life = 8000;
p.speedUp = 30;
p.speedRight = randBetween(0, 20);
p.startOpacity = .3
p.newTop = p.top;
p.newLeft = p.left;
p.size = 200;
p.growth = 10;
pCollection[pCount] = p;
pCount++;
}
function draw(time) {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, c.width, c.height);
for (let i = 0; i < pCount; i++) {
var p = pCollection[i];
var td = new Date().getTime() - p.start;
console.log(td);
var frac = td / p.life
var newTop = p.top - (p.speedUp * (td / 1000));
var newLeft = p.left + (p.speedRight * (td / 1000));
var newOpacity = Math.max(p.startOpacity * (1), 0);
//var newOpacity = Math.max(p.startOpacity * (1-frac),0);
var newSize = p.size + (p.growth * (td / 1000));
p.newTop = newTop;
p.newLeft = newLeft;
if (p.newTop < 0) {
//td = new Date().getTime() - p.start;
newTop = 100;
}
ctx.fillStyle = 'rgba(150,150,150,' + newOpacity + ')';
ctx.globalAlpha = newOpacity;
ctx.drawImage(smokeImage, newLeft, newTop, newSize, newSize);
}
requestAnimationFrame(draw);
}
function randBetween(n1, n2) {
var r = (Math.random() * (n2 - n1)) + n1;
return r;
}body {
background: black url(https://s.cdpn.io/16327/texture_bg.jpg) no-repeat 50% 0px;
}
#myCanvas {
height: 300px;
width: 2400px;
max-width: 99%;
min-width: 800px;
position: absolute;
bottom: 0;
z-index: 2;
}
#house {
position: absolute;
top: 20%;
left: 40%;
}<canvas id="myCanvas" height="200" width="800"></canvas>https://jsfiddle.net/Nata_Hamster/ut42nb5e/2/