Эффект корзины для покупок, достигнутый JavaScript, конечно, этот эффект может использоваться во многих местах, таких как выбор друзей, модули кадров, расчет заработной платы, выбор персонала и т. Д. Вот представленная тележка, аналогичная::
Код:
Goodscar.js: этот JS написан как отдельный файл. В основном управляет отображением вышеуказанного списка.
Кода -копия выглядит следующим образом:
window.onload = function () {
initstore ();
};
var Goods = ["ham", "красота", "Матери -леди", «Дневной тур по Марсу», «Спортивный автомобиль»];
// ================ = ========================================================================================== ==========================================================================================
var temps = []; // Временное хранение
// Инициализировать репозиторий выберите «Добавить контент
function initstore () {
var select_store = document.getElementByid ("select_store");
для (var x = 0; x <goods.length; x ++)
{
// Создать объект опции
var optionnode = document.createElement ("option");
optionnode.innerhtml = Goods [x];
select_store.appendchild (optionnode);
}
}
// -------------------------------------------------------------------------------------------------------------------------
функция selectGoods () {
// Получить объект «Выбрать список магазинов»
var out_store = document.getElementByid ("select_store");
// Получить объект выбора списка моего продукта
var in_store = document.getElementbyId ("select_my");
Movegoods (in_store, out_store);
}
function deletegoods () {
// 1. Запишите продукт, который будет перемещен
var in_store = document.getElementById ("select_store");
var out_store = document.getElementById ("select_my");
Movegoods (in_store, out_store);
}
/*
* Мобильные продукты:
1. НИЗКА: переместите товары на склад
2.OutStore: удалите продукт со склада
*/
//двигаться
Функция MoveGouds (Instore, OutShore) {
// =================================================================== ======================================================================= ======================================================================= =======================================================================
temps = [];
// цикл, чтобы получить все элементы списка в магазине
для (var x = 0; x <outstore.options.length; x ++)
{
var option = outstore.options [x];
// Добавить выбранный элемент списка во временный массив для хранения
if (option.selected) {
temps.push (option); // Добавить данные во временный массив. Чтобы избежать дублирования, кэш массива должен быть очищен
}
}
// 2. Удалить выбранные элементы в списке магазинов
// 3. Добавить выбранные продукты в корзину
для (var x = 0; x <temps.length; x ++)
{
// у каждого узла есть только один родительский узел
// сначала удалить, а затем добавить
Outstore.RemoveChild (Temps [x]);
//Добавить в
Andore.appendChild (Temps [x]);
}
}
Ниже приведен основной файл;
Кода -копия выглядит следующим образом:
<! Doctype html>
<html>
<голова>
<meta charset = "utf-8">
<title> Вставьте заголовок здесь </title>
<стиль типа = "text/css">
стол{
граница: 10px;
}
выбирать{
Ширина: 200px;
Высота: 400px;
}
#Order_area {
дисплей: нет;
}
</style>
<script type = "text/javascript" src = "goodscar.js"> </script>
<script type = "text/javascript">
var selectedgoods = []; // кэшированная область
// Создание заказов на основе продуктов в корзине для корзины
function createorder () {
// показать зону заказа
var orderareadiv = document.getElementbyId ("order_area");
/* Существует стиль объекта участника под объектом Div. Через этот объект стиля можно контролировать стиль DIV.
Дисплей: Указывает, отображается ли этот объект или элемент DIV в документе.
Доступные значения:
Блок: объект отображается как элемент блока.
Нет: объект не отображается.
.........
В этом примере просто используйте приведенные выше два значения, и все будет в порядке. Приведенный выше контент поступает из документа
*/
// Использование стиля работы атрибута объекта узла
orderareadiv.style.display = "block";
var select_my = document.getElementbyId ("select_my");
for (var x = 0; x <select_my.options.length; x ++) {
//
var optnode = select_my.options [x];
selectedgoods.push (optnode.innerhtml);
}
// путешествовать по продукту и генерировать заказы
for (var x = 0; x <selectedgoods.length; x ++) {
///*шаблон для динамического генерации данных
// <div> <!-атрибут имени легко найти->
// <input type = "fackbox" name = "myorder"> <pan> красивый парень 20 yuan </span>
// </div>
//*/
var divnode = document.createElement ("div");
orderareadiv.appendchild (divnode);
var inputmyorder = document.createElement ("input");
inputmoorder.setattribute ("type", "fackbox");
inputmoorder.setattribute ("name", "myorome");
divnode.appendchild (inputmoder);
var spannode = document.createElement ("span");
// случайным образом генерируют случайное число от 50 до 100
var price = math.floor (math.random ()*50+50);
inputmyorder.value = цена;
spannode.innerhtml = selectedgoods [x]+""+цена;
divnode.appendchild (spannode);
//inputmeorder.appendchild(spannode); ошибка, потому что SPAN и вход являются элементами того же уровня
// Добавить собранное divnode в список заказов
var order_list = document.getElementbyid ("order_list");
order_list.appendchild (divnode);
}
}
/*
* Вы все еще можете выбрать, какие заказы готовы к оплате в регенерированном заказе, а затем сделать оплату
Три способа выбора: выберите все: 1, не выбирайте: 0, обратный выбор: 2; Собственные функции флажки могут быть выбраны несколько раз
*/
Функция mySelect (arg) {
// getElementsByName: Получите сбор объектов на основе значения атрибута тега имени.
var orders = document.getElementsbyname ("myroder");
// Следующее предложение использовалось неправильно в процессе написания кода
// getElementsbytagname: получает коллекцию объектов на основе указанного имени элемента.
// var orders = document.getElementsbytagname ("myroder");
for (var x = 0; x <orders.length; x ++) {
var order = orders [x];
if (arg == "1") {
order.cecked = true;
}
иначе if (arg == "0") {
order.cecked = false;
}
иначе if (arg == "2") {
order.cecked =! order.cecked;
}
}
}
// Проверка и оплата, здесь используется для демонстрации количества всех продуктов, появляющихся в диалоге.
функция paymoney () {
var orders = document.getElementsbyname ("myroder");
// Общая цена
var sum = 0;
for (var x = 0; x <orders.length; x ++) {
var order = orders [x];
if (order.cecked) {
// проверьте, что купить.
sum = sum+число (order.value);
}
}
Alert («Вы видите, хотите ли вы заплатить»+sum+"yuan");
}
</script>
</head>
<тело>
<Таблица>
<tr>
<Td>
<!-Значение множественного атрибута объекта SELECT: установить или получить логическое значение, указывающее, можно ли выбрать несколько элементов в списке->
<SELECT ID = "SELECT_STORE" MALTY = "MALTY">
<optgroup label = "Список продуктов"> </optgroup>
</select>
</td>
<Td>
<input type = "button" value = ">>" onclick = "selectGoods ();"/> <br>
<input type = "button" value = "<<" onclick = "deletegoods ();"/>
</td>
<Td>
<select id = "select_my" multy = "multy">
<optgroup label = "My Chorp Cart"> </OptGroup>
</select>
</td>
<td> <input type = "button" value = "Generate Order" onclick = "createorder ();"/> </td>
</tr>
</table>
<HR/>
<div id = "order_area">
<h3> Выберите продукт, который вы хотите приобрести: </h3>
<div id = "order_list">
<!- <div>
<input type = "checkbox"> <pan> Красивый парень 20 Юань </span>
</div>->
</div>
<input type = "button" value = "select All" onclick = "mySelect ('1');"/>
<input type = "button" value = "не выберите" onclick = "mySelect ('0');"/>
<input type = "button" value = "anti-select" onclick = "mySelect ('2');"/> <br>
<input type = "button" value = "pay" onclick = "paymoney ();"/>
</div>
</body>
</html>