HTML、CSS 和 JavaScript 中的所有唯一字符挑战

2022-09-03 12:03:16 阅读：350 来源： 互联网

标签：文本 classList JavaScript testUniqueChars add HTML 同意 document CSS

HTML、CSS 和 JavaScript 中的所有唯一字符挑战

HTML：

 <div class="wrapper">  
 <h1>所有独特的字符</h1><br>  
 <p>来自<a href="https://buttondown.email/cassidoo/archive/keep-your-face-always-toward-the-sunshine-and/">Cassidy Williams 时事通讯</a>的提示：<br>编写一个函数，确定是否所有<br>给定字符串中的字符是唯一的。</p><br> <form class="form-start">  
 <input type="text" class="text" id="unique-text" placeholder="Insert your text" pattern="^[^\s].[A-Za-z\s]+[^\s]$" focus required>  
 <input type="button" class="btn" id="submit" onclick="displayResult()" value="Check Unique Text">  
 </form>  
 </div>

CSS：

 * {  
 边距：0；  
 填充：0；  
 字体系列：无衬线；  
 } 身体 {  
 高度：100vh；  
 显示：弯曲；  
 弹性方向：列；  
 证明内容：中心；  
 对齐项目：居中；  
 溢出：隐藏；  
 背景颜色：#ffffff；  
 背景图像：径向渐变（黑色 1px，透明 1px），  
 径向渐变（黑色 1px，白色 1px）；  
 背景尺寸：54px 54px；  
 背景位置：0 0, 27px 27px;  
 } .wrapper {  
 显示：弯曲；  
 弹性方向：列；  
 对齐项目：居中；  
 边框：5px 纯黑色；  
 背景颜色：白色；  
 盒子阴影：20px 15px 0 灰色；  
 填充：50px；  
 边距：50px；  
 } p {  
 文本对齐：居中；  
 } .form-start {  
 显示：弯曲；  
 证明内容：中心；  
 边距：0；  
 盒子阴影：20px 15px 0 灰色；  
 } 。文本，  
 .文本：焦点{  
 边框：5px 纯黑色；  
 边界半径：无；  
 大纲：无；  
 背景颜色：白色；  
 填充：8px 16px；  
 } .btn {  
 光标：指针；  
 边框：无；  
 字体粗细：粗体；  
 白颜色;  
 背景颜色：黑色；  
 填充：8px 16px；  
 } .btn:悬停{  
 变换：翻译（5px，5px）；  
 } 。确认的 {  
 盒子阴影：20px 15px 0 绿色；  
 } .拒绝{  
 盒子阴影：20px 15px 0 红色；  
 }

JavaScript：

 // https://patrikrizek.github.io/ 控制台.clear(); 常量 {  
 核心：{描述，它，期望，运行}，  
 美化  
 } = 窗口.isLite; document.addEventListener("keypress", function (event) {  
 if (event.key === "Enter") {  
 event.preventDefault();  
 document.getElementById("提交").click();  
 }  
 }); 函数显示结果（）{  
 const uniqueText = document.getElementById("unique-text").value;  
 const 同意包装器 = document.querySelector(".wrapper");  
 常量同意表单 = document.querySelector(".form-start"); const charactersOnly = /^[A-Za-z\s]+$/; 如果（！charactersOnly.test（uniqueText））{  
 document.getElementById("唯一文本").select();  
 alert("只允许字母。开头和结尾没有空格。");  
 } 别的 {  
 同意Wrapper.classList.remove("确认", "拒绝");  
 同意Form.classList.remove("确认", "拒绝"); 如果（testUniqueChars（uniqueText））{  
 同意Wrapper.classList.add("确认");  
 同意Form.classList.add("确认");  
 } 别的 {  
 同意Wrapper.classList.add("拒绝");  
 同意Form.classList.add("拒绝");  
 }  
 }  
 } 功能 testUniqueChars（文本）{  
 // 这是你编写实现的地方，CodePen Challenge 朋友们！  
 常量唯一 = 新设置（文本）；  
 返回 text.length == unique.size;  
 } // 如果您选择使用测试套件，这些是您试图通过的测试。  
 描述（“testUniqueChars”，（）=> {  
 it("有独特的字符", () => {  
 期望（testUniqueChars（“代码”））.toBe（真）；  
 期望（testUniqueChars（“笔”））.toBe（真）；  
 期望(testUniqueChars("CodePen")).toBe(false);  
 期望（testUniqueChars（“挑战”））.toBe（假）；  
 });  
 });

HTML、CSS 和 JavaScript 代码片段开启， AllWebCodes.com

完毕！享受 所有独特角色挑战片段

现在下载

本文链接：https://www.qanswer.top/11680/51500311

标签：文本,classList,JavaScript,testUniqueChars,add,HTML,同意,document,CSS
来源： https://www.cnblogs.com/amboke/p/16652305.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

HTML、CSS 和 JavaScript 中的所有唯一字符挑战

HTML、CSS 和 JavaScript 中的所有唯一字符挑战

HTML：

CSS：

JavaScript：