09.12.2019, 05:07
|
|
Интересующийся
|
|
Регистрация: 08.12.2019
Сообщений: 19
|
|
Спасибо, благодаря вам подвинулся с места. Запихал все в html. Единственное, не сообразил как цену, общую стоимость, количество, товары отдельными полями добавить. Сортировку пока не победил. Не все в один лень делается. Спасибо вы очень помогли!
<!doctype html>
<html lang="en">
<head>
<title>JavaScript Tutorial - Arrays and Loops</title>
<link rel="stylesheet" href="css/foundation.min.css"></link>
<style>
th
{
background: white;
height:50px;
}
table,th,td
{
border:2px solid green;
}
table
{
width:40%;
color:solid green;
text-align:center;
}
</style>
</head>
<body>
<!-- JAVASCRIPT -->
<script type="text/javascript">
function randomValueBetween(min, max) {
return Math.random() * (max - min) + min;
}
function randomDate(date1 = '01-01-2017', date2 = new Date().toLocaleDateString()) {
date1 = new Date(date1).getTime();
date2 = new Date(date2).getTime();
return new Date(randomValueBetween(date2, date1)).toLocaleDateString()
}
function getElem(arr)
{
return arr[randomValueBetween(0, arr.length)|0]
}
var sellern = "Dogserf";
var sellernip = "2254913384";
var selleradr = "2592 Davis Place";
var sellerpost = "87918997";
var selleracc = "85090922712148335820";
var firmString="Justsurf,DietyElephant,MetaHound,CuteOx,SweetFrank,PonyMice,BoarsAndInu,KrazyRat,GlumCats,ManedPie,ZipperPuppy,AKCStew,FoxFlock,NerdyLion,SnipeSkull,KittenFur,SilentRabbit,Pupski,BearSide,Mouse17C";
var firms = firmString.split(",");
var adressString="3118 Palmer Road,4996 Watson Lane,504 Hawks Nest Lane,3432 Glory Road,157 Crosswind Drive,3063 New York Avenue,997 Jadewood Drive,1630 Mulberry Lane,1710 Jehovah Drive,409 Monroe Street,3538 Hickman Street,68 Powder House Road,2449 Eagle Drive,1143 Collins Avenue,2848 Snyder Avenue,3797 Willis Avenue,4008 Alexander Avenue,3406 Wines Lane,1610 Gorby Lane";
var adress = adressString.split(",");
var numGen = function(length) {
return Array.from({length}, _=> Math.floor(Math.random()*10)).join("");
};
var vegString=["Apple","Apricots","Avocado","Banana","Blackberries", "Blueberries","Cantaloupe","Carambola","Cherimoya","Cherries","Clementine","Coconut Meat","Durian","Grapefruit","Jackfruit","Lemon","Mango","Mangosteen","Peaches","Raspberries","Tangerine"];
var bases = [];
for (var i = 0; i < 10; )
{
var base = new Object();
base.pref = (++i).toString().padStart(5, "0");
base.sellern = sellern;
base.sellernip = sellernip;
base.selleradr = selleradr;
base.sellerpost = sellerpost;
base.selleracc = selleracc;
base.repeated = getElem(firms);
base.repeated1 = getElem(adress);
base.account=numGen(20);
base.postal=numGen(8);
base.total = 0;
base.netto = 0;
base.produkt = Array.from({length : 10}, _ => {
var num = randomValueBetween(100, 999)|0,
price = randomValueBetween(1, 100).toFixed(2),
count = randomValueBetween(1, 100)|0;
base.total += price * count;
base.netto = base.total * 1.23;
return `\nPRODUCT - ${getElem(vegString)} PRICE - ${randomValueBetween(1, 100).toFixed(2)}$ QUANTITY - ${randomValueBetween(1, 100)|0} p.`
}).join('\n') + `\nTOTAL BRUTTO PRICE: ${base.total.toFixed(2)}$ ` + ` \nTOTAL NETTO PRICE: ${base.netto.toFixed(2)}$ `;
bases.push(base);
}
document.write('<table>');
document.write('<tr><th>Faktura№</th><th>Date</th><th>Client</th><th>Adress</th><th>Account№</th></tr>');
for (var k = 0; k < bases.length; k++)
{
document.write("<tr><td>" + bases[k].pref + "</td>" + "<td>" + randomDate() + "</td>" + "<td>" + bases[k].repeated +"</td>" + "<td>" + bases[k].repeated1 + "<td>" + bases[k].account +"</td></tr>");
}
document.write('</table>');
</script>
<!-- END JAVASCRIPT -->
</body>
</html>
|
|
09.12.2019, 09:11
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
Сообщение от vandalv
|
|
как цену, общую стоимость, количество, товары отдельными полями добавить
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"></script>
<style>
table {
border-collapse: collapse;
border: 1px solid gray;
}
td {
border: 1px solid gray;
padding: 2px 5px;
text-align: center;
}
table td[colspan='2'] {
padding: 0;
box-sizing: border-box;
}
table table {
width: 100%;
}
table table td:last-child {
text-align: right;
}
table table tr:last-child td:last-child {
color: #ff0000;
}
</style>
</head>
<body>
<div id="grid-holder"></div>
<script type="text/template" id="grid-template">
<table>
<thead>
<tr>
<th>№</th>
<th>дата</th>
</tr>
</thead>
<tbody>
<% for(var i = 0; i < list.length; i++) { %>
<tr><td>
<%=i + 1%>
</td>
<td>
<%=new Date(list[i].data).toLocaleDateString()%>
</td>
</tr>
<tr><td colspan=2>
<table>
<thead>
<tr>
<th>артикул</th>
<th>название</th>
<th>цена</th>
<th>количество</th>
<th>сумма</th>
</tr>
</thead>
<tbody>
<% for(var k = 0; k < list[i].produkt.length; k++) { %>
<tr>
<td>
<%=list[i].produkt[k].num%>
</td>
<td>
<%=list[i].produkt[k].name%>
</td>
<td>
<%=list[i].produkt[k].price%>
</td>
<td>
<%=list[i].produkt[k].count%>
</td>
<td>
<%=(list[i].produkt[k].price * list[i].produkt[k].count).toFixed(2)%>
</td>
</tr>
<% } %>
<tr>
<td colspan = 4>
всего
</td>
<td>
<%=list[i].total%>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<% } %>
</td></tr>
</tbody>
</table>
</script>
<script>
function randomValueBetween(min, max) {
return Math.random() * (max - min) + min;
}
function randomDate(
date1 = '01-01-2017',
date2 = new Date().toLocaleDateString()
) {
date1 = new Date(date1).getTime();
date2 = new Date(date2).getTime();
return randomValueBetween(date2, date1);
}
function getElem(arr) {
return arr[randomValueBetween(0, arr.length) | 0];
}
var vegString = [
'Apple',
'Apricots',
'Avocado',
'Banana',
'Blackberries',
];
var bases = Array.from({ length: 10 }, _ => {
var total = 0,
produkt = Array.from({ length: 5 }, _ => {
var num = randomValueBetween(100, 999) | 0,
name = getElem(vegString),
price = randomValueBetween(1, 100).toFixed(2),
count = randomValueBetween(1, 100) | 0;
total += price * count;
return { num, name, price, count };
}),
data = randomDate();
total = total.toFixed(2);
return { data, total, produkt };
});
var tmpl = document.getElementById('grid-template').innerHTML.trim();
tmpl = _.template(tmpl);
function appendTable(list) {
document
.getElementById('grid-holder')
.insertAdjacentHTML('beforeEnd', tmpl({ list }));
}
function appendTitle(txt) {
document
.getElementById('grid-holder')
.insertAdjacentHTML('beforeEnd', `<h1>${txt}</h1>`);
}
appendTitle('исходный массив фактур');
appendTable(bases);
appendTitle('5 фактур по найбольшей стоимости');
var sortTotal = bases
.slice(0)
.sort((a, b) => a.total - b.total)
.slice(-5);
appendTable(sortTotal);
appendTitle('фактуры по возрастанию стоимости, в которых есть Avocado');
var filterAvocadoSortTotal = bases
.filter(base => base.produkt.some(el => el.name == 'Avocado'))
.sort((a, b) => a.total - b.total);
appendTable(filterAvocadoSortTotal);
appendTitle('фактуры за 2018 год, по возрастанию даты');
var filterDataSort = bases
.filter(base => new Date(base.data).getFullYear() == 2018)
.sort((a, b) => a.data - b.data);
appendTable(filterDataSort);
appendTitle('фактуры за первые полгода 2019 год, по возрастанию даты');
var dataStart = new Date(2019, 0, 1, 0, 0, 0, 0),
dataEnd = new Date(2019, 6, 0, 0, 0, 0, 0);
var filter2019Sort = bases
.filter(base => base.data >= dataStart && base.data <= dataEnd)
.sort((a, b) => a.data - b.data);
appendTable(filter2019Sort);
appendTitle(
'3 фактуры с минимальной суммой и сортировкой товара по названию'
);
var filterMinSortName = bases
.slice(0)
.sort((a, b) => a.total - b.total)
.slice(0, 3);
var collator = new Intl.Collator(['en', 'ru'], { numeric: true });
filterMinSortName.forEach(
base =>
(base.produkt = base.produkt
.slice(0)
.sort((a, b) => collator.compare(a.name, b.name)))
);
appendTable(filterMinSortName);
appendTitle(
'3 фактуры с минимальной общей суммой и сортировкой товара по сумме'
);
var filterMinSortAmount = bases
.slice(0)
.sort((a, b) => a.total - b.total)
.slice(0, 3);
filterMinSortAmount.forEach(
base =>
(base.produkt = base.produkt
.slice(0)
.sort((a, b) =>
(a.price * a.count - b.price * b.count)
))
);
appendTable(filterMinSortAmount);
</script>
</body>
</html>
|
|
11.12.2019, 05:58
|
|
Интересующийся
|
|
Регистрация: 08.12.2019
Сообщений: 19
|
|
|
Подскажите, такой вопрос. Пытаюсь запихнуть js в внешний файл. ссылки проверил alert(1). Не выходит ничего
|
|
11.12.2019, 06:14
|
|
Интересующийся
|
|
Регистрация: 08.12.2019
Сообщений: 19
|
|
|
Основное тело удалось запустить из js файла. Скрипт с таблицей не завелся. Проблема была в размещении в теге <head>. Нужно было в конце файла размещать
|
|
11.12.2019, 08:39
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
Сообщение от vandalv
|
|
Нужно было в конце файла размещать
|
или обернуть код в DOMContentLoaded |
|
|
|
