СОЗДАЕМ ТАБЛИЦУ ПИФАГОРА (ПСИХОМАТРИЦА)
В ТИЛЬДА

Обучение

Смотреть пример

Инструкция

1. Создаем zero block и добавляем в него html поле с КОД 1
2. Добавляем блок Т123 и вставляем КОД 2 и КОД 3
3. Публикуем страницу и вводим дату рождения )

Код 1 ( Сам код )

<html>
    
 <head>
   <title>Таблица пифагора</title>

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.1.62/jquery.inputmask.bundle.js"></script>
    <script>
    $(window).load(function()
    {
       var phones = [{ "mask": "##.##.####"}, { "mask": "##.##.####"}];
        $('#date').inputmask({
            mask: phones,
            greedy: false,
            definitions: { '#': { validator: "[0-9]", cardinality: 1}} });
    });
    </script>
    
 </head>
 <body>
    <div class="container">
	<p>
        <input class="calcInput" id="date" type="text" placeholder="ЧЧ.ММ.ГГГГ">
        <span> <button class="сalcButton" onclick="calculate()">Рассчитать</button> </span>
        
	<br>
    
 	<table class="calcTable" border="5" cellpadding="50">
        <!--    HEAER    -->
        <tr>
            <td class="light" id="summary" colspan="3">
                Дата рождения: <br><br> Число судьбы:
            </td>
            <td class="light" id="Темперамент">
                Темперамент
            </td>
        </tr>
        <!--    MAIN BODY    -->
  		<tr>
    		<td class="content" id="Характер">
                Характер
    		</td>
    		<td class="content" id="Здоровье">
    			Здоровье
    		</td>
    		<td class="content" id="Удача">
                Удача
            </td>
            <td class="light" id="Цель">
                Цель
            </td>
        </tr>
  		<tr>
    		<td class="content" id="Энергия">
    			Энергия
    		</td>
    		<td class="content" id="Логика">
    			Логика
    		</td>
    		<td class="content" id="Долг">
                Долг
            </td>
            <td class="light" id="Семья">
                Семья
            </td>
  	</tr>
    <tr>
            <td class="content" id="Интерес">
                Интерес
            </td>
            <td class="content" id="Труд">
                Труд
            </td>
    		<td class="content" id="Память">
    			Память
    		</td>
            <td class="light" id="Привычки">
                Привычки
            </td>
  	</tr>
    <tr>
            <td class="nonborder1">
                
            </td>
            <td id="Быт">
                Быт
            </td>
            <td class="nonborder2" colspan="2">
                
            </td>
      </tr>
</table>
    
    <br>
    <button class="copyButton" id="copyButton1" style="visibility:hidden;" onclick="copy()">Копировать результат</button>
    

    
</div>
 </body> 
</html>

Код 2 ( Стили )

<style>

.ÑalcButton {
    background-color:#d0dbea;
    border-radius:6px;
    border:2px solid #b5b5b5;
    display:inline-block;
    cursor:pointer;
    color:#636363;
    font-family:Arial;
    font-size:16px;
    padding:10px 10px;
    text-decoration:none;
}
.ÑalcButton:hover {
    background-color:#b1c2e0;
}
.ÑalcButton:active {
    position:relative;
    top:1px;
}

.copyButton {
    background-color:#d0dbea;
    border-radius:6px;
    border:2px solid #b5b5b5;
    display:inline-block;
    cursor:pointer;
    color:#636363;
    font-family:Arial;
    width:360px;
    height:40px;
    font-size:16px;
/*    padding:10px 10px;*/
    text-decoration:none;
}
.copyButton:hover {
    background-color:#b1c2e0;
}
.copyButton:active {
    position:relative;
    top:1px;
}

.calcInput {
    font-size:16px;
    border-style:solid;
    padding:10px;
    border-width:2px;
    border-radius:6px;
    border-color:#b5b5b5;
    font-weight:normal;
    width: 240px;
}

.calcInput:focus {
    outline:none;
}
table.calcTable {
/*  width: 300px;*/
  background-color: #d0dbea;
  border-collapse: collapse;
  border-width: 0px;
  border-color: #FFFFFF;
  border-style: none;
  color: #000000;
}

table.calcTable td, table.calcTable th {
  border-width: 4px;
  border-color: #d0dbea;
  border-style: solid;
  padding: 5px;
  color: #000000;
  background-color: #FFFFFF;
  height: 75px;
  width: 75px;
  text-align: center;
}

table.calcTable thead {
  background-color: #d0dbea;
}

table.calcTable td.light {
    border-width: 4px;
    border-color: #d0dbea;
    border-style: solid;
    padding: 5px;
    color: #000000;
    background-color: #d0dbea;
    height: 75px;
    width: 75px;
    text-align: center;
}

td#summary {
    text-align: left;
}

table.calcTable td.nonborder1 {
    background-color: #ffffff;
    
    border-left-style: solid;
    border-left-width: 4px;
    
    border-bottom-style: solid;
    border-bottom-width: 4px;
    
    border-top-style: none;
    border-right-style: none;
    
    border-color: #ffffff;
}

table.calcTable td.nonborder2 {
    background-color: #ffffff;
    
    border-right-style: solid;
    border-right-width: 4px;
    
    border-bottom-style: solid;
    border-bottom-width: 4px;
    
    border-top-style: none;
    border-left-style: none;
    
    border-color: #ffffff;
}

.container {
    width: 400px; /* Ð¨Ð¸Ñ€Ð¸Ð½Ð° ÑÐ»ÐµÐ¼ÐµÐ½Ñ‚Ð° Ð² Ð¿Ð¸ÐºÑÐµÐ»Ð°Ñ… */
    padding: 10px; /* ÐŸÐ¾Ð»Ñ Ð²Ð¾ÐºÑ€ÑƒÐ³ Ñ‚ÐµÐºÑÑ‚Ð° */
    margin: auto; /* Ð’Ñ‹Ñ€Ð°Ð²Ð½Ð¸Ð²Ð°ÐµÐ¼ Ð¿Ð¾ Ñ†ÐµÐ½Ñ‚Ñ€Ñƒ */
/*    background: #fc0; /* Ð¦Ð²ÐµÑ‚ Ñ„Ð¾Ð½Ð° */*/
}

body {
    background-color: #ffffff;
}

</style>

Код 3 ( Скрипт )

<script>
var tab1 = "";
var tab2 = "";
var tab3 = "";
var tab4 = "";
var tab5 = "";
var tab6 = "";
var tab7 = "";
var tab8 = "";
var tab9 = "";
var tabFate = "";
var tabTemp = "";
var tabGoal = "";
var tabFamily = "";
var tabHabits = "";
var tabBit = "";

function calculate() {
    var dateString = String(document.getElementById("date").value);
    var arraysOfString = dateString.split(".");
    
    var dayDigits = arraysOfString[0].split('').map(Number);
    if (dayDigits[0] == 0) dayDigits.shift();
    
    var monthDigits = arraysOfString[1].split('').map(Number);
    if (monthDigits[0] == 0) monthDigits.shift();
    
    var yearDigits = arraysOfString[2].split('').map(Number);
    
    // 1
    var firstWorkerNumber = arraysSum(dayDigits, monthDigits, yearDigits);
    
    // 2
    var secondWorkerNumber = digitsSum(firstWorkerNumber);
    
    // 3
    var thirdWorkerNumber = firstWorkerNumber - (2 * dayDigits[0]);
    
    // 4
    var fourthWorkerNumber = digitsSum(thirdWorkerNumber);
    
    // 5
    var liveCount = dayDigits.length + monthDigits.length + yearDigits.length + 4;
    
    var resultString = dateString + firstWorkerNumber.toString() +
    secondWorkerNumber.toString() +
    thirdWorkerNumber.toString() +
    fourthWorkerNumber.toString();
    
    var dict = makeCellDict(resultString);
    
    var fate = digitsFate(secondWorkerNumber);
    tabFate = fate.toString();
    
    var summaryTd = document.getElementById("summary");
    summaryTd.innerHTML = "Дата рождения: " + dateString + " <br><br> Доп. числа: " + digitsSum "<br> Число судьбы: " + fate;
    
    var tempTd = document.getElementById("Темперамент");
    var tempValue = dict["Удача"].length + dict["Логика"].length + dict["Интерес"].length;
    tabTemp = tempValue.toString();
    tempTd.innerHTML = "Темперамент" + " <br> " + (tempValue == 0 ? "-" : tempValue);
    
    var goalTd = document.getElementById("Цель");
    var goalValue = dict["Характер"].length + dict["Здоровье"].length + dict["Удача"].length;
    tabGoal = goalValue.toString();
    goalTd.innerHTML = "Цель" + " <br> " + (goalValue == 0 ? "-" : goalValue);
    
    var familyTd = document.getElementById("Семья");
    var familyValue = dict["Энергия"].length + dict["Логика"].length + dict["Долг"].length;
    tabFamily = familyValue.toString();
    familyTd.innerHTML = "Семья" + " <br> " + (familyValue == 0 ? "-" : familyValue);
    
    var hobyTd = document.getElementById("Привычки");
    var hobyValue = dict["Интерес"].length + dict["Труд"].length + dict["Память"].length;
    tabHabits = hobyValue.toString();
    hobyTd.innerHTML = "Привычки" + " <br> " + (hobyValue == 0 ? "-" : hobyValue);
    
    var bitTd = document.getElementById("Быт");
    var bitValue = dict["Здоровье"].length + dict["Логика"].length + dict["Труд"].length;
    tabBit = bitValue.toString();
    bitTd.innerHTML = "Быт" + " <br> " + (bitValue == 0 ? "-" : bitValue);
    
    var copyButton = document.getElementById("copyButton1");
    copyButton.style.visibility = "visible";
}

function digitsFate(secondWorkerNumber) {
    if (secondWorkerNumber == 11) {
        return secondWorkerNumber;
    }
    
    var sum = secondWorkerNumber;
    var stringNumber = sum.toString();
    
    while (stringNumber.length != 1) {
        sum = digitsSum(sum);
        stringNumber = sum.toString();
    }
    
    return sum;
}

function arraysSum(firstArray, secondArray, thirdArray) {
    var sum = 0;
    firstArray.forEach( element => sum += element );
    secondArray.forEach( element => sum += element );
    thirdArray.forEach( element => sum += element );
    return sum
}

function digitsSum(value) {
    var sum = 0;
    var digits = value.toString().split('').map(Number);
    digits.forEach( element => sum += element );
    return sum
}

function countElementIn(element, array) {
    var resultString = "";
    var elementString = element.toString();
    for (i = 0; i < array.length; i++) {
        if (array[i] == elementString) resultString += elementString;
    }
    
    return resultString
}

function makeCellDict(resultString) {
    let tds = ["Характер", "Энергия", "Интерес", "Здоровье", "Логика", "Труд", "Удача", "Долг", "Память"];
    var result = {}
    
    for (i = 1; i <= tds.length; i++) {
        var a = i;
        
        var count = countElementIn(a, resultString);
        var cellName = tds[a - 1];
        result[cellName] = count;
        
        var td = document.getElementById(cellName);
        td.innerHTML = cellName + " <br> " + (count.length == 0 ? "-" : count);
        
        i = a;
        
        switch (true) {
            case (a == 1):
                tab1 = count.length == 0 ? "-" : count;
                break;
            case (a == 2):
                tab2 = count.length == 0 ? "-" : count;
                break;
            case (a == 3):
                tab3 = count.length == 0 ? "-" : count;
                break;
            case (a == 4):
                tab4 = count.length == 0 ? "-" : count;
                break;
            case (a == 5):
                tab5 = count.length == 0 ? "-" : count;
                break;
            case (a == 6):
                tab6 = count.length == 0 ? "-" : count;
                break;
            case (a == 7):
                tab7 = count.length == 0 ? "-" : count;
                break;
            case (a == 8):
                tab8 = count.length == 0 ? "-" : count;
                break;
            case (a == 9):
                tab9 = count.length == 0 ? "-" : count;
                break;
            default:
                break;
        }
    }
    
    return result
}

function copy() {
    var result = tab1.toString() + "/" +
    tab2 + "/" +
    tab3 + "/" +
    tab4 + "/" +
    tab5 + "/" +
    tab6 + "/" +
    tab7 + "/" +
    tab8 + "/" +
    tab9 + "/" +
    "ЧС" + tabFate + "/" +
    "темп" + tabTemp + "/" +
    "цель" + tabGoal + "/" +
    "семья" + tabFamily + "/" +
    "прив" + tabHabits + "/" +
    "быт" + tabBit;
    
    copyStringToClipboard(result);
    alert("Таблица скопирована");
}

function copyStringToClipboard(str) {
   var el = document.createElement('textarea');
   el.value = str;
   el.setAttribute('readonly', '');
   el.style = {position: 'absolute', left: '-9999px'};
   document.body.appendChild(el);
   el.select();
   document.execCommand('copy');
   document.body.removeChild(el);
}
</script>

Код 3 ( Скрипт )

<script>
var tab1 = "";
var tab2 = "";
var tab3 = "";
var tab4 = "";
var tab5 = "";
var tab6 = "";
var tab7 = "";
var tab8 = "";
var tab9 = "";
var tabFate = "";
var tabTemp = "";
var tabGoal = "";
var tabFamily = "";
var tabHabits = "";
var tabBit = "";

function calculate() {
    var dateString = String(document.getElementById("date").value);
    var arraysOfString = dateString.split(".");
    
    var dayDigits = arraysOfString[0].split('').map(Number);
    if (dayDigits[0] == 0) dayDigits.shift();
    
    var monthDigits = arraysOfString[1].split('').map(Number);
    if (monthDigits[0] == 0) monthDigits.shift();
    
    var yearDigits = arraysOfString[2].split('').map(Number);
    
    // 1
    var firstWorkerNumber = arraysSum(dayDigits, monthDigits, yearDigits);
    
    // 2
    var secondWorkerNumber = digitsSum(firstWorkerNumber);
    
    // 3
    var thirdWorkerNumber = firstWorkerNumber - (2 * dayDigits[0]);
    
    // 4
    var fourthWorkerNumber = digitsSum(thirdWorkerNumber);
    
    // 5
    var liveCount = dayDigits.length + monthDigits.length + yearDigits.length + 4;
    
    var resultString = dateString + firstWorkerNumber.toString() +
    secondWorkerNumber.toString() +
    thirdWorkerNumber.toString() +
    fourthWorkerNumber.toString();
    
    var dict = makeCellDict(resultString);
    
    var fate = digitsFate(secondWorkerNumber);
    tabFate = fate.toString();
    
    var summaryTd = document.getElementById("summary");
    summaryTd.innerHTML = "Дата рождения: " + dateString + " <br><br> Число судьбы: " + fate;
    
    var tempTd = document.getElementById("Темперамент");
    var tempValue = dict["Удача"].length + dict["Логика"].length + dict["Интерес"].length;
    tabTemp = tempValue.toString();
    tempTd.innerHTML = "Темперамент" + " <br> " + (tempValue == 0 ? "-" : tempValue);
    
    var goalTd = document.getElementById("Цель");
    var goalValue = dict["Характер"].length + dict["Здоровье"].length + dict["Удача"].length;
    tabGoal = goalValue.toString();
    goalTd.innerHTML = "Цель" + " <br> " + (goalValue == 0 ? "-" : goalValue);
    
    var familyTd = document.getElementById("Семья");
    var familyValue = dict["Энергия"].length + dict["Логика"].length + dict["Долг"].length;
    tabFamily = familyValue.toString();
    familyTd.innerHTML = "Семья" + " <br> " + (familyValue == 0 ? "-" : familyValue);
    
    var hobyTd = document.getElementById("Привычки");
    var hobyValue = dict["Интерес"].length + dict["Труд"].length + dict["Память"].length;
    tabHabits = hobyValue.toString();
    hobyTd.innerHTML = "Привычки" + " <br> " + (hobyValue == 0 ? "-" : hobyValue);
    
    var bitTd = document.getElementById("Быт");
    var bitValue = dict["Здоровье"].length + dict["Логика"].length + dict["Труд"].length;
    tabBit = bitValue.toString();
    bitTd.innerHTML = "Быт" + " <br> " + (bitValue == 0 ? "-" : bitValue);
    
    var copyButton = document.getElementById("copyButton1");
    copyButton.style.visibility = "visible";
}

function digitsFate(secondWorkerNumber) {
    if (secondWorkerNumber == 11) {
        return secondWorkerNumber;
    }
    
    var sum = secondWorkerNumber;
    var stringNumber = sum.toString();
    
    while (stringNumber.length != 1) {
        sum = digitsSum(sum);
        stringNumber = sum.toString();
    }
    
    return sum;
}

function arraysSum(firstArray, secondArray, thirdArray) {
    var sum = 0;
    firstArray.forEach( element => sum += element );
    secondArray.forEach( element => sum += element );
    thirdArray.forEach( element => sum += element );
    return sum
}

function digitsSum(value) {
    var sum = 0;
    var digits = value.toString().split('').map(Number);
    digits.forEach( element => sum += element );
    return sum
}

function countElementIn(element, array) {
    var resultString = "";
    var elementString = element.toString();
    for (i = 0; i < array.length; i++) {
        if (array[i] == elementString) resultString += elementString;
    }
    
    return resultString
}

function makeCellDict(resultString) {
    let tds = ["Характер", "Энергия", "Интерес", "Здоровье", "Логика", "Труд", "Удача", "Долг", "Память"];
    var result = {}
    
    for (i = 1; i <= tds.length; i++) {
        var a = i;
        
        var count = countElementIn(a, resultString);
        var cellName = tds[a - 1];
        result[cellName] = count;
        
        var td = document.getElementById(cellName);
        td.innerHTML = cellName + " <br> " + (count.length == 0 ? "-" : count);
        
        i = a;
        
        switch (true) {
            case (a == 1):
                tab1 = count.length == 0 ? "-" : count;
                break;
            case (a == 2):
                tab2 = count.length == 0 ? "-" : count;
                break;
            case (a == 3):
                tab3 = count.length == 0 ? "-" : count;
                break;
            case (a == 4):
                tab4 = count.length == 0 ? "-" : count;
                break;
            case (a == 5):
                tab5 = count.length == 0 ? "-" : count;
                break;
            case (a == 6):
                tab6 = count.length == 0 ? "-" : count;
                break;
            case (a == 7):
                tab7 = count.length == 0 ? "-" : count;
                break;
            case (a == 8):
                tab8 = count.length == 0 ? "-" : count;
                break;
            case (a == 9):
                tab9 = count.length == 0 ? "-" : count;
                break;
            default:
                break;
        }
    }
    
    return result
}

function copy() {
    var result = tab1.toString() + "/" +
    tab2 + "/" +
    tab3 + "/" +
    tab4 + "/" +
    tab5 + "/" +
    tab6 + "/" +
    tab7 + "/" +
    tab8 + "/" +
    tab9 + "/" +
    "ЧС" + tabFate + "/" +
    "темп" + tabTemp + "/" +
    "цель" + tabGoal + "/" +
    "семья" + tabFamily + "/" +
    "прив" + tabHabits + "/" +
    "быт" + tabBit;
    
    copyStringToClipboard(result);
    alert("Таблица скопирована");
}

function copyStringToClipboard(str) {
   var el = document.createElement('textarea');
   el.value = str;
   el.setAttribute('readonly', '');
   el.style = {position: 'absolute', left: '-9999px'};
   document.body.appendChild(el);
   el.select();
   document.execCommand('copy');
   document.body.removeChild(el);
}
</script>

Понравилась модификация?