html代码分开页面,html, js 代码如何分离?

• 前一天
• 后一天

加载中

var fromPinyin = "";

var toPinyin = "";

var trainNumber = "";

function initParams(){

fromPinyin = $("#from_pinyin").text().trim();

toPinyin = $("#to_pinyin").text().trim();

trainNumber = $("#train_number").text().trim();

}

function appendZero(num){

return num < 10 ? "0" + num : num;

}

function getNextDay(d){

var weekArray = new Array("日","一","二","三","四","五", "六");

var date = new Date(d);

date.setTime(date.getTime() + 1000 * 60 * 60 * 24);

return date.getFullYear() + "-" + appendZero(date.getMonth() + 1) + "-" + appendZero(date.getDate()) + " " + "周" + weekArray[date.getDay()];

}

function getPrevDay(d){

var weekArray = new Array("日","一","二","三","四","五", "六");

var date = new Date(d);

date.setTime(date.getTime() - 1000 * 60 * 60 * 24);

return date.getFullYear() + "-" + appendZero(date.getMonth() + 1) + "-" + appendZero(date.getDate()) + " " + "周" + weekArray[date.getDay()];

}

function refreshYuPiao(from, to, date, trainNumber){

$("#loadingToast").show();

$(".sel_wrapper").hide();

$("#seats_info").children().remove();

$.ajax({

async: true,

url: "/remanent?" + "from=" + from + "&to=" + to + "&date=" + date + "&trainNumber=" + $.trim(trainNumber),

success: function(msg){

$("#loadingToast").hide();

$(".sel_wrapper").show();

var data = $.parseJSON(msg);

var htmlStr = "";

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

var li = "";

if(data[i]['seat_num'] == 0){

data[i]['seat_num'] = '已售空';

li = "

";

}else{

li = "

";

}

var line = "" + data[i]['seat_name'] + ""+

"" + data[i]['seat_price'] + ""+

"" + data[i]['seat_num'] +"" +

"预 定

";

line = li + line;

htmlStr += line;

}

$("#seats_info").append(htmlStr);

},

});

}

function init(){

makeCalenderLayout(); //生成日历布局

$("#calender_picker").hide(); //隐藏日历布局

var from = $("#from_pinyin").text(); //进入页面先刷新余票

var to = $("#to_pinyin").text();

var date = $("#from_date").text();

date = $.trim(date).split(" ")[0];

var trainNumber = $("#train_number").text();

trainNumber = $.trim(trainNumber);

refreshYuPiao(from, to, date, trainNumber);

$("tbody tr td:first-child, tbody tr th:first-child").addClass("sunday"); //添加周六周日的样式

$("tbody tr td:last-child, tbody tr th:last-child").addClass("saturday");

var date = new Date();

var d = date.getDate() + 1;

$("[data-day='"+ d +"']").first().addClass("blank round"); //给日历上的今天添加样式

$("[data-day='"+ d +"']").first().parent().prevAll().addClass("disable-color");

}

$(function () {

init();

initParams();

showTip();

//下一天

$("#nextDate").click(function(){

var currDate = $("#currentDate").text().trim();

var date = currDate.split(" ")[0];

$("#currentDate span, #from_date").text(getNextDay(date));

var date = $("#from_date").text();

date = $.trim(date).split(" ")[0];

refreshYuPiao(fromPinyin, toPinyin, date, trainNumber);

});

//前一天

$("#preDate").click(function(){

var currDate = $("#currentDate").text().trim();

var date = currDate.split(" ")[0];

$("#currentDate span ,#from_date").text(getPrevDay(date));

var date = $("#from_date").text().trim();

date = $.trim(date).split(" ")[0];

refreshYuPiao(fromPinyin, toPinyin, date, trainNumber);

});

//选择日期

$("#currentDate").click(function(){

$("section").hide();

$("#calender_picker").show();

$(".tip").show();

});

getTextFromCalender();

});

function isLeap(year){

return (year % 100 == 0 ? (year % 400 == 0? 1 : 0) : (year % 4 == 0 ? 1 : 0));

}

// 日期布局生成

function makeCalenderLayout(){

var html = makeSingleMonthLayout(2015, 11);

var html2 = makeSingleMonthLayout(2015, 12);

var html3 = makeSingleMonthLayout(2016, 1);

$("#calender_picker").append(html);

$("#calender_picker").append(html2);

$("#calender_picker").append(html3);

}

/**

*

* 根据年,月,生成指定月份的html文件

*

* @params year 年

* @params month 1月份为1, 从1开始计数

* @return

* "

"

* "

* "

"

*

* "

"

* "

"

* "

"

* */

function makeSingleMonthLayout(year, month){

var temp = year + "-" + appendZero(month);

var preHtml = "

" + year + "年" + month + "月

日一二 三四" +

"

五六";

var afterHtml = "

";

var daysOfMonth = new Array(31, 28 + isLeap(new Date().getFullYear()), 31,30,31,30,31,31,30,31,30,31);

var date = new Date(year, month-1);

date.setDate(1);

var firstDayOfMonth = date.getDay();

var rows = Math.ceil((daysOfMonth[date.getMonth()] + firstDayOfMonth) / 7);

var html = "";

for(var row = 0; row < rows; row++){

var line = "

";

for(var col = 0; col < 7; col++){

var d = (row * 7 + col) - firstDayOfMonth + 1; //每个单元格的日期

var cell = "

" + d + "

";

if(d < 1 || d > daysOfMonth[date.getMonth()])

cell = "

";

line += cell;

}

line = line + "

";

html += line;

}

return preHtml + html + afterHtml;

}

/*

* 得到日期

* @returns

* 2015-11-05 周四

*

* **/

function getTextFromCalender(){

var weekArray = new Array("日","一","二","三","四","五", "六");

$("div[data-day]").click(function(){

var ym = $(this).parents(".calendar_wrapper").attr("data-ym");

var ymd = ym + "-" + appendZero($(this).text());

var w = " 周" + weekArray[new Date(ymd).getDay()];

$("#currentDate span").text(ymd + w);

$("#calender_picker").hide(); //隐藏日历布局

$("section").show();

var from = $("#from_pinyin").text(); //进入页面先刷新余票

var to = $("#to_pinyin").text();

var trainNumber = $("#train_number").text();

refreshYuPiao(from, to, ymd, trainNumber);

});

}

function showTip(){

var currentDate = new Date();

var timestamp = new Date(new Date().getTime() + 60 * 24 * 3600 * 1000);

var time = new Date(timestamp);

var text = "今天是 " + (currentDate.getMonth() + 1) + "月" + (currentDate.getDate() + 1)

+ "日, 可以购买" + (timestamp.getMonth() + 1) + "月" + (timestamp.getDate() + 1) + "日的车票."

+ "部分车次预售期特殊, 请以车站当日公布的标准";

$(".tip").text(text);

}

/**

* 跳转到buy的界面

*

* */

function buy(seatName){

var fromDate = $("#from_date").text();

fromDate = $.trim(fromDate).split(" ")[0];

var url = "/buy1" + "/" + fromPinyin + "/" + toPinyin + "/" +

trainNumber + "/" + fromDate + "/" + seatName;

window.location.href = url;

}

新人刚刚参加工作,新手.

如上的代码只是一个其中的一个页面.

我总感觉写的比较乱.比如js代码是不是和html代码写一个文件里不大好,命名不规范之类的

请大家帮我提点意见.谢谢