小编And*_*one的帖子
如何在 div - CSS 中添加底部曲线？
以下是我的代码，其中我无法创建底部曲线，但增加 border-top-left-radius/border-top-right-radius 无法创建如图所示的凹凸。让我知道如何仅使用 CSS 处理此问题。
代码：
.container {
position: relative;
}
.rect {
width: 334.5px;
height: 223px;
background: #34EFEE;
text-align: center;
line-height: 223px;
}
.rect:after {
content: '';
position: absolute;
bottom: 0px;
width: 334.5px;
height: 15px;
background: #FFFFFF;
left: 0;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}<div class="container">
<div class="rect">
<h3>334.5 X 223</h3>
</div>
</div>预期输出 -
PLNKR —— http: //plnkr.co/edit/7oTCHyn8PFABri0KHSrH?p=preview
推荐指数
解决办法
查看次数
为什么我的减少累加器复位？
如何保留我的reduce函数的累积值？每次迭代都会重置对象值.
const a = [1, 2, 3, 4, 5];
const b = {
1: {
name: 'Dan',
age: 25
},
2: {
name: 'Peter',
age: 28
},
3: {
name: 'Mark',
age: 38
},
4: {
name: 'Larry',
age: 32
},
5: {
name: 'Simon',
age: 25
},
}
const f = a.reduce((acc, val) => {
console.log({
acc
})
return {
[val]: {
age: b[val].age
}
}
}, {})
console.log(f); // 5: {age: 25}我期望的结果是:
{
1: { …推荐指数
解决办法
查看次数
如何使用自定义css制作圆形复选框？
如何使用自定义 CSS 创建一个四舍五入的复选框？类似于下图的东西。我知道有像 bootstrap 这样的框架提供了这一点，但我不想将框架用于这个唯一目的，因为我已经在使用角材料。
HTML代码：
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-model="notification.checked">
</label>
提前致谢。
推荐指数
解决办法
查看次数
如果aria标签更改，则使屏幕阅读器重新读取
如果aria标签的内容发生更改，是否可以使屏幕阅读器重新读取select元素？
我做了一个简单的代码段，我知道我没有遵循大多数咏叹调惯例，以表明我的意思。
如果打开屏幕阅读器并单击div，它将读取标签“ unchecked”（如果未按下），标签将更新，但屏幕阅读器将保持沉默。尽管单击并再次打开它会读取新标签。
这是使屏幕阅读器读取更新的正确方法，还是我不知道的另一种方法？
let toggleSwitch = document.querySelector('.toggle-switch');
toggleSwitch.addEventListener("keyup", function(e) {
let code = (e.keyCode ? e.keyCode : e.which);
if (code == 32) {
let nextState = toggleSwitch.getAttribute('aria-label') == 'unchecked' ? 'checked' : 'unchecked';
toggleSwitch.setAttribute('aria-label', nextState);
}
}).toggle-switch {
width: 50px;
height: 50px;
}
.toggle-switch[aria-label="unchecked"] {
background: red;
}
.toggle-switch[aria-label="checked"] {
background: green;
}Press space to change state
<div class="toggle-switch" tabindex="0" aria-label="unchecked"></div>谢谢你的帮助。
推荐指数
解决办法
查看次数
Anime.js如何反转此动画？
我最近开始使用Anime.js来使我的设计动起来，现在我在其中停留了一段时间，对很多人来说这很简单！我有一个扩大我的div的按钮，如果再次单击该图标，它希望div处于其初始状态。我的HTML：
var boxGetsLarger = anime({
targets: '.agent-button',
width: {
value: '+=300',
duration: 200,
easing: 'linear'
},
borderRadius: {
value: 83
},
duration: 200,
height: {
value: '+=20'
},
easing: 'linear',
autoplay: false
});
document.querySelector('.agent-button').onclick = boxGetsLarger.play;.agent-button {
display: flex;
justify-content: space-between;
border-radius: 100px;
background: #ffffff;
box-shadow: 0pt 2pt 10pt #0000001f;
height: 91px;
width: 91px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
<div class="agent-button close">
<img src="img/audio-bars.svg">
</div>推荐指数
解决办法
查看次数
用奇数除以100 - Javascript
我试图将100除以一个数字,所以我得到该数字的百分比放入一个变量进入FOR ...并且FOR将百分比放入一个数组......或多或少这个:
var number = 4
var percentage = 100 / number
var somaPercentual = new Array();
for (i = 0; i < number; i++) {
var percentage = percentage
somaPercentual.push(percentage)
}
console.log(somaPercentual)在这种情况下,我的数组会来:
25,25,25,25
所以我需要总结所有数组值并给出100!到目前为止一直很好......当被除以100的数字是奇数时,头痛开始了!
例如,如果变量数等于3,我的数组将给出= 33.33,33.33,33.33,其中总和将给出99.99 ....然后搞砸了!当数字为奇数时,总会发生这种情况.
谁能给我一个亮点？
推荐指数
解决办法
查看次数
该按钮不起作用
我已经使用javascript创建了一个按钮,但是我设置的onClick事件似乎不起作用.
这是我的代码:
function myFunction() {
console.log('button pressed')
}
var BUTTON = document.createElement("button");
BUTTON.name = "not";
BUTTON.type = "button";
BUTTON.onclick = "myFunction()";
var textBUTTON = document.createTextNode("TEST");
BUTTON.appendChild(textBUTTON);
var output = document.getElementById("test");
output.appendChild(BUTTON);<div id="test"></div>出现由javascript创建的按钮,但该函数myFunction()不执行任何操作.
如果我使用HTML手动创建按钮,它将按预期工作
function myFunction() {
console.log('button pressed')
}<button name="not" type="button" onClick="myFunction()">TEST</button>推荐指数
解决办法
查看次数
Javascript:排序一个字符串数字数组
我有一系列学校成绩,如下所示
(注意'N'代表没有等级,'K'代表幼儿园)
const toSort = ['1','3','4','5','6','7','9','10','11','12','K','2 ", 'N', '8'];
使用javascript sort()方法我想安排数组,使它看起来像
const sorted = ['K','1','2','3','4','5','6','7','8','9','10','11 ",'12' , 'N'].
这是我的尝试:
const toSort = ['1', '3', '4', '5', '6', '7', '9', '10', '11', '12', 'K', '2', 'N', '8'];
toSort.sort();
// Produces: ["1", "10", "11", "12", "2", "3", "4", "5", "6", "7", "8", "9", "K", "N"]
const test = toSort.sort((a, b) => {
if (a === 'K') {
return -1;
}
return Number(a) < Number(b) ? -1 : Number(a) > Number(b) ? 1 …推荐指数
解决办法
查看次数
ES6破坏分配
function drawES2015Chart({size = 'big',cords = {x: 0,y: 0},radius = 25} = {}) {
console.log(size, cords, radius);
// do some chart drawing
}
drawES2015Chart({
cords: {x: 18, y: 30},
radius: 30
});我在Mozilla的开发者网站上的Destructuring assignment下找到了这个片段.
我正在学习ES6解构分配但是已经陷入困境,我无法理解这个函数如何接受一个参数并设置默认值？
推荐指数
解决办法
查看次数
在课堂内使用es6箭头功能
当我更改一个函数时draw(){ //},draw = () => { // }
我收到一个错误,如"Uncaught SyntaxError:Unexpected token =".可能是什么原因？
推荐指数
解决办法
查看次数