HTML 怎么引入 下面的JS
//DOM
const $ = document.querySelector.bind(document);
//APP
let App = {};
App.init = (function() {
//Init
function handleFileSelect(evt) {
const files = evt.target.files; // FileList object
//files template
let template = `${Object.keys(files)
.map(
file => `<div class="file file--${file}">
<div class="name"><span>${files[file].name}</span></div>
<div class="progress active"></div>
<div class="done">
<a href="" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 1000 1000">
<g><path id="path" d="M500,10C229.4,10,10,229.4,10,500c0,270.6,219.4,490,490,490c270.6,0,490-219.4,490-490C990,229.4,770.6,10,500,10z M500,967.7C241.7,967.7,32.3,758.3,32.3,500C32.3,241.7,241.7,32.3,500,32.3c258.3,0,467.7,209.4,467.7,467.7C967.7,758.3,758.3,967.7,500,967.7z M748.4,325L448,623.1L301.6,477.9c-4.4-4.3-11.4-4.3-15.8,0c-4.4,4.3-4.4,11.3,0,15.6l151.2,150c0.5,1.3,1.4,2.6,2.5,3.7c4.4,4.3,11.4,4.3,15.8,0l308.9-306.5c4.4-4.3,4.4-11.3,0-15.6C759.8,320.7,752.7,320.7,748.4,325z"</g>
</svg>
</a>
</div>
</div>`
)
.join("")}`;
$("#drop").classList.add("hidden");
$("footer").classList.add("hasFiles");
$(".importar").classList.add("active");
setTimeout(() => {
$(".list-files").innerHTML = template;
}, 1000);
Object.keys(files).forEach(file => {
let load = 2000 + file * 2000; // fake load
setTimeout(() => {
$(`.file--${file}`).querySelector(".progress").classList.remove("active");
$(`.file--${file}`).querySelector(".done").classList.add("anim");
}, load);
});
}
// trigger input
$("#triggerFile").addEventListener("click", evt => {
evt.preventDefault();
$("input[type=file]").click();
});
// drop events
$("#drop").ondragleave = evt => {
$("#drop").classList.remove("active");
evt.preventDefault();
};
$("#drop").ondragover = $("#drop").ondragenter = evt => {
$("#drop").classList.add("active");
evt.preventDefault();
};
$("#drop").ondrop = evt => {
$("input[type=file]").files = evt.dataTransfer.files;
$("footer").classList.add("hasFiles");
$("#drop").classList.remove("active");
evt.preventDefault();
};
//upload more
$(".importar").addEventListener("click", () => {
$(".list-files").innerHTML = "";
$("footer").classList.remove("hasFiles");
$(".importar").classList.remove("active");
setTimeout(() => {
$("#drop").classList.remove("hidden");
}, 500);
});
// input change
$("input[type=file]").addEventListener("change", handleFileSelect);
})();
我觉得挺好的呀,而且觉得这个以后可以发展成一个智能家居的中控台
智能家居(英文:smart home, home automation)是以住宅为平台,利用综合布线技术、网络通信技术、安全防范技术、自动控制技术、音视频技术将家居生活有关的设施集成,构建高效的住宅设施与家庭日程事务的管理系统,提升家居安全性、便利性、舒适性、艺术性,并实现环保节能的居住环境。
为了防止有人不知道智能家居,特意摘了一段百度百科
简单说就是家具更智能,家具更易用,居家更安全等
希望我讲清楚了。。。
然后就可以聊到咱们现在说的智能音箱了呀
与其说是智能音箱,不如说是在为智能家居中控台做实验(个人意见,不知道制造智能音箱的同学是不是这样想的)
比如现在的小米,推出了小爱同学(毕竟是个米粉)
下面是小爱的主要功能
内容收听
小米AI音箱可以播放音乐、电台点播,还有相声、小说、脱口秀,教育学习、儿童类多种有声读物内容。
技术中心
小米AI音箱是支持语音交互,内容包括在线音乐、网络电台、有声读物、广播电台等,提供新闻、天气、闹钟、倒计时、备忘、提醒、时间、汇率、股票、限行、算数、查找手机、百科/问答、闲聊、笑话、菜谱、翻译等各类功能。
智能家居
小米AI(人工智能)音箱可控制小米电视、扫地机器人、空气净化器等小米及生态链设备,也可通过小米插座、插线板来控制第三方产品。 [3-5]
可以看出其实小爱有在为米家的各类智能家居产品服务,如果以后小爱发展起来可能也有有嵌入墙体或者作为吸顶灯这样的存在(大胆的来个预测(毕竟你爱最近出了mini(貌似是更好带了,还能用移动电源供电)))
所以骚年,智能音箱的发展前景我觉得很广阔啊,
未来普通音箱会被像小爱mini这样的智能音箱替代
而智能家居中控台可能就是普通小爱这样的智能音箱了
甚至可能出现大型集成到墙体中的智能音箱变体吧
(就吹那么多了。。。溜了溜了)