关于中午去哪吃饭的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

相关文章

深入浅出SpringBoot WebSocket构建实时应用全面指南

《深入浅出SpringBootWebSocket构建实时应用全面指南》WebSocket是一种在单个TCP连接上进行全双工通信的协议,这篇文章主要为大家详细介绍了SpringBoot如何集成WebS... 目录前言为什么需要 WebSocketWebSocket 是什么Spring Boot 如何简化 We

Java Stream流之GroupBy的用法及应用场景

《JavaStream流之GroupBy的用法及应用场景》本教程将详细介绍如何在Java中使用Stream流的groupby方法,包括基本用法和一些常见的实际应用场景,感兴趣的朋友一起看看吧... 目录Java Stream流之GroupBy的用法1. 前言2. 基础概念什么是 GroupBy?Stream

python中列表应用和扩展性实用详解

《python中列表应用和扩展性实用详解》文章介绍了Python列表的核心特性:有序数据集合,用[]定义,元素类型可不同,支持迭代、循环、切片,可执行增删改查、排序、推导式及嵌套操作,是常用的数据处理... 目录1、列表定义2、格式3、列表是可迭代对象4、列表的常见操作总结1、列表定义是处理一组有序项目的

C#中的Converter的具体应用

《C#中的Converter的具体应用》C#中的Converter提供了一种灵活的类型转换机制,本文详细介绍了Converter的基本概念、使用场景,具有一定的参考价值,感兴趣的可以了解一下... 目录Converter的基本概念1. Converter委托2. 使用场景布尔型转换示例示例1:简单的字符串到

Spring Boot Actuator应用监控与管理的详细步骤

《SpringBootActuator应用监控与管理的详细步骤》SpringBootActuator是SpringBoot的监控工具,提供健康检查、性能指标、日志管理等核心功能,支持自定义和扩展端... 目录一、 Spring Boot Actuator 概述二、 集成 Spring Boot Actuat

PyTorch中的词嵌入层(nn.Embedding)详解与实战应用示例

《PyTorch中的词嵌入层(nn.Embedding)详解与实战应用示例》词嵌入解决NLP维度灾难,捕捉语义关系,PyTorch的nn.Embedding模块提供灵活实现,支持参数配置、预训练及变长... 目录一、词嵌入(Word Embedding)简介为什么需要词嵌入?二、PyTorch中的nn.Em

Java中使用 @Builder 注解的简单示例

《Java中使用@Builder注解的简单示例》@Builder简化构建但存在复杂性,需配合其他注解,导致可变性、抽象类型处理难题,链式编程非最佳实践,适合长期对象,避免与@Data混用,改用@G... 目录一、案例二、不足之处大多数同学使用 @Builder 无非就是为了链式编程,然而 @Builder

Spring Boot3.0新特性全面解析与应用实战

《SpringBoot3.0新特性全面解析与应用实战》SpringBoot3.0作为Spring生态系统的一个重要里程碑,带来了众多令人兴奋的新特性和改进,本文将深入解析SpringBoot3.0的... 目录核心变化概览Java版本要求提升迁移至Jakarta EE重要新特性详解1. Native Ima

从入门到精通详解LangChain加载HTML内容的全攻略

《从入门到精通详解LangChain加载HTML内容的全攻略》这篇文章主要为大家详细介绍了如何用LangChain优雅地处理HTML内容,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录引言:当大语言模型遇见html一、HTML加载器为什么需要专门的HTML加载器核心加载器对比表二

Redis中Stream详解及应用小结

《Redis中Stream详解及应用小结》RedisStreams是Redis5.0引入的新功能,提供了一种类似于传统消息队列的机制,但具有更高的灵活性和可扩展性,本文给大家介绍Redis中Strea... 目录1. Redis Stream 概述2. Redis Stream 的基本操作2.1. XADD