编程语言
首页 > 编程语言> > HTML、CSS 和 JavaScript 中的所有唯一字符挑战

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

作者:互联网

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

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

现在下载

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明

本文链接:https://www.qanswer.top/12238/50160411

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