SpeechRecognition实现语音转文字控制的待办事项代码-html代码-BFW代码库

SpeechRecognition实现语音转文字控制的待办事项代码

代码语言：html

所属分类：其他

代码描述：SpeechRecognition实现语音转文字控制的待办事项代码，动动嘴巴就能新增待办事项。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
<style>
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: scroll;
}

.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  text-align: center;
}

.container > div {
  width: 100%;
  height: 100%;
  padding-top: 1em;
  background: radial-gradient(#ededed, #f0f0f0, #fcfcfc, white);
  position: relative;
  overflow: scroll;
  border-top: 1px solid #e6e6e6;
}

.container div small {
  font-family: "Roboto Condensed", sans-serif;
  position: relative;
  top: 50%;
  color: #999999;
}

.container__tasks__task {
  width: 80%;
  background: white;
  box-shadow: 0px 0px 8px 0.1px gray;
  border-radius: 10px;
  text-align: center;
  margin: auto;
  margin-bottom: 1.5em;
  padding: 1em;
}

.container__tasks__task > details {
  font-family: "Roboto Condensed", sans-serif;
  background: none;
  display: inline-block;
  width: 80%;
}

.container__tasks__task > details > summary {
  font-weight: 700;
}

.x {
  width: 20px;
  height: 5px;
  background: #999999;
  border-radius: 5px;
  transform: rotate(45deg);
  display: inline-block;
  vertical-align: middle;
  margin: auto;
}

.x::after {
  width: 20px;
  height: 5px;
  display: block;
  content: " ";
  background: #999999;
  border-radius: 5px;
  transform: rotate(90deg);
}

.container input {
  width: 110px;
  height: 50px;
  min-height: 50px;
  margin: auto;
  margin-bottom: 2em;
  border: none;
  margin-top: 1.5em;
}

.container input::before {
  display: block;
  content: " ";
  width: 110px;
  margin: auto;
  position: absolute;
  height: 50px;
  background: white;
  box-shadow: 0px 0px 8px 0.1px gray;
  border-radius: 25px;
  transition: all 0.3s ease-out;
}

.container input::after {
  display: block;
  content: " ";
  width: 50px;
  height: 50px;
  transform: scale(0.8);
  border-radius: 50%;
  background: #ff756b;
  position: relative;
  transition: all 0.3s ease-out;
}

.container input:checked::after {
  transform: translateX(120%) scale(0.8);
  background: #6bffa4;
}

.container h1 {
  font-family: "Permanent Marker", cursive;
  font-size: 400%;
  padding: 0;
  margin: 0;
}

.container > small {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 600;
  margin-top: 1em;
}
</style>


  
  

  <link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Roboto+Condensed:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
  <h1 class="container__header">To-Do</h1>
  <small class="container__message">Flip switch to toggle speech recognition.</small>
  <input class="container__button" type="checkbox">
  <div class="container__tasks">
    <small class="container__tasks__placeholder">Your tasks will appear here...</small>
    <template id="task-template">
      <div class="container__tasks__task">
        <details>
          &.........完整代码请登录后点击上方下载按钮下载查看