33岁转职者的前端笔记-DAY 18 练习写一个自我介绍产生器
变数基本概念
常数：const
不可重新赋予新值
变数：let
可重新赋予新值
建立常数a并储存(或设定)“david”
cost a = “david”;
自我介绍产生器
先上范例图：
程序码：
HTML：
<body>
<h1>自我介绍产生器</h1>
<input type="text" id="nameInput" placeholder="名字...">
<button id="btn">产生自我介绍</button>
<script src="/main.js"></script>
</body>
JavaScript：
const nameInput = document.getElementById("nameInput");
const btn = document.getElementById("btn");
//绑定按钮的点击事件
btn.addEventListener("click", function () {
//btn被点击後才做的事情
console.log("Heloo" + nameInput.value);
})
自我介绍产生器 2 输入文字就会出现
写法如下：
HTML：
<div class="container">
<h1>自我介绍产生器</h1>
<input class="form-control" type="text" id="nameInput" placeholder="名字...">
<br>
<input class="form-control" type="text" id="ageInput" placeholder="年龄...">
<br>
<input class="form-control" type="text" id="titleInput" placeholder="职称...">
<button class="btn btn-primary" id="btn">产生自我介绍</button>
<div id="introBlock"></div>
<script src="/main.js"></script>
</div>
JavaScript：
const nameInput = document.getElementById("nameInput");
const ageInput = document.getElementById("ageInput");
const titleInput = document.getElementById("titleInput");
const btn = document.getElementById("btn");
const introBlock = document.getElementById("introBlock");
//绑定按钮的点击事件
btn.addEventListener("click", function () {
//btn被点击後才做的事情
const name = nameInput.value;
const age = ageInput.value;
const title = titleInput.value;
introBlock.innerText = "hello 我是" + name + "是一个" + age + "岁的" + title + "。";
})
可优化写法
把
introBlock.innerText = "hello 我是" + name + "是一个" + age + "岁的" + title + "。";
改成
introBlock = `Hello 我是${name}是一个${age}岁的${title}`;
这样程序码较简洁也不会那麽长
如果要加上 html 的标签则改成
introBlock.innerHTML = `<h1>Hello</h1>
<h2>我是${name}是一个${age}岁的${title}`</h2>;
>>: 【Day 3】Google Apps Script - 建立 Apps Script 的三种方式
第19车厢-娃！网页必备的响应式轮播效果怎麽刻？
本篇分享简易版的RWD的轮播效果功能 上一篇我们有简约的使用tab做轮播，但一般想做的轮播应该会是...
Ubuntu巡航记(1) -- 在Windows作业系统下安装Ubuntu
前言 机器学习的套件许多都不能在Windows作业系统内顺利安装，就算能安装也要费一番手脚，因此，兴...
如何建立 Windows USB 安装随身碟-适用 Win 10, Win Server 2019
使用 USB 跟传统 DVD 一样可以正常安装 Windows，而且携带方便，还不需要准备光碟机。 ...
DAY1-为何要逼自己参加铁人赛
我是一个今年毕业的应届毕业生 在毕业前真正接触到前端，才发现对前端有兴趣，而且是众多程序中觉得好玩的...
[Day 22 - Redux] 有了Redux，状态管理没烦恼
前情提要：在前面关於 React 的几篇文章，学会了建立 React Component，依据使用...