Как сделать финансовый график на react.js и d3.js чтобы было примерно как на https://finquota.com/WDAY/?
Недавно наткнулся в одном проекте:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
var count = 0; function increaseCount() { count = count + 1; } function decreaseCount() { count = count - 1; } function updateCount() { if (count >= 10) { document.getElementById('count').style.color = 'red'; } else { document.getElementById('count').style.color = 'black'; } } increaseCount(); increaseCount(); increaseCount(); decreaseCount(); updateCount(); |
Нашел такое вот счастье на одном сайте Нет бы добавить общий класс или через запятую указать селекторы, но нет вместо этого пожалуйста:
1 2 3 4 5 6 7 8 9 |
$('#fade').fadeOut() $('#popuprel1').fadeOut() $('#popuprel2').fadeOut() $('#popuprel3').fadeOut() $('#popuprel4').fadeOut() $('#popuprel5').fadeOut() $('#popuprel6').fadeOut() $(".popupbox1").fadeOut() return false; |
Мастер анимации на Javascript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
setTimeout("$('#text_home').html('s_')", "0"); setTimeout("$('#text_home').html('so_')", "150"); setTimeout("$('#text_home').html('sof_')", "300"); setTimeout("$('#text_home').html('soft_')", "450"); setTimeout("$('#text_home').html('softw_')", "600"); setTimeout("$('#text_home').html('softwa_')", "750"); setTimeout("$('#text_home').html('softwar_')", "900"); setTimeout("$('#text_home').html('software_')", "1050"); setTimeout("$('#text_home').html('software_')", "1200"); setTimeout("$('#text_home').html('softwar_')", "1350"); setTimeout("$('#text_home').html('softwa_')", "1500"); setTimeout("$('#text_home').html('softw_')", "1650"); setTimeout("$('#text_home').html('soft_')", "1800"); setTimeout("$('#text_home').html('sof_')", "1950"); setTimeout("$('#text_home').html('so_')", "2100"); setTimeout("$('#text_home').html('s_')", "2250"); setTimeout("$('#text_home').html('a_')", "2400"); setTimeout("$('#text_home').html('ap_')", "2550"); setTimeout("$('#text_home').html('apl_')", "2700"); setTimeout("$('#text_home').html('apli_')", "2850"); setTimeout("$('#text_home').html('aplic_')", "3000"); setTimeout("$('#text_home').html('aplica_')", "3150"); setTimeout("$('#text_home').html('aplicac_')", "3300"); setTimeout("$('#text_home').html('aplicaci_')", "3450"); setTimeout("$('#text_home').html('aplicacio_')", "3600"); setTimeout("$('#text_home').html('aplicacion_')", "3750"); setTimeout("$('#text_home').html('aplicacione_')", "3900"); setTimeout("$('#text_home').html('aplicaciones_')", "4050"); setTimeout("$('#text_home').html('aplicaciones_')", "4200"); setTimeout("$('#text_home').html('aplicacione_')", "4350"); setTimeout("$('#text_home').html('aplicacion_')", "4500"); setTimeout("$('#text_home').html('aplicacio_')", "4650"); setTimeout("$('#text_home').html('aplicaci_')", "4800"); setTimeout("$('#text_home').html('aplicac_')", "4950"); setTimeout("$('#text_home').html('aplica_')", "5100"); setTimeout("$('#text_home').html('aplic_')", "5250"); setTimeout("$('#text_home').html('apli_')", "5400"); setTimeout("$('#text_home').html('apl_')", "5500"); setTimeout("$('#text_home').html('ap_')", "5700"); setTimeout("$('#text_home').html('a_')", "5850"); |
Как найти элемент в jQuery? Использовать множество раз Parent 😘
1 2 3 4 5 6 7 8 9 10 11 12 |
$('.block2-btn-addcart').each(function(){ var nameProduct = $(this).parent().parent().parent().find('.block2-name').html(); $(this).on('click', function(){ swal(nameProduct, "is added to cart !", "success"); }); }); $('.block2-btn-addwishlist').each(function(){ var nameProduct = $(this).parent().parent().parent().find('.block2-name').html(); $(this).on('click', function(){ swal(nameProduct, "is added to wishlist !", "success"); }); }); |
Как не надо добавлять заголовки через JavaScript 😅
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
function addhead(headpicid, headid){ smjq('#'+headpicid+'_outside tr:nth-child(1) td:nth-child(1)').append('<img class="hdimg" style="padding:0;margin:0" src="http://img01.tsdm.net/frame/' + headid + '/1.png" />'); smjq('#'+headpicid+'_outside tr:nth-child(1) td:nth-child(2)').append('<img class="hdimg" style="padding:0;margin:0" src="http://img01.tsdm.net/frame/' + headid + '/2.png" />'); smjq('#'+headpicid+'_outside tr:nth-child(1) td:nth-child(3)').append('<img class="hdimg" style="padding:0;margin:0" src="http://img01.tsdm.net/frame/' + headid + '/3.png" />'); smjq('#'+headpicid+'_outside tr:nth-child(2) td:nth-child(1)').append('<img class="hdimg" style="padding:0;margin:0" src="http://img01.tsdm.net/frame/' + headid + '/4.png" />'); smjq('#'+headpicid+'_outside tr:nth-child(2) td:nth-child(3)').append('<img class="hdimg" style="padding:0;margin:0" src="http://img01.tsdm.net/frame/' + headid + '/5.png" />'); smjq('#'+headpicid+'_outside tr:nth-child(3) td:nth-child(1)').append('<img class="hdimg" style="padding:0;margin:0" src="http://img01.tsdm.net/frame/' + headid + '/6.png" />'); smjq('#'+headpicid+'_outside tr:nth-child(3) td:nth-child(2)').append('<img class="hdimg" style="padding:0;margin:0" src="http://img01.tsdm.net/frame/' + headid + '/7.png" />'); smjq('#'+headpicid+'_outside tr:nth-child(3) td:nth-child(3)').append('<img class="hdimg" style="padding:0;margin:0" src="http://img01.tsdm.net/frame/' + headid + '/8.png" />'); smjq('#'+headpicid+'_outside tr:nth-child(1) td:nth-child(1)').css({"background":"url(http://img01.tsdm.net/frame/" + headid + "/1.png) no-repeat"}); smjq('#'+headpicid+'_outside tr:nth-child(1) td:nth-child(2)').css({"background":"url(http://img01.tsdm.net/frame/" + headid + "/2.png) repeat-x"}); smjq('#'+headpicid+'_outside tr:nth-child(1) td:nth-child(3)').css({"background":"url(http://img01.tsdm.net/frame/" + headid + "/3.png) no-repeat"}); smjq('#'+headpicid+'_outside tr:nth-child(2) td:nth-child(1)').css({"background":"url(http://img01.tsdm.net/frame/" + headid + "/4.png) repeat-y"}); smjq('#'+headpicid+'_outside tr:nth-child(2) td:nth-child(3)').css({"background":"url(http://img01.tsdm.net/frame/" + headid + "/5.png) repeat-y"}); smjq('#'+headpicid+'_outside tr:nth-child(3) td:nth-child(1)').css({"background":"url(http://img01.tsdm.net/frame/" + headid + "/6.png) no-repeat"}); smjq('#'+headpicid+'_outside tr:nth-child(3) td:nth-child(2)').css({"background":"url(http://img01.tsdm.net/frame/" + headid + "/7.png) repeat-x"}); smjq('#'+headpicid+'_outside tr:nth-child(3) td:nth-child(3)').css({"background":"url(http://img01.tsdm.net/frame/" + headid + "/8.png) no-repeat"}); } |
Когда знаешь как setTimeout работает в Javascript 😁
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
let header = document.querySelector('.header'); let elem = document.querySelector('.elem'); setTimeout(() => header.style.opacity = '0', 1000); setTimeout(() => header.style.opacity = '0.15', 1100); setTimeout(() => header.style.opacity = '0.2', 1200); setTimeout(() => header.style.opacity = '0.25', 1300); setTimeout(() => header.style.opacity = '0.3', 1400); setTimeout(() => header.style.opacity = '0.35', 1500); setTimeout(() => header.style.opacity = '0.4', 1600); setTimeout(() => header.style.opacity = '0.45', 1700); setTimeout(() => header.style.opacity = '0.5', 1800); setTimeout(() => header.style.opacity = '0.55', 1900); setTimeout(() => header.style.opacity = '0.6', 2000); setTimeout(() => header.style.opacity = '0.65', 2100); setTimeout(() => header.style.opacity = '0.7', 2200); setTimeout(() => header.style.opacity = '0.8', 2300); setTimeout(() => header.style.opacity = '0.9', 2400); setTimeout(() => header.style.opacity = '1', 2500); |
Нашел метод в watch Vue.js 😄
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
stringInput (newVal, oldVal) { // todo: adjust timing // console.log('new:' + newVal) // console.log('old:' + oldVal) switch (newVal) { // services case 'Our Services': this.selected = 0 break // projects case 'Projects': this.selected = 1 break // team case 'Team Members': this.selected = 2 break // pricing case 'Pricing': this.selected = 3 break // else default: this.selected = 0 break } this.showChange(this.selected) } |
Нашел интересную функцию изменения значения в Vue.js
1 2 3 4 5 6 7 8 |
changeVal (way) { if (way === 0 && this.count !== 1) { this.count -= 1 } if (way === 1) { this.count += 1 } } |
В каждой функции должен быть setTimeout в Javascript 🙃
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
login() { return new Promise((resolve, reject) => { setTimeout(() => { this.state.isLoggedIn = true; resolve(this.state.isLoggedIn); }, 3000); }); } logout() { return new Promise((resolve, reject) => { setTimeout(() => { this.state.isLoggedIn = false; resolve(this.state.isLoggedIn); }, 3000); }); } |
Как генерировать лист в Javascript и output строку
1 2 3 4 5 6 7 8 9 10 11 12 |
"listgames": function(full_name) { //calls the keys and object var output = ""; for(var i = 0; i < this.type.length; i++){ //this is equaled to course for var course var ta = this.type[i]; //this is equaled to var "course" output += type.Yes_No; if(full_name){ output += " " + type.Yes_No; } output += " | "; } console.log(output); } |
Изящный код на React.js 😁 Когда сказали, что нужно react использовать
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
if (name==''){ alert("Re-enter Name") return } else if (email==''){ alert("Re-enter Email") return } else if (city==''){ alert("Re-enter City") return } else if (country==''){ alert("Re-enter Country") return } else if (job==''){ alert("Re-enter Job") return } else if (password==''){ alert("Re-enter Password") return } else if (password==repassword){ swal.fire("Good Job","Password Matches","success") } else{ swal.fire("Oops","You Need to Signup Again with Correct details","error") } |
Закончи сам код на Javascript 😀
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
class Seasons { /** * Seasons creates a seasons object */ constructor() { // ✨ initialize whatever properties are needed } /** * Seasons.prototype.next returns the next season * @returns {string} - the next season starting with "summer" * * EXAMPLE * const seasons = new Seasons() * seasons.next() // returns "summer" * seasons.next() // returns "fall" * seasons.next() // returns "winter" * seasons.next() // returns "spring" * seasons.next() // returns "summer" */ next() { // ✨ implement } } |
Вот для чего нужен jquery метод parent 😀 Легкий способ получить body элемент 🤪
1
|
$(".delete-btn").parent().parent().parent().parent().parent().parent().text() |