关于中午去哪吃饭的CSS+JS的简单应用!

2024-01-06 07:38

本文主要是介绍关于中午去哪吃饭的CSS+JS的简单应用!,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>关于中午去哪吃饭的CSS+JS的简单应用!</title>
<script language="javascript">
var alldata = "这里修改,喜欢吃饭的地方,新中关,欧美汇,避风塘,牛魔王,小豆,即品面饭" //在本行修改吃饭地点
var alldataarr = alldata.split(",")
var num = alldataarr.length-1
var timer
function change(){
document.getElementById("oknum").value = alldataarr[GetRnd(0,num)];
}
function start(){
clearInterval(timer);
timer = setInterval('change()',30);
}
function ok(){
clearInterval(timer);
}
function GetRnd(min,max){
return parseInt(Math.random()*(max-min+1));
}
document.οnkeydοwn=key
function key(e) {
var e=e||event;
if (e.keyCode==83) start();
if (e.keyCode==79) ok();
}
</script>
<style>
.button { -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.1); box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.1); -webkit-transition: all 0.1s ease; -moz-transition: all 0.1s ease; -o-transition: all 0.1s ease; font-family: "myriad-pro-1","myriad-pro-2"; line-height: 1.4; background-color: #49a7f3; display: inline-block; padding: 12px 20px; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; color: white; text-decoration: none; border: none; font-size: 22px; font-weight: bold; outline:0;}
.button:hover { background-color: #82c7ff;outline:0; cursor: pointer}
.button:active { -webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.6); -moz-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.6); box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.6);outline:0;}
.choose { background-color: #41d05f; padding:8px 16px;width:230px;}
.choose:hover { background-color: #41d05f; cursor: help}
button::-moz-focus-inner{border-color:transparent!important;}
span{font-size:12px; float:right; color:#333;font-family:Verdana, Arial, Helvetica, sans-serif;}
span a{color:#333;text-decoration: none;}
</style>
</head>
<body>
<p>
<input type="text" id="oknum" name="oknum" value="去哪吃呢?" class="button choose">
</p>
<p>
<button οnclick="start()" accesskey="s" class="button">开始选地(<U>S</U>)</button> <button οnclick="ok()" accesskey="o" class="button">停(<U>O</U>)</button>
</p>
<span>code by <a href="http://uicss.cn/">cuikai-CSS库吧转载自崔凯的博客</a></span>
</body>
</html>

这篇关于关于中午去哪吃饭的CSS+JS的简单应用!的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/575661

相关文章

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞?二、准备如何搞?三、说搞咱就搞!抓取文章提取内容构建html转存markdown

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

用js控制视频播放进度基本示例代码

《用js控制视频播放进度基本示例代码》写前端的时候,很多的时候是需要支持要网页视频播放的功能,下面这篇文章主要给大家介绍了关于用js控制视频播放进度的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言html部分:JavaScript部分:注意:总结前言在javascript中控制视频播放

Mysql表的简单操作(基本技能)

《Mysql表的简单操作(基本技能)》在数据库中,表的操作主要包括表的创建、查看、修改、删除等,了解如何操作这些表是数据库管理和开发的基本技能,本文给大家介绍Mysql表的简单操作,感兴趣的朋友一起看... 目录3.1 创建表 3.2 查看表结构3.3 修改表3.4 实践案例:修改表在数据库中,表的操作主要

Python中随机休眠技术原理与应用详解

《Python中随机休眠技术原理与应用详解》在编程中,让程序暂停执行特定时间是常见需求,当需要引入不确定性时,随机休眠就成为关键技巧,下面我们就来看看Python中随机休眠技术的具体实现与应用吧... 目录引言一、实现原理与基础方法1.1 核心函数解析1.2 基础实现模板1.3 整数版实现二、典型应用场景2

springboot简单集成Security配置的教程

《springboot简单集成Security配置的教程》:本文主要介绍springboot简单集成Security配置的教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录集成Security安全框架引入依赖编写配置类WebSecurityConfig(自定义资源权限规则

Python Dash框架在数据可视化仪表板中的应用与实践记录

《PythonDash框架在数据可视化仪表板中的应用与实践记录》Python的PlotlyDash库提供了一种简便且强大的方式来构建和展示互动式数据仪表板,本篇文章将深入探讨如何使用Dash设计一... 目录python Dash框架在数据可视化仪表板中的应用与实践1. 什么是Plotly Dash?1.1

Android Kotlin 高阶函数详解及其在协程中的应用小结

《AndroidKotlin高阶函数详解及其在协程中的应用小结》高阶函数是Kotlin中的一个重要特性,它能够将函数作为一等公民(First-ClassCitizen),使得代码更加简洁、灵活和可... 目录1. 引言2. 什么是高阶函数?3. 高阶函数的基础用法3.1 传递函数作为参数3.2 Lambda

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方