Архивы javascript - Страница 5 из 10

Копирование в буфер обмена на JavaScript

26.05.2020 Павел Грибов WEB

В JavaScript скопировать в буфер обмена можно только то что находится внутри тега <input>. Потому приходиться для копирования в буфер обмена произвольного текста приходиться идти на ухищрения в виде например временного помещения текста для копирования в input. Например как-то так:

<span style='cursor: pointer;' id='ipsegsw'>192.168.1.1</span>
<script>
$('#ipsegsw').click(function() {
	    var $temp = $("<input>");
	    $("body").append($temp);
	    $temp.val($('#ipsegsw').text()).select();
	    document.execCommand("copy");
	    $temp.remove();
            console.log('IP скопирован в буфер обмена');
});
</script>

$('#ipsegsw').click(function() {

var $temp = $("<input>");

$("body").append($temp);

$temp.val($('#ipsegsw').text()).select();

document.execCommand("copy");

$temp.remove();

console.log('IP скопирован в буфер обмена');

});

</script>

Оставить комментарий javascript, буфер обмена

Удаляем кукисы, время жизни которых более заданного

03.03.2020 Павел Грибов WEB

Задача: есть сайт, на котором кукисы устанавливаются движком. Где не известно. Настроек нет (или есть, но лень-не кому копаться). Необходимо принудительно сократить время жизни куков до заданного.

Решение:

Из сложных нюансов: браузер не позволяет читать время истечения жизни (и путь) установленных кукисов. От слова никак и вообще. Защита такая..

Ну если с путем всё в принципе не так важно — просто вставлять код трущий кукисы на КАЖДОЙ странице, а не только на «начальной», то кукисы прочитаются, то со временем жизни возможен только «хук». А именно: читаем все куки. Записываем все ключи куков в локасторадж браузера с датой истечения сегодня+(какое-то количество дней). При следующем открытии страницы — проверяем дату истечения в сторадже. Если меньше текущей — трем кукисы.

Код:

dayssavecookies=7;    
function deleteLCookie(name) {
    document.cookie.split(";").forEach(function(el) {
        if(!el.indexOf(name)) {
	    var date = new Date(0);
            document.cookie = el + "=; path=/; expires=" + date.toUTCString();
	   }
	});
}    
function getAllCookies(){
  var pairs = document.cookie.split(";");
  var cookies = {};
  for (var i=0; i<pairs.length; i++){
    var pair = pairs[i].split("=");
    cookies[(pair[0]+'').trim()] = unescape(pair.slice(1).join('='));
  }
  return cookies;
}    
// получаю текущие куки браузера
cooks_values=getAllCookies();
// получаю текущие сохраненные в сторадже куки - даты
  if (localStorage["cooks_dates"]==undefined){
      ls_dates=new Map();
  } else {
    ls_dates=JSON.parse(localStorage["cooks_dates"]) 
  };
// если кука в сторадже нет, то добавляю, если истек - ту удаляю и из стораджа и из куков
for (key in cooks_values) {
    console.log(key);
    console.log(cooks_values[key]);
    // если новый кук - добавляем
    if (ls_dates[key]==undefined){
        console.log("--add to localstorage");
        datec = new Date(Date.now() + 86400e3*dayssavecookies);        
        ls_dates[key]=datec;
    };
   // если кук истек в локальном хранилище - трём его в куках и в локальном хранилище 
   if (new Date(ls_dates[key])<Date.now()){
      delete(ls_dates[key]); 
      deleteLCookie(key);
   };    
}    
localStorage.setItem("cooks_dates", JSON.stringify(ls_dates));

dayssavecookies=7;

function deleteLCookie(name) {

document.cookie.split(";").forEach(function(el) {

if(!el.indexOf(name)) {

var date = new Date(0);

document.cookie = el + "=; path=/; expires=" + date.toUTCString();

}

});

}

function getAllCookies(){

var pairs = document.cookie.split(";");

var cookies = {};

for (var i=0; i<pairs.length; i++){

var pair = pairs[i].split("=");

cookies[(pair[0]+'').trim()] = unescape(pair.slice(1).join('='));

}

return cookies;

}

// получаю текущие куки браузера

cooks_values=getAllCookies();

// получаю текущие сохраненные в сторадже куки - даты

if (localStorage["cooks_dates"]==undefined){

ls_dates=new Map();

} else {

ls_dates=JSON.parse(localStorage["cooks_dates"])

};

// если кука в сторадже нет, то добавляю, если истек - ту удаляю и из стораджа и из куков

for (key in cooks_values) {

console.log(key);

console.log(cooks_values[key]);

// если новый кук - добавляем

if (ls_dates[key]==undefined){

console.log("--add to localstorage");

datec = new Date(Date.now() + 86400e3*dayssavecookies);

ls_dates[key]=datec;

};

// если кук истек в локальном хранилище - трём его в куках и в локальном хранилище

if (new Date(ls_dates[key])<Date.now()){

delete(ls_dates[key]);

deleteLCookie(key);

};

}

localStorage.setItem("cooks_dates", JSON.stringify(ls_dates));

Оставить комментарий cookies, javascript

Копирование объектов в Javascript

06.02.2020 Павел Грибов WEB

В Javascript лично мне немножко не привычное поведение при присвоении одного объекта другому. Например:

otvet_4={        
        start_button : 1,
        concurent : 22
}

qwest=otvet_4;
qwest.start_button=10;

console.log(qwest.start_button);
console.log(otvet_4.start_button);

otvet_4={

start_button : 1,

concurent : 22

}

qwest=otvet_4;

qwest.start_button=10;

console.log(qwest.start_button);

console.log(otvet_4.start_button);

Выведет на экран две цифры 10. Т.е. меняется и первоначальный обьект?? Фактически значит знаком =, создается не копия, а ссылка на объект.

Одним из методов позволяющих «истинно копировать», является применение например такого трюка:

otvet_4={
 start_button : 1,
 concurent : 22
}

qwest=JSON.parse(JSON.stringify(otvet_4));
qwest.start_button=10;

console.log(qwest.start_button);
console.log(otvet_4.start_button);

otvet_4={

start_button : 1,

concurent : 22

}

qwest=JSON.parse(JSON.stringify(otvet_4));

qwest.start_button=10;

console.log(qwest.start_button);

console.log(otvet_4.start_button);

В этом случае в консоль выведет 1 и 10, что и ожидали.. Так-же можно воспользоваться функцией Object.assign… Но тут есть тоже подводные камни. Хороший материал по копированию объектов в Javascript тут

Оставить комментарий javascript, копирование, обьекты

Функция «посмотреть пароль» на сайте

16.01.2020 Павел Грибов WEB

Иногда бывает полезно раскрыть «звездочки» в теле тэга input при типе равном password. Вообще javascript не позволяет заменять тип «на лету» (например на text), но! как всегда это ограничение можно достаточно просто обойти — просто удалим обьект input и заменим его другим. Например как-то так:

           <div id="input_pass_div">
                <input type="password" id="password_login_form" class="form-control input-shadow" placeholder="Пароль">
            </div>
            <div class="form-control-position">
                <i style="cursor: pointer" onclick="ShowPassMe()" class="icon-eye"></i>
            </div>
<script>     
    tgpass=false;
    function ShowPassMe(){ 
       ps=$("#password_login_form").val();
       $("#password_login_form").remove();  
       if (tgpass==false){
         $("#input_pass_div").html('<input type="text" id="password_login_form" class="form-control input-shadow" placeholder="Пароль">');
         tgpass=!tgpass;
       } else {
           tgpass=!tgpass;
           $("#input_pass_div").html('<input type="password" id="password_login_form" class="form-control input-shadow" placeholder="Пароль">');
       };
       $("#password_login_form").val(ps);
    };    
</script>

</div>

</div>

tgpass=false;

function ShowPassMe(){

ps=$("#password_login_form").val();

$("#password_login_form").remove();

if (tgpass==false){

$("#input_pass_div").html('<input type="text" id="password_login_form" class="form-control input-shadow" placeholder="Пароль">');

tgpass=!tgpass;

} else {

tgpass=!tgpass;

$("#input_pass_div").html('<input type="password" id="password_login_form" class="form-control input-shadow" placeholder="Пароль">');

};

$("#password_login_form").val(ps);

};

</script>

Оставить комментарий javascript, показать пароль

Прогрессбар на vue.js

14.01.2020 Павел Грибов WEB

Например можно реализовать как-то так (в примере на самом деле два прогрессбара). К сожалению всёж пока выходит сложнее для чтения и понимания чем «чистый» javascript+jquery

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>        
</head>
<body>
    <table id="hotels_list"></table>
    <div id="hotels_pager"></div>  
    <div id="app">
        <div class="container">
            <div class="row">
                    <div class="col-6">      
                        <persent v-bind:msg="pers1"></persent>
                    </div>
                    <div class="col-6">    
                        <persent v-bind:msg="pers2"></persent>
                    </div>                
            </div>    
        </div>                
    </div>
<script>    
Vue.component('persent', {
    props: ['msg'],
    template: '<div><div>{{ msg.txt }}</div><div class="progress"><div class="progress-bar" role="progressbar" :style="msg.style" :aria-valuenow="msg.value" aria-valuemin="0" aria-valuemax="100">{{ msg.value }}%</div></div></div>'
});      
var app = new Vue({
  el: '#app',
  data: {
    timing: null,
    pers1 : {
        value: 10,
        txt:'Добавление новых',
        style:'width:20%'
    },
    pers2 : {
        value: 70,
        txt:'Обновление',
        style:'width:70%'
    }
  },
  mounted(){
    console.log("-загрузились полностью..");  
    this.runTiming();
  },
  methods: {
      runTiming() {
        this.timing = setInterval(this.changeCurrentPers, 2000)          
      },
      changeCurrentPers(){
         vl=this;
        $.post('progress.txt',{}, function(data){                          
                vl.pers1.value=data;
                vl.pers1.style='width:'+data+'%';
        });       
        $.post('progress_update.txt',{}, function(data){
                vl.pers2.value=data;
                vl.pers2.style='width:'+data+'%';
        });                 
      }
  },  
});

</head>

<body>

</div>

</div>

Vue.component('persent', {

props: ['msg'],

template: '<div><div>{{ msg.txt }}</div><div class="progress"><div class="progress-bar" role="progressbar" :style="msg.style" :aria-valuenow="msg.value" aria-valuemin="0" aria-valuemax="100">{{ msg.value }}%</div></div></div>'

});

var app = new Vue({

el: '#app',

data: {

timing: null,

pers1 : {

value: 10,

txt:'Добавление новых',

style:'width:20%'

pers2 : {

value: 70,

txt:'Обновление',

style:'width:70%'

}

mounted(){

console.log("-загрузились полностью..");

this.runTiming();

methods: {

runTiming() {

this.timing = setInterval(this.changeCurrentPers, 2000)

changeCurrentPers(){

vl=this;

$.post('progress.txt',{}, function(data){

vl.pers1.value=data;

vl.pers1.style='width:'+data+'%';

});

$.post('progress_update.txt',{}, function(data){

vl.pers2.value=data;

vl.pers2.style='width:'+data+'%';

});

}

});

Всё ищу, гдеб его (VUE.js) можно применить.. Пока выходит «надумано»..

Один комментарий javascript, progressbar, vue

« 1 … 3 4 5 6 7 … 10 »

Пн	Вт	Ср	Чт	Пт	Сб	Вс
				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