编程技巧 - HTML拼装逻辑入门 ¶

• 作者：KK

• 发表日期：2016.11.07

• 提示：熟手程序员请直接跳过此章节，有些刚入门的程序员思维还不是很灵活，对于按照不同情况构造不同的样式还没什么思路，所以这里就啰嗦一下

其实我们的代码可以根据数据的值不同去拼出不同的HTML来产生不同的界面效果的：

var randNum = Math.floor(Math.random() * 9) + 1;

var btnClass = '';
if(randNum > 5){
	btnClass = 'c1';
}else{
	btnClass = 'c2';
}

var styleHtml = '<style type="text/css">.c1{font-size:30px;} .c2{width:40px;}</style>';
var btnHtml = '<button class="' + btnClass + '">按钮标题</button>';
document.body.innerHTML = styleHtml + btnHtml;

这是一个产生随机数字，再根据数字的大小来产生不同的HTML

这是很基础的界面控制逻辑，真实项目开发中，主要是通过获取服务端的数据，或者其它元素的特定属性值来做判断，根据判断结果来拼成不同的class来上不同样式，或者拼HTML等都可以